Your SlideShare is downloading. ×
0
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" ...
4	But thesehardcodedforms havesome issues›  Rigid›  Lots   of typing
5	HTML helpers write the HTML for us                 Pros                         Cons›  Easily  changed               ›...
6	Start your forms with BeginForm()@{Html.BeginForm("Edit", "Person", FormMethod.Post);}!  <input id="EmployeeId" name="Em...
7	If BeginForm() goes out of scope, itdraws the </form>, so use using@using (Html.BeginForm("Edit","Person",FormMethod.Pos...
8	Good HTML Helpers›  CheckBox›  DropDownList›  Hidden›  ListBox›  Password›  RadioButton›  TextArea   —multi-line›...
9	Using HtmlHelpers@using (Html.BeginForm()) {!   @Html.HiddenFor(model => model.EmployeeId)!   <div>!     @Html.Label("La...
10	Better HTML Helpers›  Html.TextBoxFor()›  Html.TextAreaFor()›  Html.DropDownListFor()›  Html.CheckboxFor()›  Html....
11	Using improved HtmlHelpers@using (Html.BeginForm()) {!   @Html.HiddenFor(model => model.EmployeeId)!   <div>!     @Html...
12	The Lambdas eliminate magic strings›  Instead          of this:Html.TextBox("FristName"); // Whoops!!›  We can do thi...
13	We can also specify default valuesand HTML attributes with overloadsHtml.TextBoxFor(!  p => p.Firstname, !  "Harold", !...
14	Best - EditorFor()›  Renders          the proper  affordance based on the  datatype  ›  Checkbox    for booleans  › ...
15	Heres how it would look withHtml.EditorFor()@using (Html.BeginForm()) {!   @Html.HiddenFor(model => model.EmployeeId)! ...
17	DropDownListFor(column, options)›  You have to provide its options as a SelectList object›  These usually come in fro...
Hands-on select lists
19	Links are done with ActionLink›  Syntax:Html.ActionLink( string WhatYouWantToAppear, string Action, string Controller,...
20	Conclusion›  HtmlHelpers              allow us to render HTML in a way that is  more robust, modifiable, and easier to...
21	Further study›  Markup   rendered by each HTML Helper  ›  http://www.gxclarke.org/2010/10/markup-rendered-by-    aspn...
Upcoming SlideShare
Loading in...5
×

14 html helpers

4,276

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
4,276
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
124
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×