← Back to Articles         
Razor View Engine in ASP.NET Core

Razor View Engine in ASP.NET Core

Published on 27 Sep 2026     5 min read ASP.NET Core MVC
MVC

The Razor View Engine converts an ASP.NET Core MVC Razor view (.cshtml) into HTML that a browser can display.

Razor allows us to combine:

  • HTML markup
  • C# code
  • Model data

It uses the @ symbol to switch from HTML to C#.

Simple example

Controller

public IActionResult Details()
{
    var product = new Product
    {
        Name = "Laptop",
        Price = 50000
    };

    return View(product);
}

Razor View – Details.cshtml

@model Product

<h2>@Model.Name</h2>
<p>Price: ₹@Model.Price</p>

@if (Model.Price > 40000)
{
    <p>This is a premium product.</p>
}

Generated HTML

<h2>Laptop</h2>
<p>Price: ₹50000</p>
<p>This is a premium product.</p>

How it works

#chatgpt-mermaid-_r_41j_{font-family:-apple-system-body,ui-sans-serif,-apple-system,system-ui,"Segoe UI",Helvetica,"Apple Color Emoji",Arial,sans-serif,"Segoe UI Emoji","Segoe UI Symbol";font-size:16px;fill:rgb(13, 13, 13);}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#chatgpt-mermaid-_r_41j_ .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#chatgpt-mermaid-_r_41j_ .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#chatgpt-mermaid-_r_41j_ .error-icon{fill:rgb(255, 255, 255);}#chatgpt-mermaid-_r_41j_ .error-text{fill:rgb(13, 13, 13);stroke:rgb(13, 13, 13);}#chatgpt-mermaid-_r_41j_ .edge-thickness-normal{stroke-width:1px;}#chatgpt-mermaid-_r_41j_ .edge-thickness-thick{stroke-width:3.5px;}#chatgpt-mermaid-_r_41j_ .edge-pattern-solid{stroke-dasharray:0;}#chatgpt-mermaid-_r_41j_ .edge-thickness-invisible{stroke-width:0;fill:none;}#chatgpt-mermaid-_r_41j_ .edge-pattern-dashed{stroke-dasharray:3;}#chatgpt-mermaid-_r_41j_ .edge-pattern-dotted{stroke-dasharray:2;}#chatgpt-mermaid-_r_41j_ .marker{fill:rgb(143, 143, 143);stroke:rgb(143, 143, 143);}#chatgpt-mermaid-_r_41j_ .marker.cross{stroke:rgb(143, 143, 143);}#chatgpt-mermaid-_r_41j_ svg{font-family:-apple-system-body,ui-sans-serif,-apple-system,system-ui,"Segoe UI",Helvetica,"Apple Color Emoji",Arial,sans-serif,"Segoe UI Emoji","Segoe UI Symbol";font-size:16px;}#chatgpt-mermaid-_r_41j_ p{margin:0;}#chatgpt-mermaid-_r_41j_ .label{font-family:-apple-system-body,ui-sans-serif,-apple-system,system-ui,"Segoe UI",Helvetica,"Apple Color Emoji",Arial,sans-serif,"Segoe UI Emoji","Segoe UI Symbol";color:rgb(13, 13, 13);}#chatgpt-mermaid-_r_41j_ .cluster-label text{fill:rgb(13, 13, 13);}#chatgpt-mermaid-_r_41j_ .cluster-label span{color:rgb(13, 13, 13);}#chatgpt-mermaid-_r_41j_ .cluster-label span p{background-color:transparent;}#chatgpt-mermaid-_r_41j_ .label text,#chatgpt-mermaid-_r_41j_ span{fill:rgb(13, 13, 13);color:rgb(13, 13, 13);}#chatgpt-mermaid-_r_41j_ .node rect,#chatgpt-mermaid-_r_41j_ .node circle,#chatgpt-mermaid-_r_41j_ .node ellipse,#chatgpt-mermaid-_r_41j_ .node polygon,#chatgpt-mermaid-_r_41j_ .node path{fill:rgb(222, 234, 251);stroke:rgb(83, 154, 248);stroke-width:1px;}#chatgpt-mermaid-_r_41j_ .rough-node .label text,#chatgpt-mermaid-_r_41j_ .node .label text,#chatgpt-mermaid-_r_41j_ .image-shape .label,#chatgpt-mermaid-_r_41j_ .icon-shape .label{text-anchor:middle;}#chatgpt-mermaid-_r_41j_ .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#chatgpt-mermaid-_r_41j_ .rough-node .label,#chatgpt-mermaid-_r_41j_ .node .label,#chatgpt-mermaid-_r_41j_ .image-shape .label,#chatgpt-mermaid-_r_41j_ .icon-shape .label{text-align:center;}#chatgpt-mermaid-_r_41j_ .node.clickable{cursor:pointer;}#chatgpt-mermaid-_r_41j_ .root .anchor path{fill:rgb(143, 143, 143)!important;stroke-width:0;stroke:rgb(143, 143, 143);}#chatgpt-mermaid-_r_41j_ .arrowheadPath{fill:rgb(143, 143, 143);}#chatgpt-mermaid-_r_41j_ .edgePath .path{stroke:rgb(143, 143, 143);stroke-width:1px;}#chatgpt-mermaid-_r_41j_ .flowchart-link{stroke:rgb(143, 143, 143);fill:none;}#chatgpt-mermaid-_r_41j_ .edgeLabel{background-color:rgb(252, 252, 252);text-align:center;}#chatgpt-mermaid-_r_41j_ .edgeLabel p{background-color:rgb(252, 252, 252);}#chatgpt-mermaid-_r_41j_ .edgeLabel rect{opacity:0.5;background-color:rgb(252, 252, 252);fill:rgb(252, 252, 252);}#chatgpt-mermaid-_r_41j_ .labelBkg{background-color:rgba(252, 252, 252, 0.5);}#chatgpt-mermaid-_r_41j_ .cluster rect{fill:rgb(255, 255, 255);stroke:rgba(0, 0, 0, 0.1);stroke-width:1px;}#chatgpt-mermaid-_r_41j_ .cluster text{fill:rgb(13, 13, 13);}#chatgpt-mermaid-_r_41j_ .cluster span{color:rgb(13, 13, 13);}#chatgpt-mermaid-_r_41j_ div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:-apple-system-body,ui-sans-serif,-apple-system,system-ui,"Segoe UI",Helvetica,"Apple Color Emoji",Arial,sans-serif,"Segoe UI Emoji","Segoe UI Symbol";font-size:12px;background:rgb(255, 255, 255);border:1px solid rgba(0, 0, 0, 0.1);border-radius:2px;pointer-events:none;z-index:100;}#chatgpt-mermaid-_r_41j_ .flowchartTitleText{text-anchor:middle;font-size:18px;fill:rgb(13, 13, 13);}#chatgpt-mermaid-_r_41j_ rect.text{fill:none;stroke-width:0;}#chatgpt-mermaid-_r_41j_ .icon-shape,#chatgpt-mermaid-_r_41j_ .image-shape{background-color:rgb(252, 252, 252);text-align:center;}#chatgpt-mermaid-_r_41j_ .icon-shape p,#chatgpt-mermaid-_r_41j_ .image-shape p{background-color:rgb(252, 252, 252);padding:2px;}#chatgpt-mermaid-_r_41j_ .icon-shape .label rect,#chatgpt-mermaid-_r_41j_ .image-shape .label rect{opacity:0.5;background-color:rgb(252, 252, 252);fill:rgb(252, 252, 252);}#chatgpt-mermaid-_r_41j_ .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#chatgpt-mermaid-_r_41j_ .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#chatgpt-mermaid-_r_41j_ .node .neo-node{stroke:rgb(83, 154, 248);}#chatgpt-mermaid-_r_41j_ [data-look="neo"].node rect,#chatgpt-mermaid-_r_41j_ [data-look="neo"].cluster rect,#chatgpt-mermaid-_r_41j_ [data-look="neo"].node polygon{stroke:url(#chatgpt-mermaid-_r_41j_-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#chatgpt-mermaid-_r_41j_ [data-look="neo"].swimlane.cluster rect{filter:none;}#chatgpt-mermaid-_r_41j_ [data-look="neo"].node path{stroke:url(#chatgpt-mermaid-_r_41j_-gradient);stroke-width:1px;}#chatgpt-mermaid-_r_41j_ [data-look="neo"].node .outer-path{filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#chatgpt-mermaid-_r_41j_ [data-look="neo"].node .neo-line path{stroke:rgb(83, 154, 248);filter:none;}#chatgpt-mermaid-_r_41j_ [data-look="neo"].node circle{stroke:url(#chatgpt-mermaid-_r_41j_-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#chatgpt-mermaid-_r_41j_ [data-look="neo"].node circle .state-start{fill:#000000;}#chatgpt-mermaid-_r_41j_ [data-look="neo"].icon-shape .icon{fill:url(#chatgpt-mermaid-_r_41j_-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#chatgpt-mermaid-_r_41j_ [data-look="neo"].icon-shape .icon-neo path{stroke:url(#chatgpt-mermaid-_r_41j_-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#chatgpt-mermaid-_r_41j_ .node text{font-size:14px;font-weight:600;letter-spacing:normal;fill:rgb(0, 79, 153);}#chatgpt-mermaid-_r_41j_ .edgeLabels text{font-size:13px;font-weight:600;letter-spacing:-0.08px;fill:rgb(0, 79, 153);}#chatgpt-mermaid-_r_41j_ .node tspan[font-weight="normal"],#chatgpt-mermaid-_r_41j_ .edgeLabels tspan[font-weight="normal"]{font-weight:600;}#chatgpt-mermaid-_r_41j_ .edgeLabel .label rect{opacity:1;rx:13px;ry:13px;fill:rgb(245, 250, 255);stroke:rgb(206, 219, 229);stroke-width:1px;}#chatgpt-mermaid-_r_41j_ .node rect,#chatgpt-mermaid-_r_41j_ .node circle,#chatgpt-mermaid-_r_41j_ .node ellipse,#chatgpt-mermaid-_r_41j_ .node polygon,#chatgpt-mermaid-_r_41j_ .node path{fill:rgb(229, 243, 255);stroke:rgba(0, 0, 0, 0.1);stroke-width:1px;}#chatgpt-mermaid-_r_41j_ .node rect{rx:16px;ry:16px;}#chatgpt-mermaid-_r_41j_ .node.mermaid-decision .label-container{fill:rgb(245, 250, 255);stroke:rgb(206, 219, 229);stroke-dasharray:2,2;}#chatgpt-mermaid-_r_41j_ .edgePaths .flowchart-link{stroke:rgb(143, 143, 143);stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;}#chatgpt-mermaid-_r_41j_ .marker{fill:rgb(143, 143, 143);stroke:rgb(143, 143, 143);}#chatgpt-mermaid-_r_41j_ :root{--mermaid-font-family:-apple-system-body,ui-sans-serif,-apple-system,system-ui,"Segoe UI",Helvetica,"Apple Color Emoji",Arial,sans-serif,"Segoe UI Emoji","Segoe UI Symbol";}ControllerModel dataRazor view (.cshtml)Razor View EngineHTML responseBrowser

