HtmlHelper in ASP.NET MVC

Introduce: An html helper is a method that is used to render html content in a view.html helper are completed as extension method. “@Html” is a HtmlHelper and “ActionLink” is a one extension method for HtmlHelper. HtmlHelper decrease your coding.

List of HtmlHelper methods and Html content :

 

                HtmlHelper

                         Html Contant

@Html.ActionLink(“Index”,”Index”,”Home”)

<a href=”Home/Index”>Index</a>

@Html.Label

<label for=”Username”>Username</label>

@Html.TextBox(“Username”)

<Index type=”text” name=”Username” id=”Username” value=””/>

@Html.Password(“Password”)

<input type=”Password” name=”Password” id=”Password”>

@Html.RadioButton(“Gender”,”Male”)

<input type=”radio” value=”Male” name=”Gender” id=”Gender”/>

@Html.DropDownList(“profession”,new SelectList(ViewBag.profession, “value”,”text”)) 

<select name=”profession” id=”profession”>

          <option value=”student”>student</option>

          <option value=”Employed”> Employed</option>

</select>

@Html.TextArea(“message”)

<textarea name=”message” id=”message”></textarea>

@Html.CheckBox(“IAgree”)

<input type=”checkbox” name=”IAgree” id=”IAgree/>”

@Html.Hidden(“UserId”)

<Input type=”hidden” name=”UserId” id=”UserId” value=””>

create view using html helpers :

Step : 1

  • Open Visual studio
  • Click on “File”>New>Project>Visual c#>Web> then provide your project name> then select “ok”> then click “MVC”>ok.
  • Create new controller “controller name like as HtmlHelper” 

Add view  “view name like as Index”

Step : 2

       Example :1 write simple Html code for inputbox.

  <Index type=”text” name=”Username” id=”Username” value=””/>
  • write code use htmlhelper for inputbox.
 @Html.TextBox(“Username”)
  • run this project you see same inputbox, Why are the benefits of HtmlHelpe? HtmlHelpe has a lot of advantages, one of them reduces your coding.

       Example :2 Now create a RegisterForm use htmlhelper.

           step:1

            Index.cshtml

<br /><br /><br />
@using(Html.BeginForm())
{
    <form>
        <ul>
            <li>
                @Html.Label("UserId")
                @Html.Hidden("UserId")
            </li>
            <li>
                @Html.Label("Username")
                @Html.TextBox("Username")
            </li>
            <li>
                @Html.Label("Passowrd")
                @Html.Password("Password")
            </li>
            <li>
                @Html.Label("Gender")
                @Html.RadioButton("Gender","Male") Male
                @Html.RadioButton("Gender", "Female") Female
            </li>
            <li>
                @Html.Label("Profession")
                @Html.DropDownList("Profession",new SelectList(ViewBag.Profession,"Text","Value"))
            </li>
            <li>
                @Html.Label("I Agree")
                @Html.CheckBox("IAgree")
            </li>
            <li>
                @Html.Label("About yourself")
                @Html.TextArea("AboutYourSelf")
            </li>
        </ul>
        <button>Submit</button>
    </form>
}

           step:2 Write this code in your Controller for DropDownList [if you don't understand it,you can see the video].

              HtmlHelperController.cs

public ActionResult Index()
        {
            List<SelectListItem> Item = new List<SelectListItem>();
            Item.Add(new SelectListItem { Text = "Student", Value = "Student", Selected = false });
            Item.Add(new SelectListItem { Text = "Employee", Value = "Employee", Selected = false });
            ViewBag.Profession = Item;
            return View();
        }

Now run the project.