Skip to main content
Home  › ... Razor

Data Tutorials

Tutorial HomeData
#4 List-Details with two templates, automatic view-switching and query
Requirements
Resources

List Details using Automatic View-Switching and Query

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.

List of Persons

<ul>
  @foreach (var person in AsList(App.Data["Persons"])) {
    <li>
      <a href='@Link.To(parameters: "data621id=" + person.EntityId )'>
        @person.FirstName @person.LastName
      </a>
    </li>
  }
</ul>

Source Code of 621-b-details.cshtml

@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade;
@using System.Linq;
<!-- unimportant stuff, hidden -->
Details using Automatic View-Switching... <!-- unimportant stuff, hidden -->

<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: "data621=true")'>back to list</a>
<br>
<br>
@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })
#4 List-Details with two templates, automatic view-switching and query

Source Code of this file

Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code

@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade;
@using System.Linq;
<!-- unimportant stuff, hidden -->


<div @Sys.PageParts.InfoWrapper()>
  @Html.Partial("../shared/DefaultInfoSection.cshtml")
  <div @Sys.PageParts.InfoIntro()>
    <h2>List Details using Automatic View-Switching and Query</h2>
    <p>
      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.
    </p>

  </div>
</div>


<h3>List of Persons</h3>

<ul>
  @foreach (var person in AsList(App.Data["Persons"])) {
    <li>
      <a href='@Link.To(parameters: "data621id=" + person.EntityId )'>
        @person.FirstName @person.LastName
      </a>
    </li>
  }
</ul>



@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })