Creating and Using Views in ASP.NET Core MVC

In the previous article, we discussed how to create controllers. In this article, we focus on creating and using views to further enhance our ASP.NET Core application.

What Is a View?

In ASP.NET Core MVC, a view is the component responsible for rendering the user interface. Views are typically HTML pages that can generate dynamic content using C# code. Our goal is to pass data from controllers to views so users can see dynamically generated content.

Views in ASP.NET Core are written using the Razor syntax—a templating engine designed for building dynamic web pages.

Creating a View

First, let’s create a view. Suppose we already have a simple HomeController. Within it, we’ll define an action method named Index.

Step 1: Create the Index Action Method

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

In this Index method, calling View() instructs ASP.NET Core to render the Index view.

Step 2: Create the View File

Under the project’s Views directory, create a subdirectory named Home (matching the controller name). Then, inside the Home folder, create a file named Index.cshtml—this is our view file.

@{
    ViewData["Title"] = "Home Page";
}

<h1>Welcome to the Home Page</h1>
<p>This is my first ASP.NET Core MVC application.</p>

This view uses Razor syntax: we set a page title and display some static text.

Using the View

When you run the application and navigate to /Home/Index, ASP.NET Core invokes the Index method of HomeController and renders the Index.cshtml view.

Passing Data to the View

In most real-world scenarios, we need to pass data to the view. This can be achieved using ViewData or ViewBag.

Using ViewData

Add data in the controller:

public IActionResult Index()
{
    ViewData["Message"] = "Welcome to my website!";
    return View();
}

Then consume it in Index.cshtml:

<p>@ViewData["Message"]</p>

Using ViewBag

ViewBag provides a dynamic alternative to ViewData for passing data:

public IActionResult Index()
{
    ViewBag.Message = "This message was passed via ViewBag!";
    return View();
}

Access it in the view:

<p>@ViewBag.Message</p>

Using Models

While ViewData and ViewBag work well for simple cases, the recommended approach is to use strongly-typed models. A model is a class containing the data you intend to display in the view.

Creating a Model

Let’s define a simple Product model:

public class Product
{
    public string Name { get; set; }
    public decimal Price { get; set; }
}

Then use it in HomeController:

public IActionResult Index()
{
    var product = new Product { Name = "Laptop", Price = 9.99M };
    return View(product);
}

Updating the View

Next, update Index.cshtml to declare and use the model. At the top of the file, add:

@model Product

Now reference model properties directly:

<h1>Product Name: @Model.Name</h1>
<p>Product Price: @Model.Price</p>

Summary

In this article, we learned how to create and use views in ASP.NET Core MVC. We saw how controllers return views and explored three primary mechanisms for passing data: ViewData, ViewBag, and strongly-typed models. With these fundamentals, you can build richer, more maintainable view logic and user interfaces.

In the next article, we’ll delve into data passing and model binding—key techniques for enhancing your application’s functionality. We hope this article helps you better understand how to create and use views in ASP.NET Core MVC.