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

Content Tutorials

Tutorial Home
Working with Entity (Item) Values
#2 Show current Content in the Ouput
Introduction to Data

Working with Content

In most cases a template will run in a context - so something prepared data for the template, which should now be visualized. These examples assume you're working with 2sxc, which let's editors work with content - and your template only needs to visualize it. The current content item (if it's just one) is always available on the variable called Content. It's a dynamic object, so you can just type things like @Content.FirstName to access the properties.

Requirements
Resources

Show Content of the Current template

  • Name: Douglas Adams
  • Birthday: 3/11/1952
  • Award: Hugo Award
 

<img loading="lazy" src="@Content.Mugshot?w=100&h=100&mode=crop" align="right"  style="border-radius: 50%">
<ul>
  <li>Name: @Content.FirstName @Content.LastName</li>
  <li>Birthday: @Content.Birthday.ToString("d")</li>
  <li>Award: @Content.Awards.Name</li>
</ul>

In this example, the Content-Item is of the type Person. It has properties like Name, Birthday etc. and a property called Awards. Awards refers to other items of the type PersonAwards and has properties like Name. The above example showed the award Name using @Content.Awards.Name - which makes sense when you only expect one award. Below we'll show some ways to show many items, if there are more than one.

Show all Items assigned to current template

If a view has many items assigned (called a list) these should be retrieved from Data - if you don't specify a stream, it's treated as Data["Default"]. You will usually want to convert it to a dynamic list using AsList(...). This example also uses Text.Has(...) to only show a picture if it really has a mugshot.

  • Douglas Adams
  • Terry Pratchett
  • Neil Gaiman
  • George Akerlof
  • Raphael Müller (not an author)
  • Ed Hardy 

<ul>
@foreach(var person in AsList(Data)) {
  <li>
    @if(Text.Has(person.Mugshot)) {
      <img loading="lazy" src="@person.Mugshot?w=50&h=50&mode=crop" width="50px" style="border-radius: 50%">
    }
    @person.FirstName @person.LastName
  </li>
}
</ul>

Show sub-items of current items

This example builds on the last one, and additionally shows awards these authors have won, which is on the Awards property.

  • Douglas Adams (awards: Hugo Award)
  • Terry Pratchett
  • Neil Gaiman
  • George Akerlof (awards: Nobel Peace Prize)
  • Raphael Müller (not an author)
  • Ed Hardy 

<ul>
@foreach(var person in AsList(Data)) {
  <li @Edit.TagToolbar(Content)>
    @if(Text.Has(person.Mugshot)) {
      <img loading="lazy" src="@person.Mugshot?w=50&h=50&mode=crop" width="50px" style="border-radius: 50%">
    }
    @person.FirstName @person.LastName
    @if(person.Awards.Count > 0 ) {
      // we just want the award names - to understand this, look at the LINQ tutorial
      var awardNames = AsList(person.Awards as object).Select(a => a.Name);
      <span>
        (awards: @string.Join(",", awardNames))
      </span>
    }
  </li>
}
</ul>
Working with Entity (Item) Values
#2 Show current Content in the Ouput
Introduction to Data

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 -->
@using ToSic.Razor.Blade;
@using System.Linq;

<div class="row">
  <div class="col-lg-7">
    <h2>Working with Content</h2>
    <p>In most cases a template will run in a context - so something prepared data for the template, which should now be visualized. These examples assume you're working with 2sxc, which let's editors work with content - and your template only needs to visualize it. The current content item (if it's just one) is always available on the variable called <code>Content</code>. It's a <code>dynamic</code> object, so you can just type things like <code>@@Content.FirstName</code> to access the properties.</p>
  </div>
  @Html.Partial("../shared/_DefaultInfoSection.cshtml")
</div>
<hr>
<h3>Show Content of the Current template</h3>

<img loading="lazy" src="@Content.Mugshot?w=100&h=100&mode=crop" align="right"  style="border-radius: 50%">
<ul>
  <li>Name: @Content.FirstName @Content.LastName</li>
  <li>Birthday: @Content.Birthday.ToString("d")</li>
  <li>Award: @Content.Awards.Name</li>
</ul>



In this example, the Content-Item is of... <!-- unimportant stuff, hidden -->

Show all Items assigned to current... <!-- unimportant stuff, hidden -->

<ul>
@foreach(var person in AsList(Data)) {
  <li>
    @if(Text.Has(person.Mugshot)) {
      <img loading="lazy" src="@person.Mugshot?w=50&h=50&mode=crop" width="50px" style="border-radius: 50%">
    }
    @person.FirstName @person.LastName
  </li>
}
</ul>




Show sub-items of current items This... <!-- unimportant stuff, hidden -->


<ul>
@foreach(var person in AsList(Data)) {
  <li @Edit.TagToolbar(Content)>
    @if(Text.Has(person.Mugshot)) {
      <img loading="lazy" src="@person.Mugshot?w=50&h=50&mode=crop" width="50px" style="border-radius: 50%">
    }
    @person.FirstName @person.LastName
    @if(person.Awards.Count > 0 ) {
      // we just want the award names - to understand this, look at the LINQ tutorial
      var awardNames = AsList(person.Awards as object).Select(a => a.Name);
      <span>
        (awards: @string.Join(",", awardNames))
      </span>
    }
  </li>
}
</ul>



<!-- unimportant stuff, hidden -->