14 html helpers
-
Upload
rap-payne -
Category
Technology
-
view
4.712 -
download
1
description
Transcript of 14 html helpers
HTML Helpers Writing HTML without having to write HTML
1
Browsers get data to the server through form posts
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>!
3
But these hardcoded forms have some issues � Rigid � Lots of typing
4
HTML helpers write the HTML for us Pros
� Easily changed � Universally changed � Intellisense � More consistent � More abstract
� No loops to populate dropdowns
� Security checks � XSS (A2) � Injection flaws (A1)
� Built-in support for validation
Cons � Overhead (insignificant) � Some limitations in the HTML
generated � Harder to sync with jQuery
selectors
5
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();}!
6
If BeginForm() goes out of scope, it draws 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" />!}!
7
Good HTML Helpers � CheckBox � DropDownList � Hidden � ListBox � Password � RadioButton � TextArea —multi-line � TextBox
8
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" />!}!
9
Better HTML Helpers � Html.TextBoxFor() � Html.TextAreaFor() � Html.DropDownListFor() � Html.CheckboxFor() � Html.RadioButtonFor() � Html.ListBoxFor() � Html.PasswordFor() � Html.HiddenFor() � Html.LabelFor()
10
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" />!}!
11
The Lambdas eliminate magic strings � Instead of this: Html.TextBox("FristName"); // Whoops!!� We can do this: Html.TextBoxFor(p => p.FirstName); // Woot!!
12
We can also specify default values and HTML attributes with overloads Html.TextBoxFor(! p => p.Firstname, ! "Harold", ! new { class = "Important" }!);!
13
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)
14
Here's how it would look with Html.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" />!}!
15
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
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
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
Further study � Markup rendered by each HTML Helper
� http://www.gxclarke.org/2010/10/markup-rendered-by-aspnet-mvc-html.html
21