Click to edit

Master subtitle
style

05 | Customizing Views
Jon Galloway | Development Platform Evangelist
Christopher Harrison | Content Development
Manager

Changing the Outlook on Views

How Views are Found
Views and Models
Razor Syntax
HtmlHelper
Layouts

Click to edit
Master subtitle
style

How Views are Found

Finding Views
It just works Jon Galloway
Views reside in the Views folder
Subfolders
Name of the controller
Shared

View Resolution in Action

public class AlbumController : Controller
{
public ActionResult Index()
{
return View();
}
}

1. Look for a view named Index in a folder named

Album
2. Look for a view named Index in a folder named
Shared
3. Error

View Resolution in Action Again

public class AlbumController : Controller
{
public ActionResult Index()
{
return View("Default");
}
}

1. Look for a view named Default in a folder named

Album
2. Look for a view named Default in a folder named
Shared
3. Error

DEMO
View Resolution

Click to edit
Master subtitle
style

Views and Models

Views and Models

Views have a Model property
Type is set by @model declaration
Note the CaSiNg
Advanced note
Views do not need to have a typed model
Useful for creating dynamic views

Click to edit
Master subtitle
style

Razor Syntax

Razor Syntax
@ indicates server-side code
MVC runtime determines meaning of @ based on
context
<a href="mailto:me@demo.com">

Use @@ for @

generates appropriate HTML

DEMO
Razor Syntax

Click to edit
Master subtitle
style

HtmlHelper

HtmlHelper
Helps generate HTML
Uses attributes on model
Display names
Formatting
Input elements

HtmlHelper and Lambdas

@Html.DisplayFor(model => model.Name)

MVC uses reflection

Reflection isnt evil!

Helper methods need the property, not the value

@Html.DisplayFor(Model.Name) would pass the value of

Name

Consider @Html.DisplayFor(m => m.Name) for easier

reading

Displaying Data
DisplayNameFor
DisplayName attribute
Display attribute, Name property

DisplayFor
Uses DisplayFormat (if applicable)

DEMO
Displaying Data

Creating Forms
HtmlHelper.BeginForm()
Why not just use a form element?
URLs can always change

Parameters
Action name
Controller name
Form method
Get
Post

Accepting Input
LabelFor
Creates a label element
Useful for touch

InputFor
Creates input element
Uses HTML5 based on DataType attribute

DEMO
Basic Forms

Validation
ValidationMessageFor
Display error message next to text box

ValidationSummary
Display all error messages in one location

DEMO
Adding Validation

Click to edit
Master subtitle
style

Layouts

My Music Store
New This Week!
Deleted Smiths Singles
Original - not rereleased
- Frank Zappa Albums

Welcome!
Feel free to look around.
All records are available for sale.

Popular Items
The Three EPs
The Beta Band
I Just Called to Say I
Love You
Stevie Wonder

FAQs
Q: Do you have soul?
A: That all depends.

Organization and Consistency

Use layouts to ensure consistent page structure
Layout methods
RenderBody()
Renders anything in a view not in a section
RenderSection(name, required)
Allow views to add specific sections

Scripts
Banners
Sidebars
Use @section name
Note the casing

to create section in view

DEMO
Using Layouts

2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Office, Azure, System Center, Dynamics and other product names are or may be registered
trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of
Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a
commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT
MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.