The previous examples showed you how to do auto-switch views. This example makes the code even easier, by telling the details-view to pick up the details-item from a query. You can see the query and how it's configured to the right.
-
-
-
-
@inherits Custom.Hybrid.Razor14
<h4>List of Persons</h4>
<ul>
@foreach (var person in AsList(App.Data["Persons"])) {
<li>
<a href='@Link.To(parameters: CmsContext.Page.Parameters.Set("id", person.EntityId))'>
@person.FirstName @person.LastName
</a>
</li>
}
</ul>
Source Code of Snip-Query-Details.Dyn.cshtml
@inherits Custom.Hybrid.Razor14
<h2>Details using Automatic View-Switching</h2>
<p>
You now see the details page. The code is even shorter, because it is using a query, which already does the <em>look-for-id</em>. The image to the right shows where this configuration is applied to the view.
</p>
</trim>
<img loading="lazy" src="@Content.Mugshot?w=50&h=50&mode=crop" width="50px" style="border-radius: 50%" class="float-left">
<h3>Details of @Content.FirstName @Content.LastName</h3>
<a href='@Link.To(parameters: CmsContext.Page.Parameters.Remove("Id"))'>back to list</a>
View Configuration
This is how this view would be configured for this sample.
- Query: Data-ViewSwitch-Query-Details
Details for Query: Data-ViewSwitch-Query-Details
This query gets a single person for the view which shows the details. It will look for the person matching the ID in the url.
View-Switching based on URL Parameters
This requires the view configuration to be set to activate the details view if id is specified in the url, using id/.*