Content Items / Entities

Tutorial Home › Content

Working with Entity (Item) Values

#2 Working with Block Contents

The <img> Tag and Different Image Formats

Requirements

2sxc 12.08

Resources

Working with Block Contents

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.

The samples can differ based on your Razor base class or if you're running an old version.
Switch to Strong-Typed (2sxc 17.06+) Selected: Typed (2sxc 16+) Switch to Dynamic (Razor14 or below)

Show Entity Values from the current Data

Showing values from Data (aka. Entities) is very easy. Normally they are accessed through Item (new Razor) or DynamicEntity (older Razor) objects.

⬇️ Result | Source ➡️

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

@inherits Custom.Hybrid.RazorTyped

@MyItem.Img("Mugshot", settings: "Square", width: 100, imgClass: "rounded-circle")
<ul>
  <li>
    Name:
    @MyItem.String("FirstName")
    @MyItem.String("LastName")
  </li>
  <li>
    Birthday:
    @MyItem.DateTime("Birthday").ToString("d")
  </li>
  <li>
    Award:
    @MyItem.Child("Awards").String("Name")
  </li>
</ul>

View Configuration

This is how this view would be configured for this sample.

Content/Item ContentType: Persons
Content/Item Data:
1. Douglas (ID: 5338)

Note that Awards refers to other Entities 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. In other tutorials you'll see how to work with such related Entities if there are more than one.

Work with Content Items - `MyItem`

MyItem is the object which contains the first thing added by the editor on the current block.

Every view/template receives prepared data, usually on the MyItem object.

⬇️ Result | Source ➡️

Douglas Adams on `MyItem`

Id, Guid and Title are built-in properties

Id: 5338
Guid: 36726e4e-21cd-4c00-9ce8-72080f8935da
Title: Douglas

Use Get(…) if you don't care about the var type...

Name: Douglas
Birthday: 3/11/1952 12:00:00 AM

... or Get<T>(…) which will try to treat as the expected type.

Birthday Get<string> 03/11/1952 00:00:00
Birthday Get<DateTime> 3/11/1952 12:00:00 AM
Birthday Get<bool> False
Birthday Get<int> 0

Use typed methods such as .String(…) if you care about the variable type.

Name (strings): Douglas Adams
Birthday: 3/11/1952
Is Alive: False
Fav Num. Int: 42
Fav Num. Float: 41.99

Use fallback: … to handle empty values or conversion problems.

Name (strings): Douglas
Name (int): 12345

Use .Attribute(…) to safely encode properties. Mouse over this to see the effect.

@inherits Custom.Hybrid.RazorTyped

<h4>Douglas Adams on <code>MyItem</code></h4>
<p>
  Id, Guid and Title are built-in properties
</p>
<ol>
  <li>Id:             @MyItem.Id</li>
  <li>Guid:           @MyItem.Guid</li>
  <li>Title:          @MyItem.Title</li>
</ol>

<p>Use <code>Get(…)</code> if you don't care about the var type...</p>
<ol>
  <li>Name:           @MyItem.Get("FirstName")</li>
  <li>Birthday:       @MyItem.Get("Birthday")</li>
</ol>

<p>... or <code>Get&lt;T&gt;(…)</code> which will try to treat as the expected type.</p>
<ol>
  <li>Birthday Get&lt;string&gt;    @(MyItem.Get<string>("Birthday"))</li>
  <li>Birthday Get&lt;DateTime&gt;  @(MyItem.Get<DateTime>("Birthday"))</li>
  <li>Birthday Get&lt;bool&gt;      @(MyItem.Get<bool>("Birthday"))</li>
  <li>Birthday Get&lt;int&gt;       @(MyItem.Get<int>("Birthday"))</li>
</ol>

