# Orchardcore Razor > Skill for building Razor views in Orchard Core themes and modules. Covers tag helpers, shape rendering, resource management, IOrchardHelper extensions, layout patterns, and _ViewImports.cshtml setup. - Skill: `majiayu000/orchardcore-razor` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds add majiayu000/orchardcore-razor` - Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/orchardcore-razor/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - License: Apache-2.0 - Author: majiayu000 (https://skillmd.com/u/majiayu000) - Updated: 2026-09-09 - Page: https://skillmd.com/skills/majiayu000/orchardcore-razor --- # Orchard Core Razor Views - Prompt Templates ## _ViewImports.cshtml Setup Every Orchard Core theme or module should include a `_ViewImports.cshtml` file at the root of its `Views` folder. ### Minimum Required Directives ```cshtml @inherits OrchardCore.DisplayManagement.Razor.RazorPage @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers @addTagHelper *, OrchardCore.DisplayManagement @addTagHelper *, OrchardCore.ResourceManagement @addTagHelper *, OrchardCore.Menu @addTagHelper *, OrchardCore.Contents @addTagHelper *, OrchardCore.Media @using OrchardCore.DisplayManagement @using OrchardCore.DisplayManagement.Shapes @using OrchardCore.ContentManagement @using Microsoft.AspNetCore.Html ``` ### Guidelines - `@inherits OrchardCore.DisplayManagement.Razor.RazorPage` gives access to `IOrchardHelper` via `Orchard` and shape display helpers. - Add only the `@addTagHelper` lines for assemblies your theme or module actually uses. - `@using OrchardCore.DisplayManagement.Razor` is not needed when `@inherits` already references that namespace. - For themes, add `@using OrchardCore` to access general extension methods. ## _ViewStart.cshtml Conventions ```cshtml @{ Layout = "Layout"; } ``` - Place `_ViewStart.cshtml` in the `Views` folder to set the default layout. - `"Layout"` references the shape named `Layout` which resolves to `Layout.cshtml`. - Modules typically do not set a layout in `_ViewStart.cshtml` because their views render inside the theme's layout automatically. - Override per-view by setting `Layout = null;` for partial or layoutless pages. ## Layout Rendering Patterns A theme's `Layout.cshtml` renders zones that contain shapes placed by modules and the admin UI. ### Minimal Layout Template ```cshtml @{ var body = await RenderBodyAsync(); } @RenderTitleSegments(Site.SiteName) @body ``` ### Guidelines - Always call `await RenderBodyAsync()` **before** rendering any zone that wraps it, so the body content registers its resources first. - Use `@RenderTitleSegments(Site.SiteName)` to render page title segments separated by the site name. - Render resource tags in the correct location: `Meta`, `HeadLink`, `HeadScript`, `StyleSheet` in ``, and `FooterScript` before ``. ## Shape Tag Helpers Shapes are the fundamental rendering unit in Orchard Core. Use tag helpers to display and compose shapes. ### Display a Shape ```cshtml ``` ### Display a Shape with Properties ```cshtml ``` - Prefix shape properties with `prop-` to pass data into the shape template. ### Display a Dynamic Shape Object When you have a shape object (e.g., from a zone or shape table), render it with `display`: ```cshtml @await DisplayAsync(Model) @await DisplayAsync(Model.Content) ``` ### Named Shapes with Cache ```cshtml ``` ## Zone Tag Helper Zones are named buckets in the layout that collect shapes for rendering. ### Render a Zone ```cshtml ``` ### Render a Zone with Wrapper Content ```cshtml
@RenderBody()
``` ### Conditional Zone Rendering Check if a zone has content before rendering its wrapper: ```cshtml @if (Model.{{ZoneName}} != null) { } ``` Common zone names: `Header`, `Navigation`, `Content`, `Sidebar`, `Footer`, `AfterContent`, `BeforeContent`. ## Resource Tag Helpers ### Register a Stylesheet ```cshtml ``` ### Register a Stylesheet with a CDN Fallback ```cshtml ``` ### Register a Script at the Foot of the Page ```cshtml ``` ### Register a Script at the Head ```cshtml ``` ### Register an Inline Script ```cshtml ``` ### Script Dependencies ```cshtml ``` ### Render All Registered Resources Place these in the layout to output all resources registered by shapes and modules: ```cshtml ``` ### Resource Positions | Position | Description | |----------|-------------| | `Head` | Rendered in `` via `` | | `Foot` | Rendered before `` via `` | ## Media Tag Helper ### Render an Image from the Media Library ```cshtml ``` ### Resize an Image ```cshtml ``` ### Resize with Width and Height ```cshtml ``` ### Resize Modes ```cshtml ``` | Mode | Description | |------|-------------| | `Pad` | Resize and pad to fit the target dimensions | | `BoxPad` | Pad the image to fit within the bounding box | | `Crop` | Resize and crop to fill the target dimensions | | `Min` | Resize to the minimum of the target dimensions | | `Max` | Resize to the maximum of the target dimensions | | `Stretch` | Stretch the image to fill the target dimensions | ## Content Tag Helpers ### Render a Content Item ```cshtml ``` ### Render a Content Item by Content Item ID ```cshtml ``` ### Common Display Types | Display Type | Description | |--------------|-------------| | `Detail` | Full detail view | | `Summary` | Abbreviated summary view | | `SummaryAdmin` | Admin-specific summary | ## Menu Tag Helper ### Render a Named Menu ```cshtml ``` - The `alias` attribute specifies the alias of the menu content item. - The menu renders using the menu shape templates, which can be overridden in your theme. ## Caching Tag Helper ### Cache a Section of Markup ```cshtml

