14 html helpers

  • 3,742 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
3,742
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
94
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML Helpers Writing HTML without having to write HTML1
  • 2. Browsers get data to the serverthrough form posts
  • 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 But thesehardcodedforms havesome issues›  Rigid›  Lots of typing
  • 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 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 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 Good HTML Helpers›  CheckBox›  DropDownList›  Hidden›  ListBox›  Password›  RadioButton›  TextArea —multi-line›  TextBox
  • 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 Better HTML Helpers›  Html.TextBoxFor()›  Html.TextAreaFor()›  Html.DropDownListFor()›  Html.CheckboxFor()›  Html.RadioButtonFor()›  Html.ListBoxFor()›  Html.PasswordFor()›  Html.HiddenFor()›  Html.LabelFor()
  • 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 The Lambdas eliminate magic strings›  Instead of this:Html.TextBox("FristName"); // Whoops!!›  We can do this:Html.TextBoxFor(p => p.FirstName); // Woot!!
  • 13. 13 We can also specify default valuesand HTML attributes with overloadsHtml.TextBoxFor(! p => p.Firstname, ! "Harold", ! new { class = "Important" }!);!
  • 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 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. 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. Hands-on select lists
  • 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. 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. 21 Further study›  Markup rendered by each HTML Helper ›  http://www.gxclarke.org/2010/10/markup-rendered-by- aspnet-mvc-html.html