14 html helpers

5,401 views
5,146 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
5,401
On SlideShare
0
From Embeds
0
Number of Embeds
108
Actions
Shares
0
Downloads
155
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

14 html helpers

  1. 1. HTML Helpers Writing HTML without having to write HTML1
  2. 2. Browsers get data to the serverthrough form posts
  3. 3. 3 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>!
  4. 4. 4 But thesehardcodedforms havesome issues›  Rigid›  Lots of typing
  5. 5. 5 HTML helpers write the HTML for us Pros Cons›  Easily changed ›  Overhead (insignificant)›  Universally changed ›  Some limitations in the HTML›  Intellisense generated›  More consistent ›  Harder to sync with jQuery›  More abstract selectors ›  No loops to populate dropdowns›  Security checks ›  XSS (A2) ›  Injection flaws (A1)›  Built-in support for validation
  6. 6. 6 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();}!
  7. 7. 7 If BeginForm() goes out of scope, itdraws 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" />!}!
  8. 8. 8 Good HTML Helpers›  CheckBox›  DropDownList›  Hidden›  ListBox›  Password›  RadioButton›  TextArea —multi-line›  TextBox
  9. 9. 9 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" />!}!
  10. 10. 10 Better HTML Helpers›  Html.TextBoxFor()›  Html.TextAreaFor()›  Html.DropDownListFor()›  Html.CheckboxFor()›  Html.RadioButtonFor()›  Html.ListBoxFor()›  Html.PasswordFor()›  Html.HiddenFor()›  Html.LabelFor()
  11. 11. 11 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" />!}!
  12. 12. 12 The Lambdas eliminate magic strings›  Instead of this:Html.TextBox("FristName"); // Whoops!!›  We can do this:Html.TextBoxFor(p => p.FirstName); // Woot!!
  13. 13. 13 We can also specify default valuesand HTML attributes with overloadsHtml.TextBoxFor(! p => p.Firstname, ! "Harold", ! new { class = "Important" }!);!
  14. 14. 14 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)
  15. 15. 15 Heres how it would look withHtml.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" />!}!
  16. 16. 17 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. 17. Hands-on select lists
  18. 18. 19 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. 19. 20 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. 20. 21 Further study›  Markup rendered by each HTML Helper ›  http://www.gxclarke.org/2010/10/markup-rendered-by- aspnet-mvc-html.html

×