How to use tag helpers in ASP.NET MVC

in this post I want to show you how to use tag helpers in ASP.NET MVC 6.

First of all: What are the tag helpers good for?

If you are coding your links in your MVC-Views with normal strings its really hard to refactor or correct them in case you rename your routing, controller or your action. So you need a kind of generic approach to do this.

Razor in previous versions had this

1	Url.Action("MyAction", "MyController", new { id = "123" })

which returned an url like “MyController/MyAction/123”

MVC 6 is now introducing a new more readable way to achieve the same result called TagHelpers.

If you are using the normal MVC6-Template from Visual Studio asp-net TagHelpers are already included! However, I will mention the necessary steps anyway.

Getting started:

First make sure you included a reference to the tag helpers in your project.json

And Because tag helpers do not throw an exception if you use them and they do not work you should also include a _ViewImports.cshtml which is responsible to load all extra functionality to your views. You can simply add it via the context menu Add –> New Item.

Now all the cshtml files are able to handle Asp.Net-TagHelpers which get easily in your html like this:

1	<li><a asp-controller="Home" asp-action="Contact">Contact</a></li>

which is rendered to

1	<li><a href="/Home/Contact">Contact</a></li>

That is great because you do not have to use a non-html-syntax anymore and it it easier to understand and to read.

You can also write forms in this Html-Tag-Helper-Syntax which is really nice to understand

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<form asp-controller="Home" asp-action="SendData" method="post" class="form-horizontal" role="form">     <div asp-validation-summary="ValidationSummary.All" class="text-danger"></div>     <div class="form-group">         <label asp-for="Name" class="col-md-2 control-label"></label>         <div class="col-md-10">             <input asp-for="Name" class="form-control" />             <span asp-validation-for="Name" class="text-danger"></span>         </div>     </div>     <div class="form-group">         <label asp-for="Age" class="col-md-2 control-label"></label>         <div class="col-md-10">             <input asp-for="Age" class="form-control" />             <span asp-validation-for="Age" class="text-danger"></span>         </div>     </div>     <div class="form-group">         <div class="col-md-offset-2 col-md-10">             <button type="submit" class="btn btn-default">Send person</button>         </div>     </div> </form>

instead of using the “ugly” @-like Sytax before.