HTML Helpers Writing HTML without having to write HTML

1

Browsers get data to the server through form posts

We created forms the explicit way <form action="/Person/Edit" method="post"> ! <input id="EmployeeId" name="EmployeeId" type="hidden" value="1" />! <div>!

<label for="LastName">Last Name</label>! <input id="LastName" name="LastName" type="text" value="Davolio" />! </div>! <div>! <label for="FirstName">First Name</label>! <input id="FirstName" name="FirstName" type="text" value="Nancy" />!

</div>! <div>! <label for="BirthDate">BirthDate</label>! <input name="BirthDate" type="text" value="12/8/1948" />! </div>! <input type="submit" value="Save" />!

</form>!

3

But these hardcoded forms have some issues � Rigid � Lots of typing

4

HTML helpers write the HTML for us Pros

�  Easily changed �  Universally changed �  Intellisense �  More consistent �  More abstract

�  No loops to populate dropdowns

�  Security checks �  XSS (A2) �  Injection flaws (A1)

�  Built-in support for validation

Cons �  Overhead (insignificant) �  Some limitations in the HTML

generated �  Harder to sync with jQuery

selectors

5

Start your forms with BeginForm() @{Html.BeginForm("Edit", "Person", FormMethod.Post);}! <input id="EmployeeId" name="EmployeeId" type="hidden" value="1" />! <div>! <label for="LastName">Last Name</label>! <input id="LastName" name="LastName" type="text" value="Davolio" />! </div>! <div>! <label for="FirstName">First Name</label>! <input id="FirstName" name="FirstName" type="text" value="Nancy" />! </div>! <div>! <label for="BirthDate">BirthDate</label>! <input name="BirthDate" type="text" value="12/8/1948" />! </div>! <input type="submit" value="Save" />!@{Html.EndForm();}!

6

If BeginForm() goes out of scope, it draws the </form>, so use using @using (Html.BeginForm("Edit","Person",FormMethod.Post)) {! <input id="EmployeeId" name="EmployeeId" type="hidden" value="1" />! <div>! <label for="LastName">Last Name</label>! <input id="LastName" name="LastName" type="text" value="Davolio" />! </div>! <div>! <label for="FirstName">First Name</label>! <input id="FirstName" name="FirstName" type="text" value="Nancy" />! </div>! <div>! <label for="BirthDate">BirthDate</label>! <input name="BirthDate" type="text" value="12/8/1948" />! </div>! <input type="submit" value="Save" />!}!

7

Good HTML Helpers � CheckBox � DropDownList � Hidden � ListBox � Password � RadioButton � TextArea —multi-line � TextBox

8

Using HtmlHelpers @using (Html.BeginForm()) {! @Html.HiddenFor(model => model.EmployeeId)! <div>! @Html.Label("Last Name")! @Html.TextBox("LastName", Model.LastName)! </div>! <div>! @Html.Label("First Name")! @Html.TextBox("FirstName", Model.FirstName)! </div>! <div>! @Html.Label("BirthDate")! @Html.TextBoxFor(model => model.BirthDate)! </div>! <input type="submit" value="Save" />!}!

9

Better HTML Helpers � Html.TextBoxFor() � Html.TextAreaFor() � Html.DropDownListFor() � Html.CheckboxFor() � Html.RadioButtonFor() � Html.ListBoxFor() � Html.PasswordFor() � Html.HiddenFor() � Html.LabelFor()

10

Using improved HtmlHelpers @using (Html.BeginForm()) {! @Html.HiddenFor(model => model.EmployeeId)! <div>! @Html.LabelFor(model => model.LastName)! @Html.TextBoxFor(model => model.LastName)! </div>! <div>! @Html.LabelFor(model => model.FirstName)! @Html.TextBoxFor(model => model.FirstName)! </div>! <div>! @Html.LabelFor(model => model.BirthDate)! @Html.TextBoxFor(model => model.BirthDate)! </div>! <input type="submit" value="Save" />!}!

11

The Lambdas eliminate magic strings �  Instead of this: Html.TextBox("FristName"); // Whoops!!� We can do this: Html.TextBoxFor(p => p.FirstName); // Woot!!

12

We can also specify default values and HTML attributes with overloads Html.TextBoxFor(! p => p.Firstname, ! "Harold", ! new { class = "Important" }!);!

13

Best - EditorFor() � Renders the proper

affordance based on the datatype �  Checkbox for booleans �  Selects for nullable booleans

(true|false|null) �  Textboxes for everything else

� And it can be coerced to create �  passwords

(DataType.Password) �  Textareas

(DataType.MultiLineText)

14

Here's how it would look with Html.EditorFor() @using (Html.BeginForm()) {! @Html.HiddenFor(model => model.EmployeeId)! <div>! @Html.LabelFor(model => model.LastName)! @Html.EditorFor(model => model.LastName)! </div>! <div>! @Html.LabelFor(model => model.FirstName)! @Html.EditorFor(model => model.FirstName)! </div>! <div>! @Html.LabelFor(model => model.BirthDate)! @Html.EditorFor(model => model.BirthDate)! </div>! <input type="submit" value="Save" />!}!

15

DropDownListFor(column, options) � You have to provide its options as a SelectList object � These usually come in from the controller: myVM.PaymentMethods = GetPayMethodsAsList();!return View(myVM);!

� Then in the view we can draw the dropdown: @Html.DropDownListFor(! o => o.PaymentMethod,! new SelectList(! Model.PaymentMethods, //List of all options! "Id", //The property we want to pass back! "Description" //Property the user should see!));!

17

Hands-on select lists

Links are done with ActionLink � Syntax: Html.ActionLink( string WhatYouWantToAppear, string Action, string Controller, object RouteArguments, object HtmlAttributes); <li>@Html.ActionLink("Home", "Index", "Home")</li>!<li>@Html.ActionLink("Show product details", ! "Details", "Product", new { ID = "42" }, ! new { class = "ProductDetails", data-id = "42")</li>!

19

Conclusion � HtmlHelpers allow us to render HTML in a way that is

more robust, modifiable, and easier to code �  Html.Textbox(), et. al. are good �  Html.TextboxFor(), et. al. are better �  Html.EditorFor() is best

� BeginForm draws a form � ActionLink draws hyperlinks � DropDownListFor needs a SelectList of options

20

Further study � Markup rendered by each HTML Helper

�  http://www.gxclarke.org/2010/10/markup-rendered-by-aspnet-mvc-html.html

21