From Pluralsight/ASP.NET Core 6 Fundamentals
Overview
A view is an HTML template as a .cshtml
file with embedded Razor markup (code that interactions w/HTML to render a page).
Views handle data presentation and user interaction.
Views are organized like this where each folder on
Views/
is named for each of the app’s controllers:- In
Views/Home
, when a user requests eitherIndex
,Contact
, orAbout
, theHome
controller determines which of the views is used to build and return that page to the user.
- In
Layouts
Layouts provide consistent web page sections (like header, footer, navigation/menu).
View Responsibilities
Present content through the UI so it can be processed by a controller action.
Contains minimal logic, and the logic they do contain is related to presenting content.
- Conditions, loops
- Tag helpers, view components
The view is a template (cshtml) that contains markup to visualize the data of the model.
Server-side code will generate HTML which will be sent to the client.
For every controller, a corresponding subfolder of that controller’s name is created under /Views
.
- For example, if
/Controllers/PieControllers.cs
, then/Views/Pie/
and for each action, anaction-name.cshtml
file.
A basic View:
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
<div>
@ViewBag.Message
</div>
</body>
</html>
A strongly-typed View involves passing a model to the View and the View accesses the model’s properties:
@model IEnumerable<Pie> // include the type of object being passed in
<html>
<body>
<div>
@foreach (var pie in Model) // the model is accessed via Model
{
<div>
<h2>@pie.Name</h2>
<h3>@pie.Price.ToString("c")</h3>
<h4>@pie>Category.CategoryName</h4>
</div>
}
</div>
</body>
</html>
ViewModel Responsibilities
When a Model we want to pass to a View does not map to a domain model, use a ViewModel
.
A ViewModel
is a class that wraps multiple properties so that the View can access the data it needs. It is a model for the view.
ViewModel
s are not entities that live in the database. They are stored under /ViewModels
by convention.
public class PieListViewModel
{
public IEnumerable<Pie>? Pies { get; set; }
public string? CurrentCategory { get; set; }
}
Creating a View
Views that are specific to a controller are placed in Views/ControllerName
. Views that are shared are placed in Views/Shared
.
This is Views/Home/About.cshtml
:
@{
ViewData["Title"] = "About";
}
<h2>@ViewData["Title"].</h2>
<h3>@ViewData["Message"]</h3>
<p>Use this area to provide additional information.</p>
Returning Views in Controllers
Views are returned from controller actions as a ViewResult
, a type of ActionResult
, using the View
helper method:
HomeController.cs
public IActionResult About()
{
ViewData["Message"] = "Your application description page.";
return View(); // return a view with the same name as the action method from which it's called
}
The View helper method has some overloads:
return View();
// return a view with the same name as the action method from which it’s calledreturn View("Orders");
// return an explicit viewreturn View("Views/Home/About.cshtml");
// return an explicit view; the extension is required if using an absolute pathreturn View("../Manage/Index");
// return an explicit view inside a relative pathreturn View(Orders);
// pass a model to the viewreturn View("Orders", Orders);
// both a view and a model
View Discovery
When a controller action returns a view, view discovery occurs to determine which view file is used. This varies based on the View
method overload used. View discovery searches Views/ControllerName
then Views/Shared
.