14 html helpers
DESCRIPTION
TRANSCRIPT
![Page 1: 14 html helpers](https://reader034.vdocuments.net/reader034/viewer/2022052321/54807e52b4af9faf158b5dbb/html5/thumbnails/1.jpg)
HTML Helpers Writing HTML without having to write HTML
1
![Page 2: 14 html helpers](https://reader034.vdocuments.net/reader034/viewer/2022052321/54807e52b4af9faf158b5dbb/html5/thumbnails/2.jpg)
Browsers get data to the server through form posts
![Page 3: 14 html helpers](https://reader034.vdocuments.net/reader034/viewer/2022052321/54807e52b4af9faf158b5dbb/html5/thumbnails/3.jpg)
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
![Page 4: 14 html helpers](https://reader034.vdocuments.net/reader034/viewer/2022052321/54807e52b4af9faf158b5dbb/html5/thumbnails/4.jpg)
But these hardcoded forms have some issues � Rigid � Lots of typing
4
![Page 5: 14 html helpers](https://reader034.vdocuments.net/reader034/viewer/2022052321/54807e52b4af9faf158b5dbb/html5/thumbnails/5.jpg)
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
![Page 6: 14 html helpers](https://reader034.vdocuments.net/reader034/viewer/2022052321/54807e52b4af9faf158b5dbb/html5/thumbnails/6.jpg)
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
![Page 7: 14 html helpers](https://reader034.vdocuments.net/reader034/viewer/2022052321/54807e52b4af9faf158b5dbb/html5/thumbnails/7.jpg)
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
![Page 8: 14 html helpers](https://reader034.vdocuments.net/reader034/viewer/2022052321/54807e52b4af9faf158b5dbb/html5/thumbnails/8.jpg)
Good HTML Helpers � CheckBox � DropDownList � Hidden � ListBox � Password � RadioButton � TextArea —multi-line � TextBox
8
![Page 9: 14 html helpers](https://reader034.vdocuments.net/reader034/viewer/2022052321/54807e52b4af9faf158b5dbb/html5/thumbnails/9.jpg)
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
![Page 10: 14 html helpers](https://reader034.vdocuments.net/reader034/viewer/2022052321/54807e52b4af9faf158b5dbb/html5/thumbnails/10.jpg)
Better HTML Helpers � Html.TextBoxFor() � Html.TextAreaFor() � Html.DropDownListFor() � Html.CheckboxFor() � Html.RadioButtonFor() � Html.ListBoxFor() � Html.PasswordFor() � Html.HiddenFor() � Html.LabelFor()
10
![Page 11: 14 html helpers](https://reader034.vdocuments.net/reader034/viewer/2022052321/54807e52b4af9faf158b5dbb/html5/thumbnails/11.jpg)
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
![Page 12: 14 html helpers](https://reader034.vdocuments.net/reader034/viewer/2022052321/54807e52b4af9faf158b5dbb/html5/thumbnails/12.jpg)
The Lambdas eliminate magic strings � Instead of this: Html.TextBox("FristName"); // Whoops!!� We can do this: Html.TextBoxFor(p => p.FirstName); // Woot!!
12
![Page 13: 14 html helpers](https://reader034.vdocuments.net/reader034/viewer/2022052321/54807e52b4af9faf158b5dbb/html5/thumbnails/13.jpg)
We can also specify default values and HTML attributes with overloads Html.TextBoxFor(! p => p.Firstname, ! "Harold", ! new { class = "Important" }!);!
13
![Page 14: 14 html helpers](https://reader034.vdocuments.net/reader034/viewer/2022052321/54807e52b4af9faf158b5dbb/html5/thumbnails/14.jpg)
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
![Page 15: 14 html helpers](https://reader034.vdocuments.net/reader034/viewer/2022052321/54807e52b4af9faf158b5dbb/html5/thumbnails/15.jpg)
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
![Page 16: 14 html helpers](https://reader034.vdocuments.net/reader034/viewer/2022052321/54807e52b4af9faf158b5dbb/html5/thumbnails/16.jpg)
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
![Page 17: 14 html helpers](https://reader034.vdocuments.net/reader034/viewer/2022052321/54807e52b4af9faf158b5dbb/html5/thumbnails/17.jpg)
Hands-on select lists
![Page 18: 14 html helpers](https://reader034.vdocuments.net/reader034/viewer/2022052321/54807e52b4af9faf158b5dbb/html5/thumbnails/18.jpg)
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
![Page 19: 14 html helpers](https://reader034.vdocuments.net/reader034/viewer/2022052321/54807e52b4af9faf158b5dbb/html5/thumbnails/19.jpg)
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
![Page 20: 14 html helpers](https://reader034.vdocuments.net/reader034/viewer/2022052321/54807e52b4af9faf158b5dbb/html5/thumbnails/20.jpg)
Further study � Markup rendered by each HTML Helper
� http://www.gxclarke.org/2010/10/markup-rendered-by-aspnet-mvc-html.html
21