Skip to main content

Data Tutorials

Tutorial Home

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.

Since we'll look for the desired item in code, we'll use LINQ. To learn more about that, check out the LINQ Tutorials.

Requirements
Resources

List of Persons

Source Code of this file

Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Source Code of _611-list.cshtml

Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code

1
2
3
4
5
6
7
8
9
10
11
12
@inherits Custom.Hybrid.Razor14
<h3>List of Persons</h3>
<ul>
@foreach(var person in AsList(App.Data["Persons"])) {
<li>
<a href='@Link.To(parameters: "data611=true&id=" + person.EntityId )'>
@person.FirstName @person.LastName
</a>
</li>
}
</ul>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Source Code of _611-details.cshtml

Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code

1
2
3
4
5
6
7
8
9
10
11
12
13
@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: "data611=true")'>back to list</a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX