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+) Selected: Typed (2sxc 16+) Switch to 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.

⬇️ Result | Source ➡️

List of Persons

@inherits Custom.Hybrid.RazorTyped

@if (MyPage.Parameters.IsEmpty("id")) {
  @Html.Partial("Coded-List.Typed.cshtml")
} else {
  @Html.Partial("Coded-Details.Typed.cshtml", new { Id = MyPage.Parameters.Int("id") })
}

Source Code of Coded-List.Typed.cshtml

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

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>

 

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