<p>Use typed methods such as <code>.String(…)</code> if you care about the variable type.</p>
<ol>
  @* use .String(…), .DateTime(…), .Int(…) to make it typed *@
  <li>Name (strings): @MyItem.String("FirstName") @MyItem.String("LastName")</li>
  <li>Birthday:       @MyItem.DateTime("Birthday").ToString("d")</li>
  <li>Is Alive:       @MyItem.Bool("IsAlive")</li>

  @* use .Int(…), .Long(…), .Float(…) etc. for numbers *@
  <li>Fav Num. Int:   @MyItem.Int("FavoriteNumber")</li>
  <li>Fav Num. Float: @MyItem.Float("FavoriteNumber")</li>
</ol>

<p>Use <code>fallback: …</code> to handle empty values or conversion problems.</p>
<ol>
  @* this has no effect, as the value works *@
  <li>Name (strings): @MyItem.String("FirstName", fallback: "unknown")
  <li>Name (int):     @MyItem.Int("FirstName", fallback: 12345)
</ol>


<p title='@MyItem.Attribute("FirstName")'>
  Use <code>.Attribute(…)</code> to safely encode properties.
  Mouse over this to see the effect.
</p>

View Configuration

This is how this view would be configured for this sample.

Content/Item ContentType: Persons
Content/Item Data:
1. Douglas (ID: 5338)

Working with Entity (Item) Values
Every thing is an Entity. Here some basic examples how to show values like Name, Birthday etc. of such an Entity.
Working with Block Contents
Show content which was entered for this module

⬇️ Result | Source ➡️

Douglas Adams on `MyItem`

Note: The Biography contains a LOT of HTML...

Teaser (using .Raw() for Umlauts):
Douglas Noël Adams (11 March 1952 – 11 May 2001) was an English author, humorist , and…

Now as rich HTML
(drag size to see responsiv behavior)

Douglas Noël Adams (11 March 1952 – 11 May 2001) was an English author, humorist, and screenwriter, best known for The Hitchhiker's Guide to the Galaxy. Originally a 1978 BBC radio comedy, The Hitchhiker's Guide to the Galaxy developed into a "trilogy" of five books that sold more than 15 million copies in his lifetime.

@inherits Custom.Hybrid.RazorTyped
@using ToSic.Razor.Blade

<h4>Douglas Adams on <code>MyItem</code></h4>
<p>
  Note: The Biography contains a LOT of HTML...
</p>
@{
  // scrubHtml will clean up Html tags; there are more options
  var bio = MyItem.String("Biography", scrubHtml: true);

  // Text.Ellipsis uses RazorBlade
  var teaser = Text.Ellipsis(bio, 100);
}
<p>
  <strong>Teaser</strong> (using .Raw() for Umlauts): <br>
  <em>@Html.Raw(teaser)</em>
</p>
<hr>
<div>
  <strong>Now as rich HTML</strong> <br>
  (drag size to see responsiv behavior) <br>
  @MyItem.Html("Biography")
</div>

View Configuration

This is how this view would be configured for this sample.

Content/Item ContentType: Persons
Content/Item Data:
1. Douglas (ID: 5338)

The Presentation property only exists if the view is configured to use Presentation. In which case this is used to specify additional information how something should look or be presented.

⬇️ Result | Source ➡️

A Person on `MyItem`

Note that the following should be green (probably green)

Content number 1

@inherits Custom.Hybrid.RazorTyped

<h4>A Person on <code>MyItem</code></h4>
@{
  var itemPres = MyItem.Presentation;
}

<p>
  Note that the following should be @itemPres.String("Color") (probably green)
</p>
<p style='color: @itemPres.Attribute("Color")'>
  @MyItem.Title
</p>

View Configuration

This is how this view would be configured for this sample.

Content/Item ContentType: QuickRefContent
Content/Item IsList: True
Content/Item Data:
1. Content number 1 (ID: 5861) - Presentation: green (ID: 5857)
2. Content two (ID: 5862) - Presentation: red (ID: 5864)
3. Content three (ID: 5866) - Presentation: cyan (ID: 5865)

Working with Entity (Item) Values
Every thing is an Entity. Here some basic examples how to show values like Name, Birthday etc. of such an Entity.
Working with Block Contents
Show content which was entered for this module