Important Razor features

  • Strongly typed models using @model
  • C# expressions using Model.Name
  • Code blocks using @{ }
  • Conditions using @if
  • Loops using @foreach
  • Shared layouts using _Layout.cshtml
  • Reusable partial views
  • View Components
  • Tag Helpers such as asp-controller and asp-action
  • Automatic HTML encoding to reduce cross-site scripting risks

Is any library required?

No additional library is normally required. Razor support is included in ASP.NET Core MVC when using:

builder.Services.AddControllersWithViews();

and:

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

Key points

  • Razor is a server-side rendering technology.
  • Razor files normally use the .cshtml extension.
  • C# code executes on the server—not in the browser.
  • The browser receives only the generated HTML.
  • Razor syntax is clean because it does not usually require opening and closing server-side code tags.

_ViewImports.cshtml and _ViewStart.cshtml are special Razor files used to share common settings across multiple views.

_ViewImports.cshtml

It defines common Razor directives that should be available to views, avoiding repeated imports in every .cshtml file.

Example

@using MyApp
@using MyApp.Models
@using MyApp.ViewModels
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Purpose

  • Imports namespaces with @using
  • Enables Tag Helpers with @addTagHelper
  • Supports dependency injection using @inject
  • Can specify a common base class using @inherits

Because MVC Tag Helpers are added here, views can use:

