Oqtane Tutorials
Oqtane Tutorials

Data List-Details

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

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.Razor14

@{
  // 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("Coded-List.cshtml")
} else {
  @Html.Partial("Coded-Details.cshtml", new { Id = id })
}

Source Code of coded-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 coded-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>

 

Basic List Details using Code
#2 Basic List Details using Code - with separate Details-File
List Details using Automatic View-Switching