Logo
Logo
  • Blazor CMS Home
  • Oqtane Tutorials
  • Blazor CMS Home
  • Oqtane Tutorials
Oqtane Tutorials
Oqtane Tutorials

Data List-Details

Tutorial Home › List-Details
Basic List Details using Code - with separate Details-File
#3 List Details using Automatic View-Switching
List Details using Automatic View-Switching and Query
Requirements
  • 2sxc 06.05
Resources
  • App Data
Related
  • LINQ Basics

List Details using Automatic View-Switching

The previous examples showed you how to do things "manually". In this example, the 2sxc-view configuration says that the main view should come when id is in the url, and that the details view should come, when id  (for details) is in the url. This automatic view switching makes life easier and code shorter:).

⬇️ Result | Source ➡️

List of main view

  • Douglas Adams
  • Terry Pratchett
  • Neil Gaiman
  • George Akerlof
  • Raphael Müller (not an author)
  • Ed Hardy
@inherits Custom.Hybrid.Razor14

<h4>List of main view</h4>
<ul>
  @foreach (var person in AsList(App.Data["Persons"])) {
    <li>
      <a href='@Link.To(parameters: CmsContext.Page.Parameters.Set("id", person.EntityId))'>
        @person.FirstName @person.LastName
      </a>
    </li>
  }
</ul>

Source Code of Snip-Basic-Details.Dyn.cshtml

@inherits Custom.Hybrid.Razor14

<h4>Details View (automically activated)</h4>
<p>
  You now see the details page. It was automatically shown, because the url contains <code>id</code>.
  The image to the right shows where this configuration applied. 
</p>
@{
  var urlParams = CmsContext.Page.Parameters;
  var urlId = urlParams["id"];
  int id = Int32.Parse(urlId);

  // 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: urlParams.Remove("Id"))'>back to list</a>

View-Switching based on URL Parameters

This requires the view configuration to be set to activate the details view if id is specified in the url, using id/.*

 

Basic List Details using Code - with separate Details-File
#3 List Details using Automatic View-Switching
List Details using Automatic View-Switching and Query
  • 2sic internet solutions
  • Langäulistrasse 62, 9470 Buchs SG, Switzerland
  • +41 81 750 67 77
Login