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.
Content
dynamic
@Content.FirstName
Showing values from Data (aka. Entities) is very easy. Normally they are accessed through Item (new Razor) or DynamicEntity (older Razor) objects.
@inherits Custom.Hybrid.RazorTyped @Kit.Image.Img(Content.Field("Mugshot"), settings: "Square", width: 100, imgClass: "rounded-circle") <ul> <li>Name: @Content.String("FirstName") @Content.String("LastName")</li> <li>Birthday: @Content.DateTime("Birthday").ToString("d")</li> <li>Award: @Content.Child("Awards").String("Name")</li> </ul>
This is how this view would be configured for this sample.
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.
Awards
PersonAwards
Name
@Content.Awards.Name
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.
Id, Guid and Title are built-in properties
Use Get(…) if you don't care about the var type...
Get(…)
... or Get<T>(…) which will try to treat as the expected type.
Get<T>(…)
Use typed methods such as .String(…) if you care about the variable type.
.String(…)
Use fallback: … to handle empty values or conversion problems.
fallback: …
Use .Attribute(…) to safely encode properties. Mouse over this to see the effect.
.Attribute(…)
@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<T>(…)</code> which will try to treat as the expected type.</p> <ol> <li>Birthday Get<string> @(MyItem.Get<string>("Birthday"))</li> <li>Birthday Get<DateTime> @(MyItem.Get<DateTime>("Birthday"))</li> <li>Birthday Get<bool> @(MyItem.Get<bool>("Birthday"))</li> <li>Birthday Get<int> @(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>
Every thing is an Entity. Here some basic examples how to show values like Name, Birthday etc. of such an Entity.
Show content which was entered for this module
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…
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>
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.
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>
Child items such as Awards are accessed using Child("Awards"). There are many ways to work with them.
Child("Awards")
.Child("Awards")
Use ContainsKey(…), IsEmpty(…), IsNotEmpty(…)
.Children("Awards")
@inherits Custom.Hybrid.RazorTyped </hide-silent> <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>
Properties can contain urls such as /abc.jpg or file references like file:72.
/abc.jpg
file:72
Use .Url(…) to resolve file references such as file:72
.Url(…)
@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>
Every file-field is actually a folder...
...which could hold many files. If you want to show them, you need Kit.Image...
Kit.Image...
@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>
@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>
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.
@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>
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
@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>
We are one!
Two be or !2B
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>
@inherits Custom.Hybrid.RazorTyped <h3>@MyHeader.Title</h3> <ul> @foreach (var item in MyItems) { <li> @item.Title </li> } </ul>
This example builds on the last one, and additionally shows awards these authors have won, which is on the Awards property.
@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>