Razor Views

Chapter 7
How to work
with Razor views
© 2020, Mike Murach & Associates, Inc.

Murach's ASP.NET Core MVC C7, Slide 1
Objectives (part 1)
Applied
1. Develop strongly-typed Razor views that display the elements that
are unique for a web page.
2. Develop Razor layouts that provide the elements that are the same
for multiple pages.
Knowledge
3. Distinguish between a Razor code block and inline expressions,
loops, and if statements.
4. Distinguish between an inline conditional statement and an inline
conditional expression.
5. Describe how an MVC web app typically maps its views to the
action methods of its controllers.
6. Describe the use of tag helpers to generate a URL.

Objectives (part 2)
5. Distinguish between a relative URL and an absolute URL.
6. Describe how to pass a model to a view.
7. Distinguish between the @model directive and the @Model
property.
8. Describe how to bind an HTML element to a property of a view’s
model.
9. Describe how to bind a <select> element to a list of items.
10. Describe how to display a list of items in a <table> element.
11. Describe how to create and apply a layout.
12. Describe how to build layouts by nesting one layout within
another.

Objectives (part 3)
13. Describe how a layout can use the ViewContext property to get
data about the route of the current view.
14. Describe how to code a section in a view and render that section
in a layout.

The syntax for a Razor code block
@{
// one or more C# statements
}
The syntax for an inline expression

@(csharp_expression)

The Index() action method of the Home controller
public IActionResult Index()
{
ViewBag.CustomerName = "John";
return View(); // returns Views/Home/Index.cshtml
}

The Views/Home/Index.cshtml file
@{
string message = "Welcome!";
if (ViewBag.CustomerName != null)
{
message = "Welcome back!";
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Home</title>
</head>
<body>
<h1>@message</h1>
<p>Customer Name: @ViewBag.CustomerName</p>
<p>2 + 2 = @(2 + 2)</p>
</body>
</html>

The view displayed in a browser

A for loop that displays a drop-down list
of month numbers
<label for="month">Month:</label>
<select name="month" id="month">
@for (int month = 1; month <= 12; month++)
{
<option value="@month">@month</option>
}
</select>
The result displayed in a browser

Code in a controller that creates a list of strings
{
ViewBag.Categories = new List<string>
{
"Guitars", "Basses", "Drums"
};
return View();
}

A foreach loop that displays a list of links
@foreach (string category in ViewBag.Categories)
{
<div>
<a href="/Product/List/@category/">@category</a>
</div>
}
The result displayed in a browser

An if-else statement in a view
@if (ViewBag.ProductID == 1)
{
<p>Fender Stratocaster</p>
}
else if (ViewBag.ProductID == 2)
{
<p>Gibson Les Paul</p>
}
else
{
<p>Product Not Found</p>
}

A switch statement in a view
@switch (ViewBag.ProductID)
{
case 1:
<p>Fender Stratocaster</p>
break;
case 2:
<p>Gibson Les Paul</p>
break;
default:
<p>Product Not Found</p>
break;
}

An if statement that adds a Bootstrap CSS class
if true
<a asp-controller="Product" asp-action="List"
asp-route-id="All"
class="list-group-item
@if (ViewBag.SelectedCategoryName == "All") {
<text>active</text>
}">
All
</a>

A conditional expression that adds a Bootstrap
CSS class if true
<a asp-controller="Product" asp-action="List" asp-route-id="All"
class="list-group-item
@(ViewBag.SelectedCategoryName == "All" ? "active" : "")">
All
</a>

The starting folders and files
for the Guitar Shop app
GuitarShop
/Controllers
/HomeController.cs
/ProductController.cs
/Models
/Category.cs
/Product.cs
/Views
/Home
/Index.cshthml -- the view for the Home/Index action
/About.cshthml -- the view for the Home/About action
/Product
/List.cshthml -- the view for the Product/List action
/Details.cshthml -- the view for the Product/Details action
/Update.cshthml -- the view for the Product/Update action
/Shared
/_Layout.cshtml -- a layout that can be shared by views
_ViewImports.cshtml -- imports models and tag helpers for views
_ViewStart.cshtml -- specifies the default layout for views
/wwwroot
/css
/custom.css
/lib
/bootstrap/css/bootstrap.min.css
Startup.cs -- configures middleware that may impact views
Program.cs -- sets up the app

The routing that’s specified in the Startup.cs file
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});

