ASP.NET Core MVC Views - MSDN Tutorials

Understanding Views in ASP.NET Core MVC

Views are the core component of the User Interface (UI) in an ASP.NET Core MVC application. They are responsible for presenting data to the user and are typically implemented using Razor syntax, which allows you to embed C# code within HTML.

What are Razor Views?

Razor is a view engine that allows you to create dynamic web content by interleaving HTML markup with server-side C# code. Razor files have a .cshtml extension.

Example: A Simple Razor View

This view displays a greeting message and the current date.


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


    Welcome
    @ViewData["Message"]
    Current Server Time: @DateTime.Now.ToString()

Key Concepts in Razor Views

Razor Syntax: Use @ to embed C# code. @variable displays a variable, @{ ... } defines a code block.
Model Binding: Views can directly access strongly-typed data passed from the controller using the @model directive.
ViewBag and ViewData: Dynamic properties for passing data from the controller to the view without requiring a strongly-typed model. ViewBag is dynamic, while ViewData is a dictionary.
HTML Helpers: Pre-built methods that generate HTML markup, often including specific attributes or tag structures (e.g., @Html.TextBoxFor(...)).
Tag Helpers: Attribute-based helpers that allow you to write HTML using C# for server-side processing (e.g., <input asp-for="Name">).

ViewBag vs ViewData

Both ViewBag and ViewData allow you to pass data from the controller to the view. However, they have key differences:

ViewData: A dictionary that stores data as key-value pairs. Requires casting when retrieving values.
ViewBag: A dynamic object that allows you to add properties on the fly without explicit casting. Less performant and lacks compile-time checking.

Controller Snippet


public IActionResult Index()
{
    ViewData["Message"] = "Hello from ViewData!";
    ViewBag.Title = "Welcome!";
    return View();
}

View Snippet (.cshtml)


<h3>@ViewData["Message"]</h3>
<h4>@ViewBag.Title</h4>

Tag Helpers in Action

Tag helpers integrate with your HTML markup to create more readable and concise server-side code.

Razor Markup with Tag Helpers


@model MyWebApp.Models.UserViewModel

<form method="post">
    <div class="form-group">
        <label asp-for="Name"></label>
        <input asp-for="Name" class="form-control" />
        <span asp-validation-for="Name" class="text-danger"></span>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

The asp-for attribute automatically connects the HTML input element to the specified model property, handling names, IDs, and validation messages.

Layouts and Partial Views

To maintain consistency across your application, ASP.NET Core MVC supports layouts and partial views.

Layouts: Define a common structure for your views (e.g., headers, footers, navigation). Use the _Layout.cshtml file.
Partial Views: Reusable view components that can be rendered within other views, promoting modularity.

Rendering a Partial View

In your main view (e.g., Index.cshtml):


@await Html.PartialAsync("_MyPartialView")

Or using Tag Helpers:


<partial name="_MyPartialView" />

Best Practices

Prefer strongly-typed views with models for better maintainability and compile-time checks.
Use Tag Helpers over HTML Helpers where possible for cleaner markup.
Break down complex views into smaller, reusable partial views and view components.
Keep view logic minimal; complex operations should reside in controllers or services.

MSDN Tutorials

Related Topics

Advanced