Understanding HTML Helpers
An HTML Helper is just a method that returns a string. The string can represent any type of content that you want.
For example, you can use HTML Helpers to render standard HTML tags like HTML <input> and <img> tags.
You also can use HTML Helpers to render more complex content such as a tab strip or an HTML table of database data
The ASP.NET MVC framework includes the following set of standard HTML Helpers (this is not a complete list):
- Html.ActionLink()
- Html.BeginForm()
- Html.CheckBox()
- Html.DropDownList()
- Html.EndForm()
- Html.Hidden()
- Html.ListBox()
- Html.Password()
- Html.RadioButton()
- Html.TextArea()
- Html.TextBox()
| Html.BeginForm() Html.EndForm() | GET | · This serves as the regular output the HTML <form> element in our markup. · Can be used in two ways. <% using (Html.BeginForm()) { %> <fieldset> <!-- Fields Omitted for Brevity --> <p> <input type="submit" value="Save" /> </p> </fieldset> <% } %> ------------------------------------------------------ <% Html.BeginForm(); %> <fieldset> <!-- Fields Omitted for Brevity --> <p> <input type="submit" value="Save" /> </p> </fieldset> <% Html.EndForm(); %> |
| Html.TextBox() | POST | · This serves as the regular output the <input type="text"/> element in our markup. <%= Html.TextBox("Title") %> This method above with single parameter – is enough to specify both the id/name attributes of the <input type="text"/> element to output, as well as the Model property (Model.Title) to populate the textbox value from. However as an alternative you can spedcify the property name as the second parameter. <%= Html.TextBox("Title", Model.Title)%> // An Alternate <%= Html.TextBox("EventDate", String.Format("{0:g}", Model.EventDate)) %> <%= Html.TextBox("Title", Model.Title, new { size0, @class="myclass" } )%> |
Below shows the View source (Right Column) generated by these helper methods.
| | <body> <div> <% using (Html.BeginForm()) { %> <label for="firstName">First Name:</label> <%= Html.TextBox("firstName")%> <label for="lastName">Last Name:</label> <%= Html.TextBox("lastName")%> <input type="submit" value="Register" /> <% } %> </div></body> The right side is the 'View Source' that gets generated based on the these HTML helper methods. | <body> <div> <form action="http://localhost:33102/" method="post"> <label for="firstName">First Name:</label> <input id="firstName" name="firstName" type="text" value="" /> <label for="lastName">Last Name:</label> <input id="lastName" name="lastName" type="text" value="" /> <input id="btnRegister" name="btnRegister" type="submit" value="Register" /> </form> </div></body> |
Generating HTML Helpers
Just create an extension method as below.
| | namespace MvcApplication1.Helpers{ public static class LabelExtensions { public static string Label(this HtmlHelper helper, string target, string text) { return String.Format("<label for='{0}'>{1}</label>", target, text); //Output - <label for="firstName">First Name:</label> } }} | <body> <div> <% using (Html.BeginForm()) { %> <%= Html.Label("firstName", "First Name:") %> <%= Html.TextBox("firstName")%> <% } %> </div></body> |
Thanks & Regards,
Arun Manglick || Senior Tech Lead
No comments:
Post a Comment