<a asp-controller="Product"
   asp-action="Details"
   asp-route-id="10">
    View Product
</a>

Without the @addTagHelper directive, attributes such as asp-controller and asp-action will not work as Tag Helpers.

_ViewStart.cshtml

It contains Razor code that should execute before every full view is rendered.

It is most commonly used to assign the shared layout.

Example

@{
    Layout = "_Layout";
}

This means views automatically use:

Views/Shared/_Layout.cshtml

Therefore, we do not need to write the following inside every view:

@{
    Layout = "_Layout";
}

A specific view can override it:

@{
    Layout = "_AdminLayout";
}

Or disable the layout:

@{
    Layout = null;
}

Key differences

_ViewImports.cshtml _ViewStart.cshtml
Shares Razor directives and namespaces Executes common Razor code
Commonly configures @using and Tag Helpers Commonly assigns the layout
Settings apply while Razor views are compiled Runs before each full view is rendered
Can exist at multiple folder levels Can exist at multiple folder levels
Applies to views and partial views Normally doesn’t run for partial views

Folder hierarchy

Both files can exist at different folder levels. Razor applies the appropriate files based on the view’s folder hierarchy.

Views/
├── _ViewImports.cshtml
├── _ViewStart.cshtml
├── Shared/
│   └── _Layout.cshtml
├── Home/
│   └── Index.cshtml
└── Admin/
    ├── _ViewImports.cshtml
    ├── _ViewStart.cshtml
    └── Dashboard.cshtml

An Admin/_ViewStart.cshtml can assign an admin-specific layout:

@{
    Layout = "_AdminLayout";
}

Interview answer

_ViewImports.cshtml provides common Razor directives, namespaces and Tag Helper registrations, while _ViewStart.cshtml executes common code before full views—most commonly to set the shared layout.

 

 

Keep Learning - More From This Category

← Back to Articles