A method that a controller can use
to return a view result to the browser
View()
View(name)

The Home controller
public class HomeController : Controller
{
{
return View(); // Views/Home/Index.cshtml
}
}

The Product controller
public class ProductController : Controller
{
{
return View("List"); // Views/Product/List.cshtml
}
public IActionResult List(string id = "All")

{
ViewBag.Category = id;
return View(); // Views/Product/List.cshtml
}
public IActionResult Details(string id)

{
ViewBag.ProductSlug = id;
return View(); // Views/Product/Details.cshtml
}
}

The _Layout.cshtml file in the Views/Shared folder
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link rel="stylesheet"
href="~/lib/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/custom.css" />
</head>
<body>
@RenderBody()
</body>
</html>

A _ViewStart.cshtml file
that sets the default layout
@{
Layout = "_Layout";
}
A _ViewImports.cshtml file
that enables all ASP.NET Core MVC tag helpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

How to add a Razor layout, view start,
or view imports file
1. Right-click on the folder where you want to add the file, and
select the AddNew Item item.
2. In the resulting dialog, select the ASP.NET CoreWeb
category.
3. Select the Razor item you want to add and respond to the
resulting dialog boxes.

Three tag helpers for generating URLs
asp-controller
asp-action
asp-route-param_name

Two ways to code a link
Use HTML to hard code the URL in the href attribute
<a href="/Product/List/Guitars">View guitars</a>
Use ASP.NET tag helpers to generate the URL

asp-route-id="Guitars">View guitars</a>
The URL for both links

/Product/List/Guitars

How to code a link to an action method
in the same controller
<a asp-action="About">About Us</a>
The URL that’s generated

/Home/About
How to code a link to an action method

in a different controller
<a asp-controller="Product" asp-action="List">
View all products</a>

/Product/List

How to code a link that includes a parameter
that’s in a route

/Product/List/Guitars
A link that specifies a route parameter

that doesn’t exist
asp-route-page="1" asp-route-sort_by="price">
Products - Page 1</a>

/Product/List?page=1&sort_by=price

The Home/Index view
@{
ViewBag.Title = "Home";
}
<h1>Home</h1>
<div class="list-group">
View all products</a>

<a asp-controller="Product" asp-action="Details"

asp-route-id="Fender-Stratocaster">
View Fender Stratocaster</a>
</div>

The Product/List view
@{
ViewBag.Title = "Product List";
}
<h1>Product List</h1>
<p>Category: @ViewBag.Category</p>
<a asp-action="Details"
asp-route-id="Fender-Stratocaster">
View Fender Stratocaster</a>
<a asp-controller="Home" asp-action="Index">Home</a>

</div>

The Product/Details view
@{
ViewBag.Title = "Product Details";
}
<h1>Product Details</h1>
<p>Slug: @ViewBag.ProductSlug</p>

</div>

A browser displaying the Home page

A browser after clicking the View Guitars link

A browser after requesting
the View Fender Stratocaster link

More tag helpers for generating URLs
asp-area
asp-fragment
asp-protocol
asp-host

How to code a link to an area
<a asp-area="Admin" asp-controller="Product"
asp-action="List">Admin - Product Manager</a>

/Admin/Product/List

How to code an HTML placeholder
<h2 id="Fender">Fender Guitars</h2>
How to code a URL that jumps

to an HTML placeholder on the same page
<a asp-fragment="Fender">View Fender Guitars</a>

/#Fender

How to code an absolute URL
<a asp-protocol="https"
asp-host="murach.com"
asp-controller="Shop"
asp-action="Details"
asp-route-id="html5-and-css3"
asp-fragment="reviews">Murach's HTML5 and CSS3 - Reviews</a>

