ASP.NET Views

Last updated: October 26, 2023

Views in ASP.NET are responsible for presenting data to the user. They are typically HTML files that can include server-side code to dynamically generate content. This separation of concerns between data logic (in controllers) and presentation (in views) is a core principle of the Model-View-Controller (MVC) pattern.

What are Views?

A view is essentially a template that defines the structure and layout of the user interface. It receives data from the controller and renders it into a format that the browser can understand, usually HTML. Views can contain:

Static HTML content.
Server-side code (like C# or Razor syntax) to process data and logic.
References to JavaScript and CSS for interactivity and styling.

Razor Syntax

Razor is the view engine commonly used with ASP.NET MVC and Razor Pages. It allows you to embed server-side code within HTML using a concise syntax. Key elements of Razor include:

@ symbol to denote code blocks or variables.
@{ ... } for multi-line code statements.
@variableName to display the value of a variable.
@if(...) { ... } for conditional rendering.
@foreach(...) { ... } for iterating over collections.

Example Razor View (`Index.cshtml`)


@model YourApplication.Models.Product

@{
    ViewBag.Title = "Product Details";
}

<h2>@Model.Name</h2>

<div class="product-info">
    <p><strong>Description:</strong> @Model.Description</p>
    <p><strong>Price:</strong> @Model.Price.ToString("C")</p>

    @if (Model.InStock)
    {
        <p class="in-stock">Available</p>
    }
    else
    {
        <p class="out-of-stock">Currently unavailable</p>
    }
</div>

<a href="@Url.Action("List", "Products")">Back to Product List</a>

View Folders and Naming Conventions

ASP.NET MVC follows a convention for organizing views. Typically, views are stored in folders named after their corresponding controller, located within the Views directory at the root of your project. For example, a controller named ProductsController would have its views in the Views/Products folder.

The name of the view file usually corresponds to the action method in the controller that renders it. For instance, an action method named Index() in ProductsController would typically look for a view named Index.cshtml in the Views/Products folder.

Layouts and Partials

To avoid repeating common UI elements like headers, footers, and navigation across multiple views, ASP.NET provides concepts of:

Layouts: Master pages that define the overall structure of your application. Views can "render body" content within a layout.
Partials: Reusable view components that can be rendered within other views or layouts.

These help in maintaining a consistent look and feel and promoting code reuse.

Using Layouts

In your _ViewStart.cshtml file, you can specify which layout to use for your views:


@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

The _Layout.cshtml file typically contains the common HTML structure, including:


<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title - My App</title>
    <link rel="stylesheet" href="~/Content/site.css" />
</head>
<body>
    <header>
        <!-- Navigation, Logo etc. -->
    </header>
    <div class="container">
        @RenderBody() <!-- Content from individual views is rendered here -->
    </div>
    <footer>
        <!-- Footer content -->
    </footer>
</body>
</html>

Using Partials

You can render a partial view within another view using the @Html.Partial() helper method:


@* In your main view *@
<div class="sidebar">
    @Html.Partial("_SidebarMenu")
</div>

The _SidebarMenu.cshtml would contain the HTML for the sidebar.

View Models

While views can directly consume models, it's often best practice to use View Models. A view model is a class that is tailored specifically for a particular view, containing only the data that the view needs. This promotes:

Decoupling of the view from the domain model.
Improved performance by sending only necessary data.
Simpler view logic.