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. }
  6. <h2>New Friend</h2>
  7. <form method="post">
  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>
  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>
  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>
  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. }
  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" />
  102. </form>
In the next article, I will explain about Strongly Typed HTML HELPER.