Understanding Razor View, Razor Layout, Razor View Imports, and Razor Pages in ASP.NET Core

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.