Introduction
What are HTML Helpers in ASP.NET MVC?
HTML Helpers are nothing but a way of rendering HTML on the view page in ASP.NET MVC. In other words, simply it is just a method which returns you a string
, and string
is HTML.
Example of HTML Helpers
Here, I am showing some of the examples in HTML helpers:
@Html.TextBoxFor(model=>model.Lastname)
@Html.LabelFor(model=>model.Firstname)
@Html.ActionLink("Link name","Methodname","ControllerName")...e.t.c
Why to use Html Helpers?
We can use directly HTML tags and we have another opportunity to achieve the same thing using HTML Helpers. It's just for making a developer's life more easy and to have the cleaner html for your view page. And Helpers are strongly binded to your model.
Why we Need Custom Html Helpers?
For every framework, we need to do some customization on top of every framework because of the existing things not fulfilled in your Business Requirement. In that case, you need to write some custom stuff. Writing a custom Html helper is nothing but writing an extension method for HtmlHelper
class. HtmlHelper
class is the root for the helpers. I hope everybody knows about extension methods in C#.
Using the Code
How to Create Custom Html Helper?
Here, I will simply write an Html helper which will render the container of any content on view page.
This is done simply by using the <div>
tag of Html.
Step 1
Create one custom static
class for creation of your custom Html helpers.
public static class CustomHelpers
{
}
Step 2
Add static
method to the class and make sure that return type is MvcHtmlString
.
public static MvcHtmlString Div(this HtmlHelper helper, string content)
{
}
Step 3
Add the rendering logic in the method, you can take help from TagBuilder
class to generate Html tags to be rendered.
public static MvcHtmlString Div(this HtmlHelper helper, string content)
{
var tagBuilder = new TagBuilder("Div");
tagBuilder.InnerHtml = content;
return new MvcHtmlString(tagBuilder.ToString());
}
Step 4
Build the project.
Open any view, i.e., .cshtml file and add custom class name space to that view.
Here, I have created my custom class under model folder.
@using CustomHelpersExample.Models
Finally, call the method in view:
//
// finally method call in view
//
@Html.Div("<input type='text' id='txtUsername' placeholder='Username'/>
</br></br><input type='password'
placeHolder='Password' id='txtpassword'/></br>
</br><input type='Submit' value='Login'></submit>")
That's it. Now run your project.
Then finally in browser, the code will be rendered as:
//
// finally after rendering the code below
//
<div>
<input type="text" id="txtUsername" placeholder="Username"><br />
<input type="password" id="txtpassword" placeholder="Password"><br />
<input type="submit" value="Login">
</div>
That's it.
I hope everybody understands this. It's very simple and easy. Try it in your own scenarios.
Points of Interest
This is more useful in our development. Whenever you require customization, you can do this way. I like this very much. I am sincerely thankful to my supporters.
History