Razor

Tips for creating Open Content Razor Templates

Open Content Razor Templates

The advantage of using Razor templates is that you can create any logic as you are using C# you want and use pretty much any data available in Open Content or DNN.

Razor reference

📘

Intellisens in Visual Studio (Code)

Add this include at the top of you Razor tempalte for Intellisense support:
@inherits Satrabel.OpenContent.Components.OpenContentWebPage
This is also included in the RazorStarter Template

Example template ( the RazorStarter Template)

template.json

@inherits Satrabel.OpenContent.Components.OpenContentWebPage
<div class="row">
    @foreach(var col in Model.Columns)
  	{
  <div class="col-md-@(12 / Model.Settings.Columns) col-sm-@(24 / Model.Settings.Columns)">
        <div class="thumbnail">
            @if (!string.IsNullOrEmpty(col.Image))
          	{          
            <img src="@col.Image" alt="@col.Title}}">
            }
          	@if (col.Caption)
          	{
            <div class="caption">
                @if (!string.IsNullOrEmpty(col.Title))
              	{
                <h3>@col.Title</h3>
                }
                @col.Description            
            </div>
          	}
        </div>
    </div>
  	}
</div>

Reserved Keywords

Sometimes there's an attribute in your Model that has the name of a reserved keyword in C#.
An example of this would be an enum from the schema of Open Content.
Use @keyword to prevent C# errors in that case.

C#

@foreach (var role in Model.Schema.properties.Roles.@enum){
     <span class="roles">@role</span>
}

Other Uses of Razor

With the right includes a Razor template can also render data from outside Open Content.
And you can use the DNN Razor helpers (@Dnn.) as they are included by default.
Or you can also use the DNN API directly to combine Open Content data with DNN data.

More info on DNN Razor

template.cshtml

@using System
@inherits Satrabel.OpenContent.Components.OpenContentWebPage

<h1>@Dnn.Portal.PortalName</h1>
<p>@Dnn.Portal.Description</p>
  
<h2>@Dnn.Tab.TabName</h2>
<h3>@Dnn.Tab.Title</h3>
<p>@Dnn.Tab.Description</p>

Loading Scripts and Stylesheets

You can load extra JS and CSS dependencies by injecting the following code at the top of the razor file.

template.cshtml

@using System
@inherits Satrabel.OpenContent.Components.OpenContentWebPage

@{
    RegisterScript("js/my-script.js");
    RegisterStyleSheet("css/my-stylsheet.css");
}

etc..

Print the Razor Model

You can print the Razor module by inserting the following code in your template.

Open Content Model

@ObjectInfo.Print(Model)

DNN Model

@ObjectInfo.Print(Dnn)