Data Tutorials

Tutorial Home › Data

List-Details with three templates and code-only

#3 List-Details with two templates, automatic view-switching

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

Requirements

2sxc 06.05

Resources

App Data

List Details using Automatic View-Switching

The previous examples showed you how to do things "manually". In this example, the 2sxc-view configuration says that the main view should come when data620 is in the url, and that the details view should come, when data620id (for details) is in the url. This automatic view switching makes life easier and code shorter:).

List of Persons

Output

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

Source Code of 620-b-details.cshtml@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade;
@using System.Linq;
<!-- unimportant stuff, hidden -->


Details using Automatic View-Switching x... <!-- unimportant stuff, hidden -->

@{
  var urlId = CmsContext.Page.Parameters["data620id"];
  int id = Int32.Parse(urlId);

  // find the person with this Id using LINQ
  var person = AsList(App.Data["Persons"])
    .First(p => p.EntityId == id);
}

<img loading="lazy" src="@person.Mugshot?w=50&h=50&mode=crop" width="50px" style="border-radius: 50%" class="float-left">
<h3>Details of @person.FirstName @person.LastName</h3>
<a href='@Link.To(parameters: "data620=page")'>back to list</a>

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

List-Details with three templates and code-only

#3 List-Details with two templates, automatic view-switching

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</h2>
    <p>
      The previous examples showed you how to do things "manually". In this example, the 2sxc-view configuration says that the main view should come when <code>data620</code> is in the url, and that the details view should come, when <code>data620id</code> (for details) is in the url. This automatic view switching makes life easier and code shorter:). 
    </p>
  </div>
</div>


  <h3>List of Persons</h3>

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



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