https://www.murach.com/Shop/Details/html5-and-css3#reviews

Format specifiers you can use to format numbers
Specifier Name
C Currency
N Number
P Percent

Code that stores numbers in the ViewBag
ViewBag.Price = 12345.67;
ViewBag.DiscountPercent = .045;
ViewBag.Quantity = 1234;

Razor expressions that format the numbers
Expression Result
@ViewBag.Price.ToString("C") $12,345.67
@ViewBag.Price.ToString("C1") $12,345.7
@ViewBag.Price.ToString("C0") $12,346
@ViewBag.Price.ToString("N") 12,345.67
@ViewBag.Price.ToString("N1") 12,345.7
@ViewBag.Price.ToString("N0") 12,346
@ViewBag.DiscountPercent.ToString("P") 4.50%
@ViewBag.DiscountPercent.ToString("P1") 4.5%
@ViewBag.DiscountPercent.ToString("P0") 5%

Code in a view that displays the numbers
<div>Price: @ViewBag.Price.ToString("C")</div>
<div>Discount Percent:
@ViewBag.DiscountPercent.ToString("P1")</div>
<div>Quantity: @ViewBag.Quantity.ToString("N0")</div>
The view displayed in a browser

The Product model
namespace GuitarShop.Models
{
public class Product
{
public int ProductID { get; set; }
public Category Category { get; set; }
public string Name { get; set; }
public decimal Price { get; set; }
public string Slug => Name.Replace(' ', '-');
}
}

The Category model
namespace GuitarShop.Models
{
public class Category
{
public int CategoryID { get; set; }
public string Name { get; set; }
}
}

A method that a controller can use
to pass a model to a view
View(model)
View(name, model)
The Product/Details() action method

that passes a model to a view
public IActionResult Details(int id) {
Product product = context.Products.Find(id);
return View(product);
}
A Product/Add() action method

that passes a model to the specified view
[HttpGet]
public IActionResult Add() {
return View("Update", new Product());
}

A directive for displaying model properties
in a view
@model
A property for displaying model properties

in a view
@Model

A _ViewImports file that imports the Models
namespace for all views
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using GuitarShop.Models
The code for the Product/Details view

@model Product
@{
ViewBag.Title = "Product Details";
}
<h1>Product Details</h1>
<div>ID: @Model.ProductID</div>
<div>Name: @Model.Name</div>
<div>Category: @Model.Category.Name</div>
<div>Price: @Model.Price.ToString("C2")</div>

The view with model properties in a browser

A tag helper for binding HTML elements
to model properties
asp-for
A view with asp-for tag helpers (part 1)

@model Product
@{
ViewBag.Title = "Update Product";
}
<h1>Update Product</h1>
<form asp-action="Update" method="post">
<div class="form-group">
<label asp-for="Name"></label>
<input asp-for="Name" class="form-control">
</div>
<label asp-for="Price"></label>
<input asp-for="Price" class="form-control">
</div>

A view with asp-for tag helpers (part 2)
<input type="hidden" asp-for="ProductID" />
<input type="hidden" asp-for="Category.Name" />
<button asp-action="Update" type="submit"

class="btn btn-primary">Update
</button>
<a asp-action="List" class="btn btn-primary">
Cancel</a>
</form>

The view with bound properties in a browser

The HTML that’s generated
for the Price <label> and <input> elements
<label for="Price">Price</label>
<input class="form-control" type="text"
id="Price" name="Price" value="699.00">

A tag helper for adding options
to a <select> element
asp-items
The constructor of the SelectList class

SelectList(list, value, text, selectedValue)

An Update action method that creates the model
and passes it to the view
public IActionResult Update(int id)
{
ViewBag.Categories = context.Categories.ToList();
Product product = context.Products.Find(id);
return View(product);
}

The code that binds items to a <select> element
<label asp-for="CategoryID">Category</label>
<select asp-for="CategoryID"
asp-items="@(new SelectList(ViewBag.Categories,
"CategoryID", "Name",
Model.CategoryID.ToString()))"
class="form-control"></select>
</div>
The <select> element and its label displayed

