Thursday, April 6, 2017
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/font-awesome.css" rel="stylesheet" />
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<link href="~/css/Styles.css" rel="stylesheet" />
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
</head>
<body>
<div>
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a asp-controller="Home" asp-action="Index"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
<li><a asp-controller="Home" asp-action="About"><i class="fa fa-coffee" aria-hidden="true"></i> About</a></li>
<li><a asp-controller="Home" asp-action="Contact"><i class="fa fa-envelope" aria-hidden="true"></i> Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-product-hunt" aria-hidden="true"></i> Products<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Beverages</a></li>
<li><a href="#">Condiments</a></li>
<li><a href="#">Confections</a></li>
<li><a href="#">Dairy Products</a></li>
<li><a href="#">Grains/Cereals</a></li>
<li><a href="#">Meat/Poultry</a></li>
<li><a href="#">Produce</a></li>
<li><a href="#">Seafood</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</nav>
<div class="jumbotron" id="header-jumbotron">
<h2>Northwind Cafe</h2>
</div>
</header>
@RenderBody()
</div>
</body>
</html>
Subscribe to:
Post Comments (Atom)
Đặt vé tại phòng vé Aivivu, tham khảo
ReplyDeleteve may bay di my gia re
vé máy bay mỹ về việt nam
chuyến bay từ đức về hà nội hôm nay
vé máy bay từ nga về tphcm
chuyến bay từ anh về việt nam
chuyến bay từ pháp về việt nam
chi phi ve may bay cho chuyen gia nuoc ngoai