14 html helpers
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

14 html helpers

on

  • 4,519 views

 

Statistics

Views

Total Views
4,519
Views on SlideShare
4,519
Embed Views
0

Actions

Likes
0
Downloads
89
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

14 html helpers Presentation 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