Friday, August 2, 2019
In this post we will add Tag Helpers support for our application. Tag Helpers are programmable attributes that you can use throughout the application.
Follow the steps below to enable tag helpers:
1. Right-click on the "Views" folder and create a "View Imports" file
2. In the _ViewImports.cshtml file type in the following line
Follow the steps below to enable tag helpers:
1. Right-click on the "Views" folder and create a "View Imports" file
@addTagHelper "*,Microsoft.AspNetCore.Mvc.TagHelpers"
3. Now let's create the view for the "About" and "Contact" page in the HomeController
public IActionResult About()
{
return View();
}
public IActionResult Contact()
{
return View();
}
4. In the _Layout.cshtml file we are going to replace the a href placeholder for those pages with the tag helpers
For the about view change the link markup to the following to call the "About" view
<a asp-controller="Home" asp-action="About">
For the "Home" view change the link markup to the following
<a asp-controller="Home" asp-action="Index">
Finally for the "Contact" view should look like the following
<a asp-controller="Home" asp-action="Contact">
When you run the application the URL now has the patter /controller/action
The _Layout.cshtml markup should look like the following
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<link href="~/lib/font-awesome/css/fontawesome.css" rel="stylesheet" />
<link href="~/lib/font-awesome/css/brands.css" rel="stylesheet" />
<link href="~/lib/font-awesome/css/solid.css" rel="stylesheet" />
<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/css/Styles.css" rel="stylesheet" />
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
@RenderSection("head", required: false)
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="row">
<div class="navbar-header">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div id="navbarSupportedContent" class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" asp-controller="Home" asp-action="Index"><i class="fas fa-home"></i> Home</a></li>
<li class="nav-item"><a class="nav-link" asp-controller="Home" asp-action="About"><i class="fas fa-coffee"></i> About</a></li>
<li class="nav-item"><a class="nav-link" asp-controller="Home" asp-action="Contact"><i class="fas fa-envelope"></i> Contact</a></li>
<li class="dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fab fa-product-hunt"></i> Products
</a>
<ul class="dropdown-menu" role="menu">
<li><a class="dropdown-item" href="#">Beverages</a></li>
<li><a class="dropdown-item" href="#">Condiments</a></li>
<li><a class="dropdown-item" href="#">Confections</a></li>
<li><a class="dropdown-item" href="#">Dairy Products</a></li>
<li><a class="dropdown-item" href="#">Grains/Cereals</a></li>
<li><a class="dropdown-item" href="#">Meat/Poultry</a></li>
<li><a class="dropdown-item" href="#">Produce</a></li>
<li><a class="dropdown-item" href="#">Seafood</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</nav>
<div class="jumbotron" id="header-jumbotron">
<h2>Northwind Store</h2>
</div>
</header>
@RenderBody()
</body>
</html>
github Repository: https://github.com/techjunkiejh/NorthwindCafe/tree/Hour9
Subscribe to:
Post Comments (Atom)
Liên hệ Aivivu, đặt vé máy bay tham khảo
ReplyDeleteVe may bay di My
vé máy bay từ california về việt nam
khi nào có chuyến bay từ canada về việt nam
mở chuyến bay từ nhật về việt nam
vé máy bay từ hàn quốc về việt nam
Vé máy bay từ Đài Loan về Việt Nam
chuyến bay chuyên gia về việt nam