You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.
Become a sharper developer and jumpstart your career.
$0
$
. 00
monthly
For Basic members:
$10
For Premium members:
In this article you will learn how to create a Custom HTML Helper.
HTML Helpers in ASP.NET MVCHTML Helpers are nothing but the way of rendering HTML on the view page in ASP.NET MVC. Typically what we have in traditional ASP.NET web forms is Web Controls to get the same functionality but with the evolution of the MVC pattern, you don't have any web controls to add to the view pages.In simple words, it is just a method that returns a string and the string is HTML.Example of HTML HelpersThe ASP.NET MVC framework ships with various builtin HTML helpers such as ActionLink and Label.Let's have a look at how a HTML helper is added to the view page. I am considering the Razor View Engine for this example.
Why to use HTML HelpersThe question might have popped into your mind by now asking, if HTML helpers will just render the HTML string then why do I need to use them? If I know the HTML syntax then why not add the HTML directly onto the view page? The answer is simple, it depends on how clean and consistent you want to make your application. Of course you can do the direct addition of HTML tags onto your view pages but if you observe the second example, you can see that it is simply rendering the label tag on the view page for a property in the model at run time. So it is just for making the developer's life easies and to have cleaner HTML for your view page.Why Custom HTML Helpers are neededWell, there is always a need to do some custom stuff on top of what the framework offers and the reason for doing this is either for business requirements or to get things done in a smarter way.Writing a custom HTML helper is nothing but writing an extension method. You are actually writing an extension method for the HtmlHelper class.Being a SharePoint developer I always find this task similar to the creation of a web control where you override the render method of the base class and do the custom HTML rendering. Creating a Custom HTML HelperAll right, for demo purposes I will keep the example simple, I will simply write an HTML helper that will render the header of the content on the view page.This is done simply with the <header> tag of HTML 5.Step 1
Define your custom static class for the creation of your custom HTML helpers.
Step 2
Add a static method to the class and ensure that the return type is MvcHtmlString. Write an input paramter of method as HtmlHelper and also a string for which the header tag needs to be generated.You might need to add a System.Web.Mvc namespace to your class.
Step 3
Add the rendering logic in the method. You can use the TagBuilder class to generate HTML tags to be rendered.
Step 4
Build the project and open any of the view pages. Now you can use your custom HTML helper to render the header. Be sure that your view page has the correct using namespace for using your custom HTML helper extension.
ASP.NET MVC 5 Recipes: A Practical Solution