Exam Objectives
Quick Overview of Training Materials
Exam Ref 70-486: Developing ASP.NET MVC 4 Web Applications - Objective 2.1
Static vs. Dynamic Content
MSDN - HtmlHelper, HtmlHelperExtensions
Previous blogs relevant to objective:
HTML: Basic HTML, HTML Forms
CSS: Style Layout, Style Text, Selectors, Animation, Cascading
Static vs. Dynamic Content
MSDN - HtmlHelper, HtmlHelperExtensions
Previous blogs relevant to objective:
HTML: Basic HTML, HTML Forms
CSS: Style Layout, Style Text, Selectors, Animation, Cascading
Basic HTML and CSS are covered as part of the 70-480 exam, so much of this content should be review for anyone whose passed that exam already. If that isn't you, I'd suggest reviewing my previous posts on the subjects. I'm not going to spend too much time rehashing the basics, instead I'll look at what is specific to MVC and Razor.
With regard to HTML page structure, the one thing unique about ASP.NET MVC is that the <body> and <head> tags live in the Views/Shared/_Layout.cshtml file. A future post will cover Razor in more depth.
Dynamic Content
Dynamic content in a web page is generated at the time the page is requested. In MVC, page requests, or Views, are generated based on the state of the Model they represent. Because views are consumed by the browser as HTML, it is necessary to generate the appropriate HTML representation of model state, which is easily done using the HtmlHelper class (and the HtmlHelperExtensions class). Mind that using helpers isn't required, per se. It is entirely possible to write logic into your views that will generate HTML without the use of helpers. However, in many cases using HtmlHelpers makes the code cleaner, more easily understood, and more maintainable.
Examples of HtmlHelpers
Tables:
- DisplayNameFor - outputs a string of the propertyname
- DisplayFor - outputs a string of the propertyvalue
- ActionLink - creates an anchor tag <a>. In this case, it has a string for a name, another for the controller action it is pointed at, and the last is a parameter object. For Dinner with Id = 1, the action link for "Edit" would point to "Dinner/Edit/1".
<table class="table"> <tr> <th> @Html.DisplayNameFor(model => model.Title) </th> <th> @Html.DisplayNameFor(model => model.EventDate) </th> <th></th> </tr> @foreach (var item in Model) { <tr class="dinnerrow" data-dinnerId="@item.DinnerId"> <td class="dinnertitle"> @Html.DisplayFor(modelItem => item.Title) </td> <td> @Html.DisplayFor(modelItem => item.EventDate) </td> <td> @Html.ActionLink("Edit", "Edit", new { id=item.DinnerId }) | @Html.ActionLink("Details", "Details", new { id=item.DinnerId }) | @Html.ActionLink("Delete", "Delete", new { id=item.DinnerId }) </td> </tr> } </table>
Forms:
- AntiForgeryToken - Includes a hidden field with a unique token to protect against CSRF attack.
- ValidationSummary - Displays any errors related to the model.
- HiddenFor - Creates an input element of type hidden for the selected property
- LabelFor - Creates a label element for the property
- EditorFor - Creates an appropriate editor for the object. Below it is used by property, but it is also possible to pass in the whole model and it will generate input and label elements for every primitive property on the object, along with validation.
- TextAreaFor - Creates an input of type textarea for the property
- ValidationMessageFor - Creates a span that contains a message that is displayed if validation fails
@using (Html.BeginForm()) { @Html.AntiForgeryToken() <div class="form-horizontal"> <h4>Dinner</h4> <hr /> @Html.ValidationSummary(true) @Html.HiddenFor(model => model.DinnerId) <div class="form-group"> @Html.LabelFor(model => model.Title, new { @class = "col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Title) @Html.ValidationMessageFor(model => model.Title) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.EventDate, new { @class = "col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.EventDate) @Html.ValidationMessageFor(model => model.EventDate) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.EventTime, new { @class = "col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.EventTime) @Html.ValidationMessageFor(model => model.EventTime) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Description, new { @class = "col-md-2" }) <div class="col-md-10"> @Html.TextAreaFor(model => model.Description) @Html.ValidationMessageFor(model => model.Description) </div> </div>
Not Pictured:
- ListBoxFor, DropDownListFor, EnumDropDownListFor - Create a select element based on a property. Useful for things like State selector in an address. Example here.
The behavior of helpers can be manipulated using data annotations on class definitions. Two very usful annotations are [Required], which adds the "required" attribute to the input field and will prompt ValidationMessageFor to generate a message to the effect of "this field is required stupid", and [Display(Name="Pretty Name")], which will allow you to specify nicer names for things like LabelFor and DisplayNameFor.
No comments:
Post a Comment