Below is a complete, well-structured article covering Razor View, Razor Layout, Razor View Imports, and Razor Pages in ASP.NET Core — including definitions, purposes, step-by-step creation, and examples.
You can directly use this as a blog article.
ASP.NET Core provides a powerful UI rendering engine called Razor, which helps developers build clean, dynamic, and fast web applications using C# and HTML together. This article explains four important Razor concepts:
Razor View
Razor Layout
Razor View Imports
Razor Pages
Each concept is explained with purpose, usage, and practical examples.
1. Razor View
What Is a Razor View?
A Razor View is a .cshtml file that contains HTML markup mixed with C# code using Razor syntax (@).
It is used for rendering data to the browser.
Example Razor View syntax:
<h1>Hello @Model.Name</h1>
Purpose of Razor View
To build the user interface of an MVC application.
To bind data using a model sent from a controller.
To reduce the need for writing raw HTML and server-side code separately.
How to Create a Razor View in ASP.NET Core?
Step 1: Create MVC Controller
public class HomeController : Controller
{
public IActionResult Index()
{
ViewBag.Message = "Welcome to ASP.NET Core Razor View!";
return View();
}
}
Step 2: Create View File
Go to:
Views → Home → Index.cshtml
Index.cshtml Example
@{
ViewData["Title"] = "Home Page";
}
<h2>@ViewBag.Message</h2>
<p>This is a sample Razor View.</p>
2. Razor Layout
What Is a Layout in ASP.NET Core?
A Layout is a master template file that contains common design parts such as:
Header
Navigation menu
Footer
Common scripts & CSS
It behaves like a master page (in ASP.NET Web Forms).
Default layout file:
Views/Shared/_Layout.cshtml
Purpose of Razor Layout
Avoids repeating the same HTML code on every page.
Provides a consistent, uniform layout across the site.
Example: _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<title>@ViewData["Title"]</title>
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<a href="/">Home</a> |
<a href="/About">About</a>
</nav>
</header>
<main>
@RenderBody() <!-- Page content comes here -->
</main>
<footer>
<p>© 2025 MyApp</p>
</footer>
</body>
</html>
Using Layout in View
Inside Index.cshtml:
@{
Layout = "_Layout";
}
Now your page automatically fits into the layout.
3. Razor View Imports
What Is _ViewImports.cshtml?
_ViewImports.cshtml is used to import common namespaces, tag helpers, models, etc., for all views in a folder.
File location:
Views/_ViewImports.cshtml
Purpose of Razor View Imports
Avoid repeating @using statements in every view.
Register tag helpers globally.
Make models and attributes reusable across views.
Example: _ViewImports.cshtml
@using SampleMVCCoreProject.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Now all views inside the Views folder automatically access these namespaces and tag helpers.
4. Razor Pages in ASP.NET Core
What Are Razor Pages?
Razor Pages is a page-based framework in ASP.NET Core.
It is simpler than MVC and ideal for:
Forms
CRUD operations
Simple websites
Razor Pages use .cshtml files with a Page Model (.cshtml.cs).
Purpose of Razor Pages
Reduces complexity for small/medium applications.
Keeps UI and backend logic in one folder.
Cleaner structure compared to MVC.
How to Create Razor Pages in ASP.NET Core
Step 1: Enable Razor Pages in Program.cs
(If not already enabled)
builder.Services.AddRazorPages();
var app = builder.Build();
app.MapRazorPages();
app.Run();
Step 2: Create Razor Page
Right-click → Pages folder →
Add → Razor Page → choose “Razor Page with Model”.
This creates:
✔ Index.cshtml
✔ Index.cshtml.cs (Page Model)
Example: Index.cshtml
@page
@model IndexModel
<h2>Welcome Razor Pages</h2>
<p>Message: @Model.Message</p>
Example: Index.cshtml.cs
public class IndexModel : PageModel
{
public string Message { get; set; }
public void OnGet()
{
Message = "Hello from Razor Page Model!";
}
}
Difference Between MVC Razor View and Razor Page
| Feature | Razor View (MVC) | Razor Page |
|---|
| Structure | Controller + View | Page + PageModel |
| Flow | Controller → View | Direct page handler (OnGet, OnPost) |
| Best For | Large enterprise apps | Simple CRUD, forms |
| Folder | Views | Pages |
Conclusion
Razor technology in ASP.NET Core provides powerful UI building features.
Razor View helps create dynamic HTML pages with model-binding.
Layout provides a shared master page for uniform UI.
View Imports reduces repeated code and simplifies imports.
Razor Pages simplifies development for page-based applications.
Mastering these Razor components will make you more efficient in building professional ASP.NET Core applications.