Child items such as Awards are accessed using Child("Awards"). There are many ways to work with them.

⬇️ Result | Source ➡️

Use `.Child("Awards")` to get one

Award ID: 5383
Award Name: Hugo Award
Award Name (Path): Hugo Award

Use ContainsKey(…), IsEmpty(…), IsNotEmpty(…)

ContainsKey("Awards"): True
ContainsKey("Awards2"): False
IsEmpty("Awards"): False
IsNotEmpty("Awards"): True
IsEmpty("Awards.Name"): False
IsEmpty("Awards2.Name"): True
IsEmpty("Awards.NameX"): True

Use `.Children("Awards")` to get all

Award Count: 2

Award: Hugo Award
Award: Inkpot Award

@inherits Custom.Hybrid.RazorTyped

<h4>Use <code>.Child("Awards")</code> to get one</h4>
<ol>
  <li>Award ID:          @MyItem.Child("Awards").Id</li>
  <li>Award Name:        @MyItem.Child("Awards").String("Name")</li>
  <li>Award Name (Path): @MyItem.String("Awards.Name")</li>
</ol>

<p>Use ContainsKey(…), IsEmpty(…), IsNotEmpty(…)</p>
<ol>
  <li>ContainsKey("Awards"):  @MyItem.ContainsKey("Awards")</li>
  <li>ContainsKey("Awards2"): @MyItem.ContainsKey("Awards2")</li>
  <li>IsEmpty("Awards"):      @MyItem.IsEmpty("Awards")</li>
  <li>IsNotEmpty("Awards"):   @MyItem.IsNotEmpty("Awards")</li>
  <li>IsEmpty("Awards.Name"): @MyItem.IsEmpty("Awards.Name")</li>
  <li>IsEmpty("Awards2.Name"): @MyItem.IsEmpty("Awards2.Name")</li>
  <li>IsEmpty("Awards.NameX"): @MyItem.IsEmpty("Awards.NameX")</li>
</ol>

<h4>Use <code>.Children("Awards")</code> to get all</h4>
<span>Award Count:       @MyItem.Children("Awards").Count()</span>
<ol>
  @foreach (var award in MyItem.Children("Awards")) {
    <li>Award: @award.String("Name")</li>
  }
</ol>

View Configuration

This is how this view would be configured for this sample.

Content/Item ContentType: Persons
Content/Item Data:
1. Douglas (ID: 5338)

Working with Entity (Item) Values
Every thing is an Entity. Here some basic examples how to show values like Name, Birthday etc. of such an Entity.
Working with Block Contents
Show content which was entered for this module

Properties can contain urls such as /abc.jpg or file references like file:72.

⬇️ Result | Source ➡️

Douglas Adams, the current item (MyItem)

Use .Url(…) to resolve file references such as file:72

Mugshot field Value: file:212
Mugshot URL: /oqtane-tutorials/app/Tutorial-Razor/adam/Tm5yNs0hAEyc6HIID4k12g/Mugshot/douglas%20adams.png
Mugshot Picture

@inherits Custom.Hybrid.RazorTyped

<h4>Douglas Adams, the current item (MyItem)</h4>
<p>Use <code>.Url(…)</code> to resolve file references such as <code>file:72</code></p>
<ol>
  <li>Mugshot field Value:  @MyItem.String("Mugshot")</li>
  <li>Mugshot URL:          @MyItem.Url("Mugshot")</li>
  <li>
    Mugshot Picture <br>
    @MyItem.Picture("Mugshot", settings: "Square", width: 100, imgClass: "rounded-circle")
  </li>
</ol>

View Configuration

This is how this view would be configured for this sample.

Content/Item ContentType: Persons
Content/Item Data:
1. Douglas (ID: 5338)

Properties can contain urls such as /abc.jpg or file references like file:72.

⬇️ Result | Source ➡️

Douglas Adams, the current item (MyItem)

