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

Thursday, April 6, 2017

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/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>&nbsp;Home</a></li>
                            <li><a asp-controller="Home" asp-action="About"><i class="fa fa-coffee" aria-hidden="true"></i>&nbsp;About</a></li>
                            <li><a asp-controller="Home" asp-action="Contact"><i class="fa fa-envelope" aria-hidden="true"></i>&nbsp;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>&nbsp;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>

1 comment:

Subscribe to: Post Comments (Atom)

Search This Blog