in a browser

HTML that’s generated for the <select> element
<select class="form-control" id="Category_CategoryID"
name="Category.CategoryID">
<option selected="selected" value="1">
Guitars</option>
<option value="2">Basses</option>
<option value="3">Drums</option>
</select>

A List action method that creates the model
and passes it to the view
public IActionResult List(string id = "All")
{
ViewBag.Categories = context.Categories.ToList();
ViewBag.SelectedCategory = id;
List<Product> products = context.Products
.Where(p => p.Category.Name == id).ToList();
return View(products);
}

The code for the view (part 1)
@model List<Product>
@{
}
<h1>Product List</h1>
@if (ViewBag.Categories != null)
{
foreach (Category c in ViewBag.Categories)
{
asp-route-id="@c.Name">@c.Name</a>
<text> | </text>
}
}
asp-route-id="All">All</a>
<hr />

@if (@ViewBag.SelectedCategory == "All")
{
<h2>All Products</h2>
}
else
{
<h2>@ViewBag.SelectedCategory</h2>
}
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th></th>
<th></th>
</tr>
</thead>

<tbody>
@foreach (var product in @Model)
{
<tr>
<td>@product.Name</td>
<td>@product.Price.ToString("C")</td>
<td>
<a asp-controller="Product"
asp-action="Details"
asp-route-id="@product.ProductID">
View</a>
</td>
<td>
<a asp-controller="Product"
asp-action="Update"
asp-route-id="@product.ProductID">
Update</a>
</td>
</tr>
}
</tbody>
</table>

The Product objects view in a browser

The Views/Shared/_MainLayout.cshtml file (part 1)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<a asp-controller="Home" asp-action="Index">
Home</a> |
Products</a> |
<a asp-controller="Home" asp-action="About">
About</a>
<hr />
</header>

The Views/Shared/_MainLayout.cshtml file (part 2)
@RenderBody()
<footer>
<hr />
<p>© @DateTime.Now.Year - Guitar Shop</p>
</footer>
</body>
</html>

The code for a _ViewStart.cshtml file
that sets the default layout
@{
Layout = "_Layout";
}
The code for a Home/Index view

that explicitly specifies a layout
@{
Layout = "_MainLayout";
ViewBag.Title = "Home";
}
<p>Welcome to the Guitar Shop website!</p>

The Home page

The _Layout file
<!DOCTYPE html>
<html>
<head>
</head>
<body>
@RenderBody()
</body>
</html>

The _MainLayout file
@{
Layout = "_Layout";
}
<header>
<a asp-controller="Home" asp-action="Index">Home</a> |
asp-route-id="All">Products</a> |
<a asp-controller="Home" asp-action="About">About</a>
<hr />
</header>
@RenderBody()
<footer>
<hr />
</footer>

The _ProductLayout file
@{
Layout = "_MainLayout";
}
<h1>Product Manager</h1>
@if (ViewBag.Categories != null)
{
foreach (Category c in ViewBag.Categories)
{
asp-route-id="@c.Name">@c.Name</a><text> | </text>
}
asp-route-id="All">All</a>
}
<hr />
@RenderBody()

The code for a view that uses
the _ProductLayout view
@model List<Product>
@{
Layout = "_ProductLayout";
}
@if (@ViewBag.SelectedCategory == "All")

{
<h2>All Products</h2>
}
else
{
<h2>@ViewBag.SelectedCategory</h2>
}


The view with nested layouts in a browser

A _MainLayout file that uses view context (part 1)
@{
Layout = "_Layout";
string controller =
ViewContext.RouteData.Values["controller"].ToString();
string action =
ViewContext.RouteData.Values["action"].ToString();
}
<nav class="navbar navbar-dark bg-primary fixed-top">
<a class="navbar-brand" href="/">My Guitar Shop</a>
<div class="navbar-nav">
<a class="nav-link
@(controller == "Home" && action == "Index" ?
"active" : "")"
asp-controller="Home" asp-action="Index">Home</a>
<a class="nav-link
@(controller == "Product" ? "active" : "")"
asp-controller="Product" asp-action="List">
Products</a>
<a class="nav-link
@(controller == "Home" && action == "About" ?
"active" : "")"
asp-controller="Home" asp-action="About">About</a>
</div>
</nav>

