CheapASPNETHostingReview.com | Best and cheap ASP.NET Core 1.0 hosting. In this post we will discuss about using TagHelpers in ASP.NET core 1.0. Well as you know the latest release of ASP.NET MVC has a new feature called TagHelpers. Let’s see what trouble we can get into today by creating hyperlinks that think for themselves.

Highly RECOMMENDED ASP.NET Core 1.0 Hosting Click Here

For example, when you want to create a home link the users can navigate back to th[kkstarratings]e home page. Using TagHelpers, a simple one would look like this:

These attributes are part of the TagHelper classes “shipped” with the latest ASP.NET MVC 6 source code. Then when you run your web app, the LinkTagHelper renders out to this :

What’s Available?

Currently, there are 12 TagHelpers available to get you started. They are:

• AnchorTagHelper – Render a hyperlink
• CacheTagHelper – Allows you to wrap HTML code and implement various caching methods on that HTML.
• EnvironmentTagHelper – Renders different HTML based on a test vs. staging vs. production environment.
• FormTagHelper – Render a standard HTML form.
• ImageTagHelper – Render an image.
• LabelTagHelper – Render a Label
• LinkTagHelper – Render a <link> tag for CSS files.
• OptionTagHelper – Renders an <option> tag for a <select> (dropdown) tag.
• ScriptTagHelper – Renders a <script> tag for JavaScripts in the header or body.
• SelectTagHelper – Render a <select> (dropdown) tag.
• ValidationMessageTagHelper – Render a message for input validation
• ValidationSummaryTagHelper – Render out a Summary of all validations that didn’t pass when the form was submitted.

These come with ASP.NET MVC 6 right out of the box and ready to use.

How To Creating a Custom TagHelper

Make a “Fingerprint

• Created a brand new ASP.NET MVC 6 project and selected the ASP.NET 5 Preview in 2015.
• Created a TagHelper folder in the root of the project.
• Created a new class called SmartLinkHelper and started thinking about this SmartLink class.

First off, we don’t need to exert ourselves when we already have an AnchorTagHelper available.

Let’s use that.

Every TagHelper has to have a “fingerprint” so .NET can identify the tags it needs to render. The fingerprint for our SmartLink is the anchor tag (‘a’) and a “smart-link” attribute. Our smart link will have the following signature:

Everything will be the same for our anchor tags, but we will add a “smart-link” attribute to identify it to .NET on which class to call when rendering our smart link. You can even define your own custom tag.

We need to add a Url attribute for external sites.

Any property in your TagHelper class can become an attribute. All you need to do is place the HtmlAttributeName attribute on your property with a name of the attribute and you’re ready to go.

We Need Process!

Once we set up everything, the TagHelper needs a way to kick off the rendering process. This is where the Process and/or ProcessAsync methods come into play.

The Process and ProcessAsync methods take two parameters: a TagHelperContext and a TagHelperOutput.

• TagHelperContext contains all of the attributes and details about the tag that we’re working with in this TagHelper.
• TagHelperOutput is the buffer of what will be rendered to the browser. Think TagBuilder from a HtmlHelper.

Here is what we have so far with our ProcessAsync method.

First, we grab the content inside the anchor tags. This is considered your “Content.”

Next, we perform an HttpClient Asynchronous request to the webpage and return the status code. We check to see if we have an internal server error (500) or the page wasn’t found (404). If we have either of those, we remove the link.

If we don’t have an error, we continue along grabbing all of the attributes on our new smart link tag and merge them.

Finally, we return the link.

To the View!

When implementing your TagHelpers in your Views, you need to include an @addTagHelper with the base TagHelper class and your project’s tag helper (My project is called SmartLinksDemo). These need to be at the top of your page

I also added this HTML to the bottom just for a simple demonstration.

Once you have this HTML included in your View, you are ready to test out your SmartLink TagHelper.

Finish it!

Here is our final SmartLink TagHelper.

Conclusion

TagHelpers are slowly growing on me. I was skeptical at first whether they would be a benefit to me or not, but I would consider TagHelpers to be the WebControls from the WebForm days and even consider them on the same level as Angular Directives where you can create your own HTML tags.

However, with that said, TagHelpers can be loaded controls. If you wanted to build a <grid> TagHelper, there is nothing stopping you from creating a new WebGrid control, but there would be a LOT of code behind the scenes to generate a webgrid.