aspnet-mvc
  1. aspnet-mvc-layouts-and-view-models
PreviousNext

Layouts and View Models - (ASP.NET MVC Views)

ASP.NET MVC views provide powerful features for creating reusable layouts and view models that improve the maintainability of your application's user interface. In this tutorial, we'll discuss layouts and view models, their syntax, example usage, output, explanation, and important points when using them in ASP.NET MVC views.

Syntax

In ASP.NET MVC, you can define layouts and view models in Razor views using Razor syntax. Here's an example of defining a layout in a Razor view:

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @RenderBody()
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

And here's an example of defining a view model in a Razor view:

@model MyApp.Models.UserViewModel

<div>
    <h2>@Model.FirstName @Model.LastName</h2>
    <p>@Model.Email</p>
    <p>@Model.PhoneNumber</p>
</div>

Example

Let's take a look at an example of using layouts and view models in an ASP.NET MVC application. First, we'll define a layout in a _Layout.cshtml file:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @RenderBody()
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

Next, we'll define a view model for a user in a UserViewModel.cs file:

public class UserViewModel
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Email { get; set; }
    public string PhoneNumber { get; set; }
}

Finally, we'll define a view for our user using the layout and view model:

@model MyApp.Models.UserViewModel
@{
    ViewBag.Title = "User Profile";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div>
    <h2>@Model.FirstName @Model.LastName</h2>
    <p>@Model.Email</p>
    <p>@Model.PhoneNumber</p>
</div>

Explanation

In the above example, we define a layout in _Layout.cshtml. This layout provides a reusable structure for our pages, including links to CSS and JavaScript bundles.

We also define a view model for a user in UserViewModel.cs. This view model is used by the view to render user data in a structured way.

Finally, we define a view for our user using the layout and view model. This view uses Razor syntax to render user data using the UserViewModel provided.

Use

Layouts and view models are useful when you have common components or data that needs to be reused across multiple views. Layouts allow you to create and maintain a consistent layout structure throughout your application, while view models allow you to define a structured way of rendering data in your views.

Important Points

Here are some important points to keep in mind when using layouts and view models in ASP.NET MVC:

  • Layouts can be nested, allowing you to have a common outer layout with different inner layouts for different views.
  • View models can be shared across multiple views, making it easy to update common data structures across your application.
  • You can also define partial views, which are reusable components that can be included in other views.

Summary

In this tutorial, we discussed layouts and view models in ASP.NET MVC views. We covered the syntax, example usage, output, explanation, use, and important points of layouts and view models in ASP.NET MVC views. By using layouts and view models in your application, you can improve the maintainability of your user interface and create a consistent look and feel throughout your application.

Creating views and partial viewsViewBag and ViewData
Published on: