Skip to main content
Home  › ... 2sxc Apps

Data Tutorials

Tutorial Home
List-Details with one template and code-only
#12 List-Details with three templates and code-only
List-Details with two templates, automatic view-switching

Basic List Details using Code - with separate Details-File

Very often you have a list of items, and then a details-page showing just one item. In this example, we'll just use code to do this (so no visual query) - just so you understand the principle. This example splits the list/details templates into 3 files, which is easier to manage. File 1 choses what should happen, file 2 contains the list, and file 3 the details.

Since we'll look for the desired item in code, we'll use LINQ. To learn more about that, check out the LINQ Tutorials.

Requirements
Resources

Details of Terry Pratchett

back to list
List-Details with one template and code-only
#12 List-Details with three templates and code-only
List-Details with two templates, automatic view-switching

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
<!-- unimportant stuff, hidden -->
@{
  // check if we have a url-parameter called "id" with a value
  int id;
  // showdetails will be true, if urlId had a number
  var showDetails = Int32.TryParse(CmsContext.Page.Parameters["id"], out id);
}
Basic List Details using Code - with... <!-- unimportant stuff, hidden -->
@if(!showDetails) {
  @Html.Partial("_611-list.cshtml")
} else {
  @Html.Partial("_611-details.cshtml", new { Id = id })
}

<!-- unimportant stuff, hidden -->

Source Code of _611-list.cshtml

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
<h3>List of Persons</h3>
<ul>
  @foreach(var person in AsList(App.Data["Persons"])) {
    <li>
      <a href='@Link.To(parameters: "data611=true&id=" + person.EntityId )'>
        @person.FirstName @person.LastName
      </a>
    </li>
  }
</ul>

Source Code of _611-details.cshtml

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
@{
  // the ID is already given by the caller, so we just get that
  var id = (int)DynamicModel.Id;

  // 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: "data611=true")'>back to list</a>