Skip to main content
Home  › ... 2sxc Apps

Data Tutorials

Tutorial Home
DNN data (pages/tabs) from the DNN TabController
#11 List-Details with one template and code-only
List-Details with three templates and code-only

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.

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

Details of Douglas Adams

back to list
DNN data (pages/tabs) from the DNN TabController
#11 List-Details with one template and code-only
List-Details with three templates and code-only

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 

@inherits Custom.Hybrid.Razor14
<!-- unimportant stuff, hidden -->
@{
  var persons = AsList(App.Data["Persons"]);

  // check if we have a url-parameter called "id" with a value
  // if we do, switch on showDetails and filter the persons to only one
  var urlId = CmsContext.Page.Parameters["id"];
  int id;
  // showdetails will be true, if urlId had a number
  var showDetails = Int32.TryParse(urlId, out id);
}
Basic List Details using Code Very often... <!-- unimportant stuff, hidden -->

@if(!showDetails) {
  <h3>List of Persons</h3>
<ul>
  @foreach(var person in persons) {
    <li>
      <a href='@Link.To(parameters: "data610=true&id=" + person.EntityId )'>
        @person.FirstName @person.LastName
      </a>
    </li>
  }
</ul>
} else {
  // find the person with this Id using LINQ
  var person = 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: "data610=true")'>back to list</a>
}

<!-- unimportant stuff, hidden -->