HTML Helpers in ASP.NET MVC

09 - Feb - 2019

ASP.NET Core

syedzainnasir

0 Comments

2.5K Views

700

Shares: 691

TEP , The Engineering Projects , TEP Key Points

dept

TEP , The Engineering Projects , Electrical

TEP , The Engineering Projects , Electrical Shadow

Hello friends, I hope you all are doing great. In today's tutorial, we are gonna have a look at HTML Helpers in ASP.NET MVC. It's our 12th tutorial in ASP.NET MVC series. I know every tutorial is a new concept for you to understand but we have to cover all of them before starting working on our project in ASP.NET MVC. If you have worked on ASP.NET web forms or C# / Visual Basic projects then you must be aware of toolboxes, from where we can drag and drop our visual components like textbox, editbox, button etc. But in ASP.NET MVC applications, we don't have this luxury of drag and drop. Instead we have HTML Helper classes which are used to created these html components in ASP.NET MVC. So, let's have a look at How to use HTML Helpers in ASP.NET MVC:

HTML Helpers in ASP.NET MVC

HTML Helpers are simple C# classes in ASP.NET MVC, which are used to create HTML components in the run time environment.
HTML Helper creates a path for displaying model values (saved in SQL Databases) in respective HTML components e.g displaying name in Name Text Box.

We can also get values from HTML components and then save them in our database via Model. You should recall Tut # 02: What is a Model ?.
So, instead of drag and drop as in C# applications, in ASP.NET MVC we are generating and controlling our HTML components programmatically using HTML Helper classes.
There are numerous HTML Helpers are available in ASP.NET MVC but the most commonly used HTML Helpers are shown in below table:

HTML Helpers in ASP.NET MVC
Type	Forced Type	Description
Html.TextBox	Html.TextBoxFor	It creates a Text Box.
Html.TextArea	Html.TextAreaFor	It creates a Text Area.
Html.CheckBox	Html.CheckBoxFor	It creates a Check Box.
Html.RadioButton	Html.RadioButtonFor	Radio buttons are created using this HTML Helper.
Html.DropDownList	Html.DropDownListFor	Drop Down List is created with it.
Html.ListBox	Html.ListBoxFor	It is used to create Multi-select list box.
Html.Hidden	Html.HiddenFor	Hidden fields are created with it.
Password	Html.PasswordFor	Password text box are created with it.
Html.Display	Html.DisplayFor	It creates Html text.
Html.Label	Html.LabelFor	Labels are created here.
Html.Editor	Html.EditorFor	Editor is created using it.
Html.ActionLink		It creates Anchor link.

In normal HTML language, we use html tags e.g. <a> this html tag is used for linking, but in ASP.NET MVC we use HTML Helper and HTML Helper makes it too easy to bind model data with View design.
For example, if we are working on simple html then we will use <a href="/Student/Click ME">Click ME</a> this code to create a link, but in HTML Helper it will be @Html.ActionLink("Click ME", "Click ME").
I have simply used Action Link, which will create a Link component and then I have given it a name and then action method.
So, when you click on it then Click ME action method will be called.
Open the index.cshtml file of our Student Controller. ( Recall: Tut # 6: Create a New Controller in ASP.NET MVC )
I have removed the extra code in this index file and have added a new HTML Link Helper, as shown in below figure:

You can see in above figure that Link Helper has two inputs, the first one is the Anchor Text of the Link, while the second one is the action method which should be called i.e. Get1().
Here's the video demonstration of HTML Helpers in ASP.NET MVC:

So, that was all about HTML Helpers. You must have got the idea that Html Helpers are not that difficult, in fact they are here to ease the job. Thanks for reading. Take care & have fun !!! :)