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) {
@Html.Partial("Coded-List.Typed.cshtml")
} 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>
<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>