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
Resources
Related
Collapse all

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:).

@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>
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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>
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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