In MVC there is no server side control, we have to use HTML HELPER.
There are the following types of HTML HELPERS:
- Non Strongly Typed Html Helper
- Strongly Typed Html Helper
- 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.