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

14 html helpers

on

  • 4,301 views

 

Statistics

Views

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

Actions

Likes
0
Downloads
87
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 14 html helpers Presentation Transcript

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