File name: douglas adams
File extension: png
Size (bytes): 39125
SizeInfo: 38.2 KB

Every file-field is actually a folder...

Files count: 2
Sub-Folders: 0

...which could hold many files. If you want to show them, you need Kit.Image...

douglas adams
not-panicking

@inherits Custom.Hybrid.RazorTyped

<h4>Douglas Adams, the current item (MyItem)</h4>
@{
  var file = MyItem.File("Mugshot");
  var sizeInfo = file.SizeInfo;
}
<ol>
  <li>File name:        @file.Name</li>
  <li>File extension:   @file.Extension</li>
  <li>Size (bytes):     @file.Size</li>
  <li>SizeInfo:         @sizeInfo.BestSize.ToString("#.#") @sizeInfo.BestUnit</li>
</ol>

<p>Every file-field is actually a folder...</p>
@{
  var folder = MyItem.Folder("Mugshot");
}
<ol>
  <li>Files count:    @folder.Files.Count()</li>
  <li>Sub-Folders:    @folder.Folders.Count()</li>
</ol>
<p>
  ...which could hold many files. 
  If you want to show them, you need <code>Kit.Image...</code></p>
<ol>
  @foreach (var f in folder.Files) {
    <li>@f.Name <br> @Kit.Image.Picture(f, width: 100)</li>
  }
</ol>

View Configuration

This is how this view would be configured for this sample.

Content/Item ContentType: Persons
Content/Item Data:
1. Douglas (ID: 5338)

⬇️ Result | Source ➡️

Inspect the fields of an Item

✅ Biography: <img class="wysiwyg-right wysiwyg-50" src="/Portals/tutorial-razor/adam/Tutorial-Razor/Tm5yNs0hAEyc6HIID4k12g/Biography/douglas_adams_portrait.jpg" data-cmsid="file:douglas_adams_portrait.jpg">Douglas Noël Adams (11 March 1952 – 11 May 2001) was an English author, <a title="Humorist" href="https://en.wikipedia.org/wiki/Humorist" target="_blank" rel="noopener">humorist</a>, and screenwriter, best known for <a title="The Hitchhiker's Guide to the Galaxy" href="https://en.wikipedia.org/wiki/The_Hitchhiker%27s_Guide_to_the_Galaxy" target="_blank" rel="noopener">The Hitchhiker's Guide to the Galaxy</a>. Originally a 1978 <a title="The Hitchhiker's Guide to the Galaxy (radio series)" href="https://en.wikipedia.org/wiki/The_Hitchhiker%27s_Guide_to_the_Galaxy_(radio_series)" target="_blank" rel="noopener">BBC radio comedy</a>, The Hitchhiker's Guide to the Galaxy developed into a "trilogy" of five books that sold more than 15 million copies in his lifetime.
✅ Mugshot: file:212
✅ IsAlive: False
✅ LastName: Adams
✅ Birthday: 3/11/1952 12:00:00 AM
✅ Awards: System.Collections.Generic.List`1[ToSic.Sxc.Data.ITypedItem]
🔲 Haters: System.Collections.Generic.List`1[ToSic.Sxc.Data.ITypedItem]
✅ FavoriteNumber: 41.99
✅ FirstName: Douglas
🔲 Sex:

Let's do some manual inspection

✅ "FirstName" exits?
🔲 "FirstName" is empty?
✅ "FirstName" is not empty?
🔲 "hello" exits?
✅ "hello" is empty?
🔲 "hello" is not empty?

@inherits Custom.Hybrid.RazorTyped

@functions {
  // quick helper to make the output nicer
  string Boolmoji(bool value) { return value ? "✅" : "🔲"; }
}

<h4>Inspect the fields of an Item</h4>
<ol>
  @foreach (var key in MyItem.Keys()) {
    <li>
      @Boolmoji(MyItem.IsNotEmpty(key))
      @key:
      @MyItem.Get(key)
    </li>
  }
</ol>

