HTML Helper In ASP.NET MVC

In MVC there is no server side control, we have to use HTML HELPER.

There are the following types of HTML HELPERS:

1. Non Strongly Typed Html Helper
2. Strongly Typed Html Helper
3. Custom Helper

1. Non Strongly Typed Html Helper

Html.TextBox is not strongly typed and it do not require a strongly typed view.

It is not bounded with Model and non-strongly typed html helper is independent of model kind of things.

2. Strongly Typed Html Helper

Html.TextBoxFor is strongly typed and it require a strongly typed view. It is bounded with Model property.

3. Custom Helper: You can design your own helper with.

Through the following charts, I had indirectly designed a form control for FRIEND entry for NON STRONGLY TYPED.

CONTROL NAME	NON STRONGLY TYPED HTML HELPERS
CheckBox	@Html.CheckBox(“chkMarried”,0) HTML RENDER: <input id="chkMarried" name="chkMarried" type="checkbox" value="true" /><input name="chkMarried" type="hidden" value="false" />
Drop Down List	@Html.DropDownList(“ddlEducationLevel”, new SelectList(new[]{“SSC”,”HSC”,”Graducation”,”Post Graducation”})) HTML RENDER: <select id="ddlEducationLevel" name="ddlEducationLevel"><option>SSC</option> <option>HSC</option> <option>Graduation</option> <option>Post Graducation</option> </select>
HiddenField	@Html.Hidden(“hdnDateTime”,@DateTIme.Now.Tostring()) HTML RENDER: <input id="hdnDateTime" name="hdnDateTime" type="hidden" value="01/09/16 20:47:46" />
Label	@Html.Label(“lblFriendName”,”Friend Name”) HTML RENDER: <label for="lblFriendName">Name</label>
ListBox	@{ var items = new List<SelectListItem>{ new SelectListItem {Value = "1", Text = "Visual Foxpro"}, new SelectListItem {Value = "2", Text = "Visual Basic"}, new SelectListItem {Value = "3", Text = "C#", Selected = true}, new SelectListItem {Value = "4", Text = "Javascript", Selected = true}, new SelectListItem {Value = "5", Text = "Java"} }; } @Html.ListBox(“lstLanguageKnow”, items) HTML RENDER: <select id="lstLanguageKnow" multiple="multiple" name="lstLanguageKnow"><option value="1">Visual Foxpro</option> <option value="2">Visual Basic</option> <option selected="selected" value="3">C#</option> <option selected="selected" value="4">Javascript</option> <option value="5">Java</option> </select>
Password	@Html.Password(“txtPassword”) HTML RENDER: <input id="txtPassword" name="txtPassword" type="password" />
Radio Button	Male: @Html.RadioButton(“rbGender”,”Male”) Female:@Html.RadioButton(“rbGender”,”Female”) HTML RENDER: Male: <input id="rbGender" name="rbGender" type="radio" value="Male" /> Female: <input id="rbGender" name="rbGender" type="radio" value="Female" />
TextArea	@Html.TextArea(“txtAddress”) HTML RENDER: <textarea cols="20" id="txtAddress" name="txtAddress" rows="2"> </textarea>
TextBox	@Html.TextBox(“txtName”) HTML RENDER: <input id="txtName" name="txtName" placeholder="Enter Friend Name" type="text" value="" />

Output



VIEW CODE: new.cshtml

@{
    ViewBag.Title = "New";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>New Friend</h2>
<form method="post">

    <table>
        <tr>
            <td>
                @Html.Label("lblName", "Name")
                @Html.Hidden("hdnDateTime", @DateTime.Now.ToString())
            </td>
            <td>
                @Html.TextBox("txtName", "", new { placeholder = "Enter Friend Name" })
            </td>
        </tr>
        <tr>
            <td>
                @Html.Label("lblAddress", "Address")
            </td>
            <td>
                @*@Html.TextArea("txtAddress", "", 4, 30, new {placeholder="Enter Your Address"})*@
                @Html.TextArea("txtAddress")
            </td>
        </tr>
        <tr>
            <td>
                @Html.Label("lblPlace", "Place")
            </td>
            <td>
                @Html.TextBox("txtPlace")
            </td>
        </tr>

        <tr>
            <td>
                @Html.Label("lblMobile", "Mobile Number")
            </td>
            <td>
                @Html.TextBox("txtMobile")
            </td>
        </tr>
        <tr>
            <td>
                @Html.Label("lblGender", "Gender")
            </td>
            <td>
               Male: @Html.RadioButton("rbGender", "Male", new {value="Male"})
               Female: @Html.RadioButton("rbGender", "Female",new {value="Female"})
            </td>
        </tr>

        <tr>
            <td>
                @Html.Label("lblMarital", "Is Married")
            </td>
            <td>
                @Html.CheckBox("chkMarried", 0)
            </td>
        </tr>
        <tr>
            <td>
                @Html.Label("lblEducationLevel", "Education Level")
            </td>
            <td>
                @Html.DropDownList("ddlEducationLevel", new SelectList(new[] { "SSC", "HSC", "Graduation", "Post Graducation" }))
            </td>
        </tr>

        <tr>
            <td>
                @Html.Label("lblLanguageKnown", "Language Known")
            </td>
            <td>
                @{
                    var items = new List<SelectListItem>{
        new SelectListItem {Value = "1", Text = "Visual Foxpro"},
        new SelectListItem {Value = "2", Text = "Visual Basic"},
        new SelectListItem {Value = "3", Text = "C#", Selected = true},
        new SelectListItem {Value = "4", Text = "Javascript", Selected = true},
        new SelectListItem {Value = "5", Text = "Java"}
    };
                }

                @Html.ListBox("lstLanguageKnow", items)
            </td>
        </tr>
        <tr>
            <td>
                @Html.Label("lblPassword", "Password")
            </td>
            <td>
                @Html.Password("txtPassword")
            </td>
        </tr>
    </table>
    <br />
    <input type="submit"  id="submit" value="Submit" />

</form>

In the next article, I will explain about Strongly Typed HTML HELPER.