App

Data List-Details

Tutorial Home › List-Details

Basic List Details using Code - with separate Details-File

#3 List Details using Automatic View-Switching

List Details using Automatic View-Switching and Query

Requirements

2sxc 06.05

Resources

App Data

LINQ Basics

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 id is in the url, and that the details view should come, when id (for details) is in the url. This automatic view switching makes life easier and code shorter:).

⬇️ Result | Source ➡️

Details View (automically activated)

You now see the details page. It was automatically shown, because the url contains id. The image to the right shows where this configuration applied.

Details of Neil Gaiman

back to list

@inherits Custom.Hybrid.Razor14

<h4>List of main view</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-Basic-Details.Dyn.cshtml
@inherits Custom.Hybrid.Razor14

<h4>Details View (automically activated)</h4>
<p>
  You now see the details page. It was automatically shown, because the url contains <code>id</code>.
  The image to the right shows where this configuration applied. 
</p>
@{
  var urlParams = CmsContext.Page.Parameters;
  var urlId = urlParams["id"];
  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: urlParams.Remove("Id"))'>back to list</a>