<h4>Let's do some manual inspection</h4>
<ol>
  <li>@Boolmoji(MyItem.ContainsKey("FirstName")) "FirstName" exits?</li>
  <li>@Boolmoji(MyItem.IsEmpty("FirstName")) "FirstName" is empty?</li>
  <li>@Boolmoji(MyItem.IsNotEmpty("FirstName")) "FirstName" is not empty?</li>
  <li>@Boolmoji(MyItem.ContainsKey("hello")) "hello" exits?</li>
  <li>@Boolmoji(MyItem.IsEmpty("hello")) "hello" is empty?</li>
  <li>@Boolmoji(MyItem.IsNotEmpty("hello")) "hello" is not empty?</li>
</ol>

View Configuration

This is how this view would be configured for this sample.

Content/Item ContentType: Persons
Content/Item Data:
1. Douglas (ID: 5338)

In some scenarios you need may expect that data isn't there. In that case, you can create fake items to use in your razor.

⬇️ Result | Source ➡️

Inspect the fields of an Item

✅ FirstName: John
✅ LastName: Doe

@inherits Custom.Hybrid.RazorTyped

@{
  // Create a mock item, to be used if nothing else is found
  var mockPerson = AsItem(new {
    FirstName = "John",
    LastName = "Doe"
  }, mock: true); // mock: true is required to be sure you wanted this

  // Let's pretend the query may have a stream or may not
  var stream = MyData.GetStream("Guys", emptyIfNotFound: true);

  // Get the item, or the mock if nothing is found
  var guy = AsItem(stream) ?? mockPerson;
}
<h4>Inspect the fields of an Item</h4>
<ol>
  @foreach (var key in guy.Keys()) {
    <li>
      @(guy.IsNotEmpty(key) ? "✅" : "🔲")
      @key:
      @guy.Get(key)
    </li>
  }
</ol>

Work with List of Items - `MyItems`

Every view/template receives prepared data, either entered by the user on this page, or provided through a query. It can contain many items - so to get the list, use MyItems

⬇️ Result | Source ➡️

Loop persons which were added to this view

Douglas Adams
Terry Pratchett
Neil Gaiman

@inherits Custom.Hybrid.RazorTyped

<h4>Loop persons which were added to this view</h4>
<ul>
  @foreach (var person in MyItems) {
    <li>
      @person.Picture("Mugshot", settings: "Square", width: 50, imgClass: "rounded-circle")
      @person.String("FirstName") @person.String("LastName")
    </li>
  }
</ul>

View Configuration

This is how this view would be configured for this sample.

Content/Item ContentType: Persons
Content/Item IsList: True
Content/Item Data:
1. Douglas (ID: 5338)
2. Terry (ID: 5339)
3. Neil (ID: 5340)

⬇️ Result | Source ➡️

Content number 1
FYI: Heading none

We are one!

Content two

FYI: Heading h5

Two be or !2B

Content three 🌟

FYI: Heading h6

Three's the charm

@inherits Custom.Hybrid.RazorTyped

<ul>
  @foreach (var item in MyItems) {
    var pres = item.Presentation;
    
    var hType = pres.String("HeadingType");
    var title = item.Title + (pres.Bool("Highlight") ? " 🌟" : "");
    <li>
      @* Create a heading tag the size specified in Presentation *@
      @if (pres.IsNotEmpty("HeadingType")) {
        @Kit.HtmlTags.Custom(hType).Wrap(title)
      } else {
        @title
      }
      <br>
      <em>FYI: Heading @(pres.IsEmpty("HeadingType") ? "none" : pres.String("HeadingType"))</em>
      <div style='color: @pres.Attribute("Color")'>
        @item.Html("Contents")
      </div>
    </li>
  }
</ul>

View Configuration

This is how this view would be configured for this sample.

Content/Item ContentType: QuickRefContent
Content/Item IsList: True
Content/Item Data:
1. Content number 1 (ID: 5861) - Presentation: green (ID: 5857)
2. Content two (ID: 5862) - Presentation: red (ID: 5864)
3. Content three (ID: 5866) - Presentation: cyan (ID: 5865)

