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

Run

VIEW CODE: new.cshtml

  1. @{  
  2.     ViewBag.Title = "New";  
  3.     Layout = "~/Views/Shared/_Layout.cshtml";  
  4. }  
  5.   
  6. <h2>New Friend</h2>  
  7. <form method="post">  
  8.   
  9.     <table>  
  10.         <tr>  
  11.             <td>  
  12.                 @Html.Label("lblName""Name")  
  13.                 @Html.Hidden("hdnDateTime", @DateTime.Now.ToString())  
  14.             </td>  
  15.             <td>  
  16.                 @Html.TextBox("txtName"""new { placeholder = "Enter Friend Name" })  
  17.             </td>  
  18.         </tr>  
  19.         <tr>  
  20.             <td>  
  21.                 @Html.Label("lblAddress""Address")  
  22.             </td>  
  23.             <td>  
  24.                 @*@Html.TextArea("txtAddress""", 4, 30, new {placeholder="Enter Your Address"})*@  
  25.                 @Html.TextArea("txtAddress")  
  26.             </td>  
  27.         </tr>  
  28.         <tr>  
  29.             <td>  
  30.                 @Html.Label("lblPlace""Place")  
  31.             </td>  
  32.             <td>  
  33.                 @Html.TextBox("txtPlace")  
  34.             </td>  
  35.         </tr>  
  36.   
  37.         <tr>  
  38.             <td>  
  39.                 @Html.Label("lblMobile""Mobile Number")  
  40.             </td>  
  41.             <td>  
  42.                 @Html.TextBox("txtMobile")  
  43.             </td>  
  44.         </tr>  
  45.         <tr>  
  46.             <td>  
  47.                 @Html.Label("lblGender""Gender")  
  48.             </td>  
  49.             <td>  
  50.                Male: @Html.RadioButton("rbGender""Male"new {value="Male"})  
  51.                Female: @Html.RadioButton("rbGender""Female",new {value="Female"})  
  52.             </td>  
  53.         </tr>  
  54.   
  55.         <tr>  
  56.             <td>  
  57.                 @Html.Label("lblMarital""Is Married")  
  58.             </td>  
  59.             <td>  
  60.                 @Html.CheckBox("chkMarried", 0)  
  61.             </td>  
  62.         </tr>  
  63.         <tr>  
  64.             <td>  
  65.                 @Html.Label("lblEducationLevel""Education Level")  
  66.             </td>  
  67.             <td>  
  68.                 @Html.DropDownList("ddlEducationLevel"new SelectList(new[] { "SSC""HSC""Graduation""Post Graducation" }))  
  69.             </td>  
  70.         </tr>  
  71.   
  72.         <tr>  
  73.             <td>  
  74.                 @Html.Label("lblLanguageKnown""Language Known")  
  75.             </td>  
  76.             <td>  
  77.                 @{  
  78.                     var items = new List<SelectListItem>{  
  79.         new SelectListItem {Value = "1", Text = "Visual Foxpro"},  
  80.         new SelectListItem {Value = "2", Text = "Visual Basic"},  
  81.         new SelectListItem {Value = "3", Text = "C#", Selected = true},  
  82.         new SelectListItem {Value = "4", Text = "Javascript", Selected = true},  
  83.         new SelectListItem {Value = "5", Text = "Java"}  
  84.     };  
  85.                 }  
  86.   
  87.                 @Html.ListBox("lstLanguageKnow", items)  
  88.             </td>  
  89.         </tr>  
  90.         <tr>  
  91.             <td>  
  92.                 @Html.Label("lblPassword""Password")  
  93.             </td>  
  94.             <td>  
  95.                 @Html.Password("txtPassword")  
  96.             </td>  
  97.         </tr>  
  98.     </table>  
  99.     <br />  
  100.     <input type="submit"  id="submit" value="Submit" />  
  101.   
  102. </form>  
In the next article, I will explain about Strongly Typed HTML HELPER.