Data Tutorials

Tutorial Home › Data

List-Details with one template and code-only

#2 List-Details with three templates and code-only

List-Details with two templates, automatic view-switching

Requirements

2sxc 06.05

Resources

App Data

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.

Output

List of Persons

@{
  // check if we have a url-parameter called "id" with a value - defaults to 0 if not found
  int id = Kit.Convert.ToInt(CmsContext.Page.Parameters["id"]);
}
@if (id == 0) {
  @Html.Partial("611-list.cshtml")
} else {
  @Html.Partial("611-details.cshtml", new { Id = id })
}

Source Code of 611-list.cshtml@inherits Custom.Hybrid.Razor14
<h3>List of Persons</h3>
<ul>
  @foreach (var person in AsList(App.Data["Persons"])) {
    <li>
      <a href='@Link.To(parameters: CmsContext.Page.Parameters.Set("id", person.EntityId.ToString()))'>
        @person.FirstName @person.LastName
      </a>
    </li>
  }
</ul>

Source Code of 611-details.cshtml@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: CmsContext.Page.Parameters.Remove("id"))'>back to list</a>

List-Details with one template and code-only

#2 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
@using ToSic.Razor.Blade;
@using System.Linq;
<!-- unimportant stuff, hidden -->


<div @Sys.PageParts.InfoWrapper()>
  @Html.Partial("../shared/DefaultInfoSection.cshtml")
  <div @Sys.PageParts.InfoIntro()>
    <h2>Basic List Details using Code - with separate Details-File</h2>
    <p>
      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. 
    </p>
    <p>
      Since we'll look for the desired item in code, we'll use LINQ. To learn more about that, check out the @Sys.TutLink("LINQ Tutorials", "linq").
    </p>
  </div>
</div>

  @{
    // check if we have a url-parameter called "id" with a value - defaults to 0 if not found
    int id = Kit.Convert.ToInt(CmsContext.Page.Parameters["id"]);
  }
  @if (id == 0) {
    @Html.Partial("611-list.cshtml")
  } else {
    @Html.Partial("611-details.cshtml", new { Id = id })
  }



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