⬇️ Result | Source ➡️

Check out this list

Content number 1
Content two
Content three

@inherits Custom.Hybrid.RazorTyped

<h3>@MyHeader.Title</h3>
<ul>
  @foreach (var item in MyItems) {
    <li>
      @item.Title
    </li>
  }
</ul>

View Configuration

This is how this view would be configured for this sample.

Content/Item ContentType: QuickRefContent
Content/Item IsList: True
Content/Item Data:
1. Content number 1 (ID: 5861)
2. Content two (ID: 5862)
3. Content three (ID: 5866)
Header Type: QuickRefContentHeader
Header Item: Check out this list (ID: 5860)

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

⬇️ Result | Source ➡️

Douglas Adams (awards: Hugo Award,Inkpot Award)
Terry Pratchett
Neil Gaiman

@inherits Custom.Hybrid.RazorTyped

<ul>
  @foreach (var person in MyItems) {
    <li>
      @person.Picture("Mugshot", settings: "Square", width: 50, imgClass: "rounded-circle")
      @person.String("FirstName") @person.String("LastName")
      @if (person.Children("Awards").Any()) {
        // we just want the award names
        // to understand this, look at the LINQ tutorial
        var awardNames = person.Children("Awards").Select(a => a.String("Name"));
        <span>
          (awards: @string.Join(",", awardNames))
        </span>
      }
    </li>
  }
</ul>

View Configuration

This is how this view would be configured for this sample.

Content/Item ContentType: Persons
Content/Item IsList: True
Content/Item Data:
1. Douglas (ID: 5338)
2. Terry (ID: 5339)
3. Neil (ID: 5340)

Working with Entity (Item) Values

#2 Working with Block Contents

The <img> Tag and Different Image Formats

Content Items / Entities

Requirements

Resources

Working with Block Contents

Show Entity Values from the current Data

Simple Intro-Sample Showing Some Values

⬇️ Result | Source ➡️

View Configuration

Work with Content Items - MyItem

MyItem - Get Properties using Get(), String(), Int(), etc. abc

⬇️ Result | Source ➡️

Douglas Adams on MyItem

View Configuration

Magic with Strings - incl. scrubHtml, Ellipsis(...) and Very-Rich-HTML

⬇️ Result | Source ➡️

Douglas Adams on MyItem

View Configuration

MyItem - Presentation to configure how it looks

⬇️ Result | Source ➡️

A Person on MyItem

View Configuration

MyItem - Get Children such as Awards of an Author

⬇️ Result | Source ➡️

Use .Child("Awards") to get one

Use .Children("Awards") to get all

View Configuration

MyItem - Create Pictures using .Picture(…) or .Url

⬇️ Result | Source ➡️

Douglas Adams, the current item (MyItem)

View Configuration

MyItem - Access Files using .File(…) or .Folder(…)

⬇️ Result | Source ➡️

Douglas Adams, the current item (MyItem)

View Configuration

Inspect an item for the fields it has and if they contain anything

⬇️ Result | Source ➡️

Inspect the fields of an Item

Let's do some manual inspection

View Configuration

Create a fake (mock) item as a fallback

⬇️ Result | Source ➡️

Inspect the fields of an Item

Work with List of Items - MyItems

Show a List of MyItems

⬇️ Result | Source ➡️

Loop persons which were added to this view

View Configuration

MyItems - Presentation on lists of items belonging to the current block

⬇️ Result | Source ➡️

Content two

Content three 🌟

View Configuration

MyHeader - for Titles and Intros on lists of items

⬇️ Result | Source ➡️

Check out this list

View Configuration

Show sub-items of current items

⬇️ Result | Source ➡️

View Configuration

Work with Content Items - `MyItem`

Douglas Adams on `MyItem`

Douglas Adams on `MyItem`

A Person on `MyItem`

Use `.Child("Awards")` to get one

Use `.Children("Awards")` to get all

Work with List of Items - `MyItems`