---
agentTools:
  projectIndex: https://opencontent.readme.io/v3.5/llms.txt
---

# Razor

Tips for creating Open Content Razor Templates

[block:api-header]
{
  "title": "Open Content Razor Templates"
}
[/block]

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](https://haacked.com/archive/2011/01/06/razor-syntax-quick-reference.aspx/)

[block:callout]
{
  "type": "info",
  "title": "Intellisens in Visual Studio (Code)",
  "body": "Add this include at the top of you Razor tempalte for Intellisense support:\n@inherits Satrabel.OpenContent.Components.OpenContentWebPage\nThis is also included in the RazorStarter Template"
}
[/block]

Example template ( the RazorStarter Template)

[block:code]
{
  "codes": [
    {
      "code": "@inherits Satrabel.OpenContent.Components.OpenContentWebPage\n<div class=\"row\">\n    @foreach(var col in Model.Columns)\n  \t{\n  <div class=\"col-md-@(12 / Model.Settings.Columns) col-sm-@(24 / Model.Settings.Columns)\">\n        <div class=\"thumbnail\">\n            @if (!string.IsNullOrEmpty(col.Image))\n          \t{          \n            <img src=\"@col.Image\" alt=\"@col.Title}}\">\n            }\n          \t@if (col.Caption)\n          \t{\n            <div class=\"caption\">\n                @if (!string.IsNullOrEmpty(col.Title))\n              \t{\n                <h3>@col.Title</h3>\n                }\n                @col.Description            \n            </div>\n          \t}\n        </div>\n    </div>\n  \t}\n</div>",
      "language": "json",
      "name": "template.json"
    }
  ]
}
[/block]

[block:api-header]
{
  "title": "Other Uses of Razor"
}
[/block]

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](https://www.dnnsoftware.com/community-blog/cid/136303/razor-tips-and-tricks-4-ndash-extending-the-helpers)

[block:code]
{
  "codes": [
    {
      "code": "@using System\n@inherits Satrabel.OpenContent.Components.OpenContentWebPage\n\n<h1>@Dnn.Portal.PortalName</h1>\n<p>@Dnn.Portal.Description</p>\n  \n<h2>@Dnn.Tab.TabName</h2>\n<h3>@Dnn.Tab.Title</h3>\n<p>@Dnn.Tab.Description</p>",
      "language": "csharp",
      "name": "template.cshtml"
    }
  ]
}
[/block]

[block:api-header]
{
  "title": "Loading Scripts and Stylesheets"
}
[/block]

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

[block:code]
{
  "codes": [
    {
      "code": "@using System\n@inherits Satrabel.OpenContent.Components.OpenContentWebPage\n\n@{\n    RegisterScript(\"js/my-script.js\");\n    RegisterStyleSheet(\"css/my-stylsheet.css\");\n}\n\netc..",
      "language": "csharp",
      "name": "template.cshtml"
    }
  ]
}
[/block]

[block:api-header]
{
  "title": "Print the Razor Model"
}
[/block]

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

[block:code]
{
  "codes": [
    {
      "code": "@ObjectInfo.Print(Model)  ",
      "language": "csharp",
      "name": "Open Content Model"
    },
    {
      "code": "@ObjectInfo.Print(Dnn)",
      "language": "csharp",
      "name": "DNN Model"
    }
  ]
}
[/block]