Asp.Net Core Razor View

If you're starting with ASP.NET Core MVC and want to implement a simple HTML page as a Razor view (.cshtml), this quick guide will walk you through the necessary steps.

The example HTML we want to transform into a Razor view looks like this:

<!DOCTYPE html>
<html>
    <head>
        <title>Asp.Net Core App</title>
        <meta charset="utf-8" />
    </head>
    <body>
        Welcome
    </body>
</html>

Step 1: Create a New ASP.NET Core MVC Project

If you don’t have an existing MVC project:

Open Visual Studio.
Click on Create a new project.
Select ASP.NET Core Web App (Model-View-Controller).
Name your project and click Create.

Step 2: Add or Update the Razor View (`.cshtml`)

Navigate to the Views folder. For the home page, typically use Views/Home/.

Create or open the existing Index.cshtml file and place your HTML inside it like so:

@{
    ViewData["Title"] = "Asp.Net Core App";
}

<!DOCTYPE html>
<html>
<head>
    <title>@ViewData["Title"]</title>
    <meta charset="utf-8" />
</head>
<body>
    Welcome
</body>
</html>

Note: Razor allows embedding C# code within your HTML via the @ symbol.

Step 3: Create or Verify the Controller

In the Controllers folder, create a controller named HomeController.cs if it does not exist:

using Microsoft.AspNetCore.Mvc;

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
}

The Index action will serve the Index.cshtml view.

Step 4: Run Your Application

Run the app using Visual Studio (press F5) or via command line with dotnet run.
Visit http://localhost:<port>/ or http://localhost:<port>/Home/Index in your browser.
You should see your HTML page rendered!

Tips

In typical ASP.NET Core MVC projects, the <html>, <head>, and <body> tags are often placed inside a layout file (_Layout.cshtml) to avoid repetition.
For simple or learning scenarios, having the entire HTML inside a single Razor view is fine.
You can explore layouts and partial views as you get comfortable with MVC.

1. How to Implement a Simple HTML Page in an ASP.NET Core MVC Razor View

Table of contents

Step 1: Create a New ASP.NET Core MVC Project

Step 2: Add or Update the Razor View (`.cshtml`)

Step 3: Create or Verify the Controller

Step 4: Run Your Application

Tips

Subscribe to my newsletter

Md Asif Alam

Md Asif Alam

1. How to Implement a Simple HTML Page in an ASP.NET Core MVC Razor View

Table of contents

Step 1: Create a New ASP.NET Core MVC Project

Step 2: Add or Update the Razor View (.cshtml)

Step 3: Create or Verify the Controller

Step 4: Run Your Application

Tips

Subscribe to my newsletter

Md Asif Alam

Md Asif Alam

Step 2: Add or Update the Razor View (`.cshtml`)