Tech Junkie Blog - Real World Tutorials, Happy Coding!: Hour 9: ASP.NET Core : Add Tag Helpers To NorthwindCafe Application

Friday, August 2, 2019

Hour 9: ASP.NET Core : Add Tag Helpers To NorthwindCafe Application

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

@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>&nbsp;Home</a></li>
                        <li class="nav-item"><a class="nav-link" asp-controller="Home" asp-action="About"><i class="fas fa-coffee"></i>&nbsp;About</a></li>
                        <li class="nav-item"><a class="nav-link" asp-controller="Home" asp-action="Contact"><i class="fas fa-envelope"></i>&nbsp;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>&nbsp;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

1 comment:

Search This Blog