A _MainLayout file that uses view context (part 2)
@RenderBody()
<footer>
<hr />
</footer>

A view that uses this layout

Code in a view file that specifies a section
@model Product
@{
ViewBag.Title = "Update Product";
}
@section scripts {
<script src="~/lib/jquery-validate/jquery.validate.min.js">
</script>
<script src="~/lib/jquery-validation-unobtrusive/
jquery.validate.unobtrusive.min.js">
</script>
}
<h2>Update</h2>
// the HTML elements for the rest of the view body go here

A method that can insert content
from a section into a layout
RenderSection(name, isRequired)
A layout file that specifies an optional section

<!DOCTYPE html>
<html>
<head>
<script src="~/lib/jquery/jquery.min.js"></script>
<script src="~/lib/popper.js/popper.min.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.min.js"></script>
@RenderSection("scripts", false)
</head>
<body>
@RenderBody()
</body>
</html>

The Product List page for customers

The Product Details page

The Product Manager page for administrators

The Update Product page

The Add Product page

The Delete Product page

Razor Views

Uploaded by

Copyright:

Available Formats

Razor Views

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Razor Views

Uploaded by

Copyright:

Available Formats

Chapter 7

© 2020, Mike Murach & Associates, Inc.

© 2020, Mike Murach & Associates, Inc.

© 2020, Mike Murach & Associates, Inc.

© 2020, Mike Murach & Associates, Inc.

The syntax for an inline expression

© 2020, Mike Murach & Associates, Inc.

© 2020, Mike Murach & Associates, Inc.

© 2020, Mike Murach & Associates, Inc.

© 2020, Mike Murach & Associates, Inc.

The result displayed in a browser

© 2020, Mike Murach & Associates, Inc.

© 2020, Mike Murach & Associates, Inc.

The result displayed in a browser

© 2020, Mike Murach & Associates, Inc.

© 2020, Mike Murach & Associates, Inc.

© 2020, Mike Murach & Associates, Inc.

© 2020, Mike Murach & Associates, Inc.

© 2020, Mike Murach & Associates, Inc.

© 2020, Mike Murach & Associates, Inc.

© 2020, Mike Murach & Associates, Inc.

© 2020, Mike Murach & Associates, Inc.

© 2020, Mike Murach & Associates, Inc.

public IActionResult List(string id = "All")

public IActionResult Details(string id)

© 2020, Mike Murach & Associates, Inc.

© 2020, Mike Murach & Associates, Inc.

© 2020, Mike Murach & Associates, Inc.

© 2020, Mike Murach & Associates, Inc.

© 2020, Mike Murach & Associates, Inc.

Use ASP.NET tag helpers to generate the URL

The URL for both links

© 2020, Mike Murach & Associates, Inc.

The URL that’s generated

How to code a link to an action method

The URL that’s generated

© 2020, Mike Murach & Associates, Inc.

The URL that’s generated

A link that specifies a route parameter

The URL that’s generated

© 2020, Mike Murach & Associates, Inc.

<a asp-controller="Product" asp-action="List"

<a asp-controller="Product" asp-action="Details"

© 2020, Mike Murach & Associates, Inc.

<a asp-controller="Home" asp-action="Index">Home</a>

© 2020, Mike Murach & Associates, Inc.

<a asp-controller="Home" asp-action="Index">Home</a>

© 2020, Mike Murach & Associates, Inc.

© 2020, Mike Murach & Associates, Inc.

© 2020, Mike Murach & Associates, Inc.

© 2020, Mike Murach & Associates, Inc.

© 2020, Mike Murach & Associates, Inc.

The URL that’s generated

© 2020, Mike Murach & Associates, Inc.

How to code a URL that jumps

The URL that’s generated

© 2020, Mike Murach & Associates, Inc.

The URL that’s generated