App

Data List-Details

Tutorial Home › List-Details
Basic Example from App.Data
#1 Basic List Details using Code
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)
Requirements
Resources
Related

Basic List Details using Code

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 even has the list & details view in the same file - but usually you don't want that - so check the next examples afterwards.

⬇️ Result | Source ➡️

Details of Douglas Adams

back to list 
@inherits Custom.Hybrid.RazorTyped
@using ToSic.Razor.Blade
@{
  var persons = AsItems(App.Data.GetStream("Persons"));
}
@* check if we have a url-parameter called "id" with a value *@
@if (MyPage.Parameters.IsEmpty("id")) {
  <h3>List of Persons</h3>
  <ul>
    @foreach (var person in persons) {
      <li>
        <a href='@Link.To(parameters: MyPage.Parameters.Set("id", person.Id))'>
          @person.Get("FirstName") @person.Get("LastName")
        </a>
      </li>
    }
  </ul>
} else {
  // find the person with this Id using LINQ
  int id = MyPage.Parameters.Int("id");
  var person = 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 Example from App.Data
#1 Basic List Details using Code
Basic List Details using Code - with separate Details-File