Skip to main content
Home  › ... Razor

Data List-Details

Tutorial HomeList-Details
#2 Basic List Details using Code - with separate Details-File
The samples can differ based on your Razor base class or if you're running an old version.
Selected: Typed (2sxc 16+) Switch to Dynamic (Razor14 or below)

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.

@inherits Custom.Hybrid.RazorTyped

  // check if we have a url-parameter called "id" with a value - defaults to 0 if not found
  int id = MyPage.Parameters.Int("id");
@if (id == 0) {
} else {
  @Html.Partial("Coded-Details.Typed.cshtml", new { Id = id })

Source Code of Coded-List.Typed.cshtml

@inherits Custom.Hybrid.RazorTyped
<h3>List of Persons</h3>
  @foreach (var person in AsItems(App.Data.GetStream("Persons"))) {
      <a href='@Link.To(parameters: MyPage.Parameters.Set("id", person.Id))'>
        @person.Get("FirstName") @person.Get("LastName")

Source Code of Coded-Details.Typed.cshtml

@inherits Custom.Hybrid.RazorTyped
  // the ID is already given by the caller, so we just get that
  var id = MyModel.Int("Id");

  // find the person with this Id using LINQ
  var person = AsItems(App.Data.GetStream("Persons"))
    .First(p => p.Id == id);
@person.Picture("Mugshot", settings: "Square", width: 50, imgClass: "float-left", imgAttributes: new {
  style = "border-radius: 50%"
<h3>Details of @person.Get("FirstName") @person.Get("LastName")</h3>
<a href='@Link.To(parameters: MyPage.Parameters.Remove("id"))'>back to list</a>


#2 Basic List Details using Code - with separate Details-File