Oqtane Tutorials

Data Tutorials

Tutorial Home › Data

List-Details with two templates, automatic view-switching

#4 List-Details with two templates, automatic view-switching and query

Look into a Content-Type

Requirements

2sxc 06.05

Resources

App Data

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

Output

<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 })

List-Details with two templates, automatic view-switching

#4 List-Details with two templates, automatic view-switching and query

Look into a Content-Type

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 })