This content is cached for 10 minutes.

 ``` ### Cache with a Vary-By Key ```cshtml @await DisplayAsync(Model.Content) ``` ### Cache Attributes | Attribute | Description | |-----------|-------------| | `expires-after` | `TimeSpan` after which the cache entry expires | | `expires-on` | Absolute `DateTimeOffset` for expiration | | `expires-sliding` | Sliding `TimeSpan` expiration window | | `vary-by` | Key to vary the cached output (e.g., per path or query) | | `vary-by-user` | When `true`, caches separately per authenticated user | ## Date-Time and Time-Zone Tag Helpers ### Render a UTC Date in the Site's Time Zone ```cshtml ``` ### Render a Date with a Custom Format ```cshtml ``` ### Render the Current Time Zone Name ```cshtml ``` ## IOrchardHelper Extensions Access `IOrchardHelper` via the `Orchard` property in Razor views that inherit from `OrchardCore.DisplayManagement.Razor.RazorPage`. ### Get a Content Item by ID ```cshtml @{ var item = await Orchard.GetContentItemByIdAsync("{{contentItemId}}"); } ``` ### Get a Content Item by Version ID ```cshtml @{ var item = await Orchard.GetContentItemByVersionIdAsync("{{contentItemVersionId}}"); } ``` ### Query Content Items ```cshtml @{ var items = await Orchard.QueryContentItemsAsync(query => query.Where(index => index.ContentType == "BlogPost" && index.Published)); } ``` ### Get Content Items by Content Type ```cshtml @{ var items = await Orchard.GetRecentContentItemsByContentTypeAsync("BlogPost", 10); } ``` ### Get a Content Item by Alias ```cshtml @{ var item = await Orchard.GetContentItemByHandleAsync("alias:{{alias}}"); } ``` ### Get Site Settings Value ```cshtml @{ var siteName = Orchard.ConsoleLog(Site.SiteName); } ``` Access global site settings via `Site`: ```cshtml

@Site.SiteName

@Site.BaseUrl

``` ### Liquid-to-HTML Rendering ```cshtml @{ var html = await Orchard.LiquidToHtmlAsync("{{ 'now' | date: '%B %d, %Y' }}"); } ``` ### Content Item Display ```cshtml @{ var shape = await Orchard.DisplayContentItemAsync(contentItem, "Summary"); } @await DisplayAsync(shape) ``` ## Defining a Resource Manifest Register stylesheets and scripts so they can be referenced by name in Razor views. ### Resource Manifest Class ```csharp public sealed class ResourceManifest : IResourceManifestProvider { public void BuildManifests(IResourceManifestBuilder builder) { var manifest = builder.Add(); manifest.DefineStyle("{{ThemeStyleName}}") .SetUrl("~/{{ModuleOrThemeId}}/css/site.min.css", "~/{{ModuleOrThemeId}}/css/site.css"); manifest.DefineScript("{{ThemeScriptName}}") .SetUrl("~/{{ModuleOrThemeId}}/js/site.min.js", "~/{{ModuleOrThemeId}}/js/site.js") .SetPosition("Foot"); } } ``` ### Guidelines - The first `SetUrl` parameter is the minified version; the second is the debug version. - Use `SetPosition("Foot")` for scripts that should render before ``. - Use `SetDependencies("jQuery")` to declare script dependencies. - Register the manifest class in `Startup.cs`: ```csharp public sealed class Startup : StartupBase { public override void ConfigureServices(IServiceCollection services) { services.AddResourceManifest(); } } ``` ## Recipe Step for Themes ### Set the Active Theme via Recipe ```json { "steps": [ { "name": "Themes", "Site": "{{ThemeId}}", "Admin": "TheAdmin" } ] } ```