Understanding HTML Helpers in ASP.NET MVC

Understanding HTML Helpers in ASP.NET MVC

01 Apr 2024
Intermediate
276K Views
10 min read

HTML Helpers: An Overview

An HTML Helper is just a method that returns an HTML string. The string can represent any type of content that you want. For example, you can use HTML Helpers to render standard HTML tags like HTML <input>, <button>, and <img> tags, etc. In this MVC Tutorial, we will explore more about HTML Helpers which will include What is HTML helpers, types of HTML helpers, standard HTML helpers, strongly typed HTML helpers, templated HTML helpers, custom HTML helpers, and inline HTML helpers. Consider our ASP.NET MVC Course for a better understanding of all MVC core concepts.

What is HTML Helper?

  • HTML Helpers are nothing but the methods that return a string value.
  • They are used in View to render HTML content.
  • HTML Helpers helps in the rapid development of a view in ASP.NET MVC application
  • They are more lightweight than ASP.NET Web Form controls
  • They do not use ViewState and do not have event models.
  • ASP.Net MVC has built-in Helper methods.
  • You can also create your own HTML Helpers to render more complex content such as a menu strip or an HTML table for displaying database data.

    Different types of HTML Helpers

    There are three types of HTML helpers as given below:

    Different types of HTML Helpers

    1. Inline HTML Helpers

    Inline HTML Helper in MVC 5 is used to create a reusable Helper method by using the Razor @helper tag.These are created in the same view by using the Razor @helper tag, and These helpers can be reused only on the same view
  • Advantages

  • It reduces code repetition is simple to create and is easy to use.
  • It is easy to customization the method based on the requirement.
  • Inline helpers can be reused only on the same view.
  • We can not use Inline helper for the different view Pages.
  • We can create our own Inline helper method based on our requirements.
  • Syntax:

     @helper HelperName(Parameters list..)
    {
      //Write your Program
    }    

    Example:

    @helper ListingItems(string[] items)
     {
     <ol>
    
     @foreach (string item in items){
     <li>@item</li>
     }
     </ol>
     }
    
     <h3>Programming Languages:</h3>
    
     @ListingItems(new string[] { "C", "C++", "C#" })
    
     <h3>Book List:</h3>
    
     @ListingItems(new string[] { "How to C", "how to C++", "how to C#" })
     

    2. Built-In HTML Helpers

    Built-in HTML Helpers are extension methods on the HTMLHelper class. The Built-In Html helpers can be divided into three categories-

    • Standard Html Helpers
    • Strongly Typed HTML Helpers
    • Templated HTML Helpers

    Let's see one by one,

    Standard Html Helpers

    These helpers are used to render the most common types of HTML elements like HTML text boxes, checkboxes etc. A list of most common standard html helpers is given below:

    HTML Element
    Example
    TextBox
    @Html.TextBox("Textbox1", "val") Output: <input id="Textbox1" name="Textbox1" type="text" value="val" />
    TextArea
    @Html.TextArea("Textarea1", "val", 5, 15, null) Output: <textarea cols="15" id="Textarea1" name="Textarea1" rows="5">val</textarea>
    Password
    @Html.Password("Password1", "val") Output: <input id="Password1" name="Password1" type="password" value="val" />
    Hidden Field
    @Html.Hidden("Hidden1", "val") Output: <input id="Hidden1" name="Hidden1" type="hidden" value="val" />
    CheckBox
    @Html.CheckBox("Checkbox1", false) Output: <input id="Checkbox1" name="Checkbox1" type="checkbox" value="true" /> <input name="myCheckbox" type="hidden" value="false" />
    RadioButton
    @Html.RadioButton("Radiobutton1", "val", true) Output: <input checked="checked" id="Radiobutton1" name="Radiobutton1" type="radio" value="val" />
    Drop-down list
    @Html.DropDownList (“DropDownList1”, new SelectList(new [] {"Male", "Female"})) Output: <select id="DropDownList1" name="DropDownList1"> <option>M</option> <option>F</option> </select>
    Multiple-select
    Html.ListBox(“ListBox1”, new MultiSelectList(new [] {"Cricket", "Chess"})) Output: <select id="ListBox1" multiple="multiple" name="ListBox1"> <option>Cricket</option> <option>Chess</option> </select>

    Strongly Typed HTML Helpers

    These helpers are used to render the most common types of HTML elements in strongly typed views like as HTML text boxes, checkboxes, etc. The HTML elements are created based on model properties.

    The strongly typed HTML helpers work on lambda expression. The model object is passed as a value to the lambda expression, and you can select the field or property from the model object to be used to set the id, name and value attributes of the HTML helper. A list of most common strongly-typed html helpers is given below:

    HTML Element
    Example
    TextBox
    @Html.TextBoxFor(m=>m.Name) Output: <input id="Name" name="Name" type="text" value="Name-val" />
    TextArea
    @Html.TextArea(m=>m.Address , 5, 15, new{})) Output: <textarea cols="15" id="Address" name=" Address " rows="5">Addressvalue</textarea>
    Password
    @Html.PasswordFor(m=>m.Password) Output: <input id="Password" name="Password" type="password"/>
    Hidden Field
    @Html.HiddenFor(m=>m.UserId) Output: <input id=" UserId" name=" UserId" type="hidden" value="UserId-val" />
    CheckBox
    @Html.CheckBoxFor(m=>m.IsApproved) Output: <input id="Checkbox1" name="Checkbox1" type="checkbox" value="true" /> <input name="myCheckbox" type="hidden" value="false" />
    RadioButton
    @Html.RadioButtonFor(m=>m.IsApproved, "val") Output: <input checked="checked" id="Radiobutton1" name="Radiobutton1" type="radio" value="val" />
    Drop-down list
    @Html.DropDownListFor(m => m.Gender, new SelectList(new [] {"Male", "Female"})) Output: <select id="Gender" name="Gender"> <option>Male</option> <option>Female</option> </select>
    Multiple-select
    Html.ListBoxFor(m => m.Hobbies, new MultiSelectList(new [] {"Cricket", "Chess"})) Output: <select id="Hobbies" multiple="multiple" name="Hobbies"> <option>Cricket</option> <option>Chess</option> </select>

    Templated HTML Helpers

    These helpers figure out what HTML elements are required to render based on the properties of your model class. This is a very flexible approach for displaying data to the user, although it requires some initial care and attention to set up. To set up a proper HTML element with Templated HTML Helper, make use of the DataType attribute of the DataAnnitation class.

    For example, when you use DataType as a Password, A templated helper automatically renders the Password type HTML input element.

    Templated Helper
    Example
    Display
    Renders a read-only view of the specified model property and selects an appropriate HTML element based on the property’s data type and metadata. Html.Display("Name")
    DisplayFor
    A strongly typed version of the previous helper Html.DisplayFor(m => m. Name)
    Editor
    Renders an editor for the specified model property and selects an appropriate HTML element based on the property’s data type and metadata. Html.Editor("Name")
    EditorFor
    A strongly typed version of the previous helper Html.EditorFor(m => m. Name)

    3. Custom Html Helpers

    You can also create your own custom helper methods by creating an extension method on the HtmlHelper class or by creating static methods within a utility class.

    public static class CustomHelpers
    {
     //Submit Button Helper
     public static MvcHtmlString SubmitButton(this HtmlHelper helper, string 
     buttonText)
     {
     string str = "<input type=\"submit\" value=\"" + buttonText + "\" />";
     return new MvcHtmlString(str);
     }
     //Readonly Strongly-Typed TextBox Helper
     public static MvcHtmlString TextBoxFor<TModel, TValue>(this 
     HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TValue>>
     expression, bool isReadonly)
     {
     MvcHtmlString html = default(MvcHtmlString);
    
     if (isReadonly)
     {
     html = System.Web.Mvc.Html.InputExtensions.TextBoxFor(htmlHelper,
     expression, new { @class = "readOnly",
     @readonly = "read-only" });
     }
     else
     {
     html = System.Web.Mvc.Html.InputExtensions.TextBoxFor(htmlHelper,
     expression);
     }
     return html;
     }
    }
    
    Conclusion:
    So in this article, we have learned about Understanding HTML Helpers in ASP.NET MVC. I hope you enjoyed learning these concepts while programming with Asp.Net. Feel free to ask any questions from your side. Your valuable feedback or comments about this article are always welcome. Level up your career in MVC with our ASP.Net Core Certification.

    FAQs

    Q1. How to create a form using HTML helper in MVC?

    This HTML helper class is used to generate HTML elements. The BeginForm() helper method is a loosely typed extension method which is used to create a Form (<form action="/" method="post">) element in razor view. @Html. BeginForm() method is inside the “System.

    Q2. What is the use of HTML helpers?

    HTML Helpers are methods that return a string. Helper class can create HTML controls programmatically. HTML Helpers are used in View to render HTML content.

    Q3. What are the three components of MVC architecture?

    The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. 
    Share Article
    Batches Schedule
    About Author
    Shailendra Chauhan (Microsoft MVP, Founder & CEO at Scholarhat by DotNetTricks)

    Shailendra Chauhan is the Founder and CEO at ScholarHat by DotNetTricks which is a brand when it comes to e-Learning. He provides training and consultation over an array of technologies like Cloud, .NET, Angular, React, Node, Microservices, Containers and Mobile Apps development. He has been awarded Microsoft MVP 8th time in a row (2016-2023). He has changed many lives with his writings and unique training programs. He has a number of most sought-after books to his name which has helped job aspirants in cracking tough interviews with ease.
    Self-paced Membership
    • 22+ Courses
    • 750+ Hands-On Labs
    • 300+ Quick Notes
    • 55+ Skill Tests
    • 45+ Interview Q&A
    • 10+ Real-world Projects
    • Career Coaching
    • Email Support
    Upto 66% OFF
    KNOW MORE..

    To get full access to all courses

    Accept cookies & close this