MVC 4
Spindustry Training
Cont.
• MVC separates the user interface of an
application into three main aspects:
– The Model
– The View
– The Controler
The Model
• A set of classes that describes the data you’re
working with as well as the business rules for
how the data can be changed and
manipulated
The View
• Defines how the application’s UI will be
displayed
The Controller
• A set of classes that handles communication
from the user, overall application flow, and
application-specific logic.
MVC as Applied to Web Frameworks
• Models:
– Represent domain objects that encapsulate:
•
•
•
•
data stored in a database
code to manipulate the data
code to enforce domain-specific business logic
Example: encapsulating Entity Framework
Cont.
• View:
– Template to dynamically generate HTML
• Controller:
– Class that manages the relationship between the
View and the Model
– It responds to user input, talks to the model, and
decides which view to render (if any).
A Pattern
• MVC is a pattern that can be applied to
different frameworks
• ASP.NET MVC
– The MVC pattern has been applied to ASP.NET.
This does not mean that it is the same as MVC
running in other places.
ASP.NET MVC 3
• 10 months after MVC 2
– The Razor view engine
– Support for .NET 4 Data Annotations
– Improved model validation
– Greater control and flexibility with support for
dependency resolution and global action filters
– Better JavaScript support with unobtrusive
JavaScript, jQuery Validation, and JSON binding
– Use of NuGet to deliver software and manage
dependencies throughout the platform
Razor View Engine
•
•
•
•
•
•
•
Code-focused templating for HTML generation
Compact, expressive, and fluid
Not a new language
Easy to learn
Works with any text editor
IntelliSense
No XML-like heavy syntax
ASP.NET MVC 4
• Features include:
– ASP.NET Web API
– Enhancements to the default project templates
– Mobile project template using jQuery Mobile
– Display Modes
– Task Support for Asynchronous Controllers
– Bundling and Minification
ASP.NET Web API
• Referred to as Web API
• A framework that offers the ASP.NET MVC
development style but is tailored to writing HTTP
services. (service-oriented design)
• Several MVC features have been adopted for
HTTP Service domain:
–
–
–
–
–
Routing
Model Binding and Validation
Filters
Scaffolding
Easy Unit Testability
Cont.
• Web API also adds a few new concepts and
features to the HTTP service development:
– HTTP programming model
– Action dispatching based on HTTP verbs
– Content negotiation
– Code-based configuration
ASP.NET MVC 5
• http://www.asp.net/mvc/mvc5
Enhancements to the default project
templates
Cont.
Display Modes
• A convention-based approach to allow
selecting different views based on the browser
making the request.
• Index.cshtml vs Index.Mobile.cshtml
• You can also register your own custom criteria.
• Index.WinPhone.cshtml
Bundling and Minification
•
•
•
•
Same as ASP.NET 4.5
Works on scripts and CSS
Minifies the request via several techniques
Compresses the size of CSS via several
techniques
• You can create custom bundles to contain
specific scripts and reference them with a
single URL
Cont.
Included Open Source Libraries
• Json.NET
– Included in MVC 4 as a part of the Web API to support
serializing data to JSON format allowing for:
•
•
•
•
•
•
•
•
•
Data contracts
Anonoymous types
Dynamic types
Dates
TimeSpans
Object reference presevation
Indenting
Camel casing
LINQ to JSON is also included along with automatic
conversion from JSON to XML
Cont.
• DotNetOpenAuth:
– Used to support OpenID and Oauth-based logins
•
•
•
•
Facebook
Microsoft
Google
Twitter
• MVC 4 also provides an OAuthWebSecurity
class
App_Start
Cont.
• AuthConfig.cs
– Used to configure security settings, including sites for
OAuth login.
• BundleConfig.cs
– Used to register bundles used by the bundling and
minification system. By default it inlcudes jQuery,
jQueryUI, jQuery valiation, Modernizr, and default CSS
references
• FilterConfig.cs:
– Used to register global MVC filters. By default the
HandlerErrorAttribute is registered. You can put other
filter registrations here.
Cont.
• Filters:
– An action filter is an attribute that you can apply to a
controller action -- or an entire controller -- that
modifies the way in which the action is executed. The
ASP.NET MVC framework includes several action
filters:
• OutputCache – This action filter caches the output of a
controller action for a specified amount of time.
• HandleError – This action filter handles errors raised when a
controller action executes.
• Authorize – This action filter enables you to restrict access to
a particular user or role.
Cont.
• RouteConfig.cs
– Contains routing
• WebApiConfig.cs
– Used to register Web API routes, as well as set any
additional Web API configuration settings
Open Source Release
• May 2012 the ASP.NET Web Stack open source
announcement marked the transition of ASP.NET MVC,
ASP.NET Web Pages, and ASP.NET Web API from open
source licensed code to fully open source projects.
• All code changes and issue tracking for these projects is
done in public code repositories, and these projects are
allowed to accept community code contributions if the
team agrees that the changes make sense.
• http://aspnetwebstack.codeplex.com/SourceControl/li
st/changesets
Installing MVC 4
• Visual Studio 2012 (included)
• Can be installed on:
– Visual Studio 2010 SP1
– Visual Web Developer 2010 Express SP1
• Can be installed side-by-side previous versions
of MVC
Templates
Cont.
• Internet Application:
– Contains the beginnings of an MVC web application, including
basic account management functions that use ASP.NET
Membership.
• Intranet Application:
– Added in ASP.NET MVC 3 tools update. Similar to the Internet
Application template, but the account management functions
use Windows accounts rather than ASP.NET Membership.
• Basic Template:
– Minimal. Has basic folders, CSS, and MVC application
infrastructure in place, but no more. You need to do work in
order to get the application to run. For experienced MVC
developers that don’t want the predefined items in the project.
Cont.
• Empty:
– Only has the assemblies and the basic folder structure
in place
• Mobile Application:
– Preconfigured with jQuery Mobile.
– Includes mobile visual themes, a touch-optimized UI,
and support for Ajax navigation
• Web API template:
– Similar to the Internet Application template but is
streamlined for Web API development
View Engines
• ASPX
• Razor
Testing
• Just check the box!
• You can add other Test Frameworks like NUnit,
MbUnit, or xUnit if you want to.
• http://msdn.microsoft.com/enus/library/dd381614.aspx
MVC Application Structure
• Controllers – Controller classes that handle
URL request go here (MVC 4, controller classes
can go anywhere)
• Models – Classes that represent and
manipulate data and business objects go here
• Views – UI template files that are responsible
for rendering output go here
• Scripts – JavaScript files and scripts go here
• Images – images used on your site go here
Cont.
• Content – CSS and other site content, other
than images and scripts, goes here
• Filters – Filter code goes here
• App_Data – Store data files that you read and
write to, here
• App_Start – Configuration code for features
like Routing, Bundling and Web API goes here
• ASP.NET MVC does not require this Directory
Structure.
Conventions
• “Convention over configuration”
• ASP.NET MVC is heavily convention-based
– Uses Directory-naming structure when resolving
view templates.
• Allows you to omit the location path when referencing
views from within a Controller class.
Cont.
• Each controller’s class name ends with Controller
– LegalController, LegalServicesController, HomeController
• One Views directory for all the views of your
application
• Views that controllers use live in a subdirectory of the
Views main directory and are named according to the
controller name(minus the Controller suffix)
– Views for the LegalController would live in /Views/Legal
• Reusable UI elements live in a similar structure, but in
a Shared directory in the Views folder
2. Controllers
Controller Basics
• Model View Controller:
– 1st Controller basics, then the other stuff.
– Have a look at the HomeController
• Responsible for deciding what will happen when you
browse to the homepage of the website.
The Controller’s Role
• Responsible for responding to user input,
making changes to the model in response to
user input if needed.
• Controllers are concerned with the flow of
the application, working with data that comes
in and providing data going out to the relevant
view.
Cont.
• The URL tells the routing mechanism (later
chapter) which controller class to instantiate
and which action method to call, and supplies
the required arguments to that method.
• The controller’s method then decides which
view to use, and that view then renders the
HTML.
• The controller’s method could return
something other than a view.
Cont.
• There is a relationship between the URL and
the METHOD on a controller class. Not a
relationship between the URL and a FILE on
the web server.
• MVC serves up the results of method calls, not
dynamically generated pages.
• (More about routing in later chapter)
IController
ControllerBase
Controller Class
Controller Actions
• Add additional methods for additional
scenarios.
– These methods are called Controller Actions or
Action Methods
• They respond to URL request, perform the appropriate
actions, and return a response back to the browser or
user that invoked the URL
MVC Request processing pipeline
Modifying the LegalServicesController
• The Browse and Details methods to cover additional
scenarios.
Observation
• Browsing to /LegalServices/Browse caused the
browse method of the LegalServicesController to
be executed.
– NO extra configuration was needed.
– This is routing in action. More later
• We created the controller class which was very
simple.
– Inherits from System.Web.Mvc.Controller
• We returned text to the browser without a model
or a view.
Cont.
• /LegalServices/Details/5 vs.
/LegalServices/Details?ID=5
• The default routing convention in MVC will
automatically pass the URL segment to you as
a parameter. The default parameter is named
“ID”
• If your parameter is not “ID” then use the “?”
or configure routing.
Oversimplified
• The previous example was not common and
was oversimplified.
– You will almost always use Views
– You will most often return ActionResult instead of
strings
– And routing is more complex that shown.
Basic Controllers Summary
• Controllers orchestrate the interactions of the
user, the model objects and the views.
• They are responsible for:
– responding to the user input
– Manipulating the appropriate model objects
– And then selecting the appropriate view to display
back to the user in response to the initial input
ActionResult
• Before talking about Views, let’s look at
ActionResults
– http://weblogs.asp.net/rajbk/archive/2010/05/03/actionresult-types-in-mvc2.aspx
– http://msdn.microsoft.com/en-us/library/system.web.mvc.actionresult(v=vs.100).aspx
ActionResult type
3. Views
The View
• The user’s first impression of your site starts
with the View
• Responsible for providing the user interface to
the user.
• The view transforms a model into a format
ready to be presented to the user.
• The view examines the model object and
transforms the contents to HTML
Cont.
• Note:
– Not all views render HTML, but HTML is the most
common case
– More info on alternate types of content later.
Example
Convention
• The Views directory contains a folder for your
controller, with the same name as the controller, but
without the controller suffix.
– [Take a look]
• HomeController has views in the Home directory
• Within the view folder (also called controller folder)
there’s a view file for each action method, named the
same as the action method.
• This is how views are associated to an action method.
• An action method can return a ViewResult via the
View() method.
View() Method
• When the view name isn’t specified, the ViewResult
returned by the action method applies a convention to
locate the view.
– It first looks for a view with the same name as the action within
the /Views/ControllerName directory. “Ex:
/views/home/Index.cshtml”
• The View() method is overloaded. You can supply a view
name to render a different view. “ex: View(“MyView”)”
– It will still look in the same directory, but will look for the
“MyView.cshtml” file.
• View(“~/Views/DifferentDirectory/Index.cshtml”)
– To get to a different directory, provide the full path to that
directory. You must provide the file extension as well. This
bypasses the internal lookup mechanism.
ViewData and ViewBag
• Passing information from the Controller to the View
• Data is passed from the controllers to the views via a ViewDataDictionary
(a specialized dictionary class) called ViewData.
– You can use standard dictionary syntax: ViewData[“CurrentTime”] =
DateTime.Now;
• ViewBag is a dynamic wrapper around ViewData
– The ViewBag leverages the C# 4 keyword “dynamic”
– The syntax is simplified:
• ViewBag.CurrentTime = DateTime.Now;
• Note:
– @Html.TextBox(“name”, ViewBag.Name) won’t compile because of the
dynamic type.
– Try:
– @Html.TextBox(“name”, (string)ViewBag.Name) or use ViewData[“Name”]
instead
– See page 51 Note
Exercise
• Create a simple
View
Strongly Typed Views
• You can add a collection or list of items to the
ViewBag:
Cont.
• Instead of adding a
collection or list of items to
the ViewBag and passing it
to the view, and then
iterating through it in the
view, the ViewData object
has a Model property that
can be set by using the
overload of the View()
method.
Cont.
Namespaces
• To make it easier to deal with the class names
you can add a namespace by using the
@using MyApp.Models (foldername)
• Or if used frequently add the namespace to
the web.config
View Models
• There can be only one model in the
ViewData.Model object
– What happens if you need additional items that
aren’t in the Model object?
– You could add that data to the ViewBag and be
done, but not everyone likes this
Cont
• View Model
– A better name would be (View Specific Model)
– Not MVVM
• Used to display a variety of data that comes from
different places. Aggregating data into a single
Model that can be used by a view.
• Ex: Case Info, Lawyer Info, and User Info that
needs to be displayed by a single View
• You could also just add the info to a ViewBag and
skip creating a View Model
– It would work but it wouldn’t be strongly typed
Cont.
The Add View dialog
•
•
•
•
•
•
•
•
View Name
View Engine
Create a strongly-typed view
Model Class
Scaffold Template
Reference Script Libraries
Create a partial view
Use a layout or master page
– ViewStart.cshtml
Scaffold Template
•
Empty
– Creates an empty view. Only the model type is specified using the @model syntax
•
Create
– Creates a view with a form for creating new instances of the model. Generates a label and
input field for each property of the model type
•
Delete
– Creates a view with a form for deleting existing instances of the model. Displays a label and
the current value for each property of the model
•
Details
– Creates a view that displays a label and the value for each property of the model type
•
Edit
– Creates a view with a form for editing existing instances of the model. Generates a label and
input field for each property of the model type.
•
List
– Creates a view with a table of model instances. Generates a column for each property of the
model type. Makes sure to pass an Ienumerable<yourModelType> to this view from your
action method. The view also contains links to actions for performing the create / edit /
delete operations
Reference Script Libraries
• This option is used to indicate whether the view
your are creating should include references to a
set of JavaScript files if it makes sense for the
view.
• By default, the _Layout.cshtml file references the
main jQuery library, but doesn’t reference the
jQuery Validation library or the Unobtrusive
jQuery Validation library.
• Check the box to reference these libraries when
doing Edit view, or Create view.
Create as a Partial View
• A partial view is not a full view.
• The layout option will be disabled if you select
this option
• No <html> tag or <head> tag at the top of the
view
Use a Layout or MasterPage
• Determines whether or not the view you are
creating will reference a layout (or master
page) or will be self-contained.
• For Razor view engines, specifiying a layout is
not necessary if you choose to use the default
layout because the layout is already specified
in the _ViewStart.cshtml file.
• This option can be used to override the
default Layout file.
Razor View Engine
• What is Razor?
– Introduced in ASP.NET MVC 3 and is the default
view engine moving forward
– Provides a clean, lightweight, simple view engine.
– Provides a streamlined syntax for expressing views
– Minimizes the amount of syntax and extra
characters.
Cont.
Cont.
• C# syntax has the .cshtml file extention
• VB - .vbhtml
• File Extension signals that the Razer parser
should be used
@
• Just type the @ symbol in the HTML and insert
some code
• The @ symbol is used to transition from markup
to code and sometimes to transition back to
markup
• @{}
• @(item).Models
• @@ to escape
• Use parenthesis whenever there is ambiguity
HTML Encoding
• Razor expressions are automatically HTML encoded.
• This is great for mitigating XSS
@{
string message = “<script>alert(‘hi there’);</script>”;
}
<span>@message</span>
This statement will not create an alert box
HTML.Raw()
• You can use the HTML.Raw() method to return
a string that Razor will not encode.
• You can also create an instance of HTMLString
Cont.
@Ajax.JavaScriptStringEncode
• Razor’s automatic HTML encoding is not sufficient for
displaying user input within JavaScript
• When setting variables in JavaScript to values supplied by the
user, it’s important to use JavaScript string encoding and not
just HTML encoding.
•
•
http://localhost:49693/home/escript?name=Jon\x3cscript\x3e%20alert(\x27pwnd\x27)%20\x3c/script\x3e
http://localhost:49693/home/escript?name=<script>alert('bob')</script>
Code blocks
• Ref: page 63
• @{}
Implicit Code Expression
• <Span>@Model.Message</span>
• Code expressions are evaluated and written to
the response.
• Code expressions are always HTML encoded
Explicit Code Expression
• <span>Product ID: @(PID)<span>
Unencoded Code Expression
• <span>@Html.Raw(model.Message)</span>
Code Block
@{
int x = 900;
string y = “bob is cool”;
}
• Blocks of code are simply sections of code that
are executed.
• Useful for declaring variables that you may
need in your code later
Combining Text and Markup
@foreach(var item in items){
<span>Item: @item.Name.</span>
}
Mixing Code and Plain Text
@if(showMessage){
<text>This is plain text</text>
}
@if (showMessage){
this is plain text.
}
Server-side comments
@* *@
Calling a Generic Method
@(Html.Amethod<TheType>())
Use parenthesis just like with explicit code
expressions.
Layouts
• Same purpose as MasterPages
• Maintain a consistent look and feel across
multiple views within your application
• Simpler syntax that MasterPages and greater
flexability
• Contains one or more placeholders that the
other views can provide content for.
Cont.
Cont.
• Looks like a standard Razor view, but has
specific place holders.
• @RenderBody
– Placeholder where views using this layout will
have their main content rendered.
Cont.
•
•
@RenderSection(“Footer”)
@RenderSection(“Footer”, required:false)
@section Footer{
This is <i>footer</i> content!
}
@if(IsSectionDefined(“Footer”)){
RenderSection(“Footer”);
}
Else{
<span>Some default content</span>
}
Or use Templated Razor Delagates (Page 392 (Later))
ViewStart
• _ViewStart.cshtml
– Specifies the default layout
– Any view can override this layout and choose a
different one.
Partial View
• Return a Partial View in the form of a
PartialViewResult via the PartialView()
method.
• A Partial View does not specify a layout
• Useful in partial update scenarios using AJAX.
4. Models
The Model
• An object that represents the data in the
application.
• Often corresponds to tables in the database,
but they don’t have to.
• Controller action methods which return an
ActionResult can pass a model object to the
view.
Cont.
• You may need to figure out what the model
should represent or how it should be
implemented. This may be based on business
requirements or conversations with business
owners or customers.
• What problem are you trying to solve?
• List? Edit? Create? Delete?
Scaffolding
• Generates the boilerplate code you need for
create, read, update, and delete (CRUD)
functionality in an application.
• Scaffolding templates can examine the type
definition for a model, then generate a controller
and the controller’s views.
• It knows how to name the controllers, how to
name the views, what code needs to go in each
component, and where to place all the pieces
within the project.
• It takes care of the boring work
Scaffolding templates
•
•
•
•
Empty Controller
Controller with Empty Read/Write actions
API Controller with Empty Read/Write Actions
Controller with Read/Write actions and Views,
using Entity Framework
Empty Controller
• Class that derives from Controller
• Index is the only action in the controller, with
not code inside
Controller with Empty Read/Write
actions
• Adds a controller with Index, Details, Create,
Edit, and Delete
• You still need to add code to make it work
API Controller with Empty Read/Write
Actions
• Derived from ApiController base class.
• You can use this class to build a Web API for
your application
Controller with Read/Write actions
and Views, Using Entity Framework
• Generates the controller with Index, Details, Create,
Edit and Delete actions
• Also Generates all the required views and code to
persist and retrieve information from a database.
• When you select the model class, the scaffolding
examines all the properties of your model and uses the
info to build controllers, views, and data access code.
• To generate the Data Access Code, the scaffolding also
needs the name of the DataContext object, if it exist. If
not the scaffolding can create one for you.
Scaffolding and EF
• Entity Framework (EF) is and object-relational
mapping framework.
• It understands how to store .NET objects in a
relational database and retrieve those same
objects given a LINQ query.
Code First
• EF supports a Code-First style of development
• Start storing and retrieving information in SQL server
without creating a database schema or opening a Visual
Studio designer
• Write .NET classes and EF figures out how, and where, to
store instances of those classes.
• This is why your properties in your model object are virtual.
• Marking them as virtual, gives EF a hook into your classes
and enables features like an efficient change tracking
mechanism.
• EF needs to know when a property value on a model
changes, in case it needs to update the datasource.
Database first or Code first
• Model-first
• Schema-first
• Both supported along with code-first
Code First Conventions
• If you have a class named Laywer, EF will
create a table named Laywers
• If you have a property named LawyerId, EF will
assume that it’s the Key value
• This too is by convention
DbContext Class
• Derive from the DbContext class
• One or more properties of type DbSet<t>
• t is the type of object you want to persist
Public class LegalDB : DbContext
{
public DbSet<Laywer> Lawyers { get; set;}
public DbSet<Case> Cases { get; set;}
}
Cont.
• The DbContext can be created manually or
automatically via the create controller dialog
Cont.
• Change to Virtual Methods for EF
LINQ
• Overview of LINQ
• Overview of Lamda
Eager vs. Lazy Loading
• Eager loading:
– var jails = db.Jails.Include(j => j.Cells);
– Brings all of the related objects on the first call
• Lazy Loading
– Brings all of the related objects when touched
– But this can cause a query for every item touched
– 20 Jails with could cause 21 extra queries to the
database
• Note: page 80
The Views
• The Scaffolding created views in the
appropriate folder
• Index, edit, delete, details, create
Examine the views
• Examine the views that were created by the
scaffolding
• Make changes
EF and the Database
• In Code-first, EF attempts to use convention
over configuration as much as possible.
• If you don’t configure specific mappings from
your models to database tables and columns,
EF uses conventions to create a database
schema.
• If you don’t configure a specific db connection
to use at runtime, EF creates on using a
convention.
Database Initializer
• To allow the EF to re-create an existing
database:
• DropCreateDatabaseAlways
• DropCreateDatabaseIfModelChanges
System.Data.Entity.Database.SetInitializer(new
System.Data.Entity.DropCreateDatabaseIfModelChanges<JLegal.Models.JailDB3Context>());
Migrations
• EF 4.3 includes the ability to discover the changes
you’ve made to the model objects and generate
schema change instructions for SQL Server.
• Migration allows you to preserve existing data in
your database as you build and refine your model
definitions
• http://blogs.msdn.com/b/adonet/archive/2012/0
2/09/ef-4-3-code-based-migrationswalkthrough.aspx
• http://msdn.microsoft.com/en-US/data/jj591621
Seeding a Database
• Derive from the DropCreateDatabaseAlways
class and override the Seed method.
• Use the new class in the SetInitializer
• Note: 84 -85
Cont.
Changing the Edit View
Get and Post
ModelState
• In previous code:
– ModelState:
• The model knows if it is valid or not
– EntityState
• Next page
– db.SaveChanges
– RedirectToAction(“Index”)
EntityState
Model Binding
• No more reading from the Request.Form
Collection unless you want to.
• Naming convention takes care of it all
• DefaultModelBinder
– Automatically converts the Form info to the Model
object based on naming convention.
– It uses the Request not just the Form Collection.
– It looks at route data, the querystring, and the Form
Collection and custom value providers if needed.
• Page 91
Using the DefaultModelBinder
Cont.
• You can have multiple model binders registered in
the MVC runtime for different types of models,
but the defaultModelBinder may work for you.
• The default uses naming conventions to find the
matches.
• If it sees a FirstName property it looks for a
FirstName value in the request.
– It uses “value providers” to search for the values in
different parts of the request.
Explicit Model Binding
Cont
5. Forms and HTML Helpers
Form Tag: Action and Method
• Action tells the web browser where to send
the information
• Method
– Get
• Send info in the header
• Viewable in the Querystring
– Post
• Send info in the Body
• Not Viewable in the Querystring
HTML Helpers
• Html Helpers are methods you can invoke on the
Html property of a view.
• Url Helpers
– Also available from the controller
• Ajax Helpers
• Make views easy to author.
@using (Html.BeginForm(“Search”, “Home”,
FormMethod.Get))
Html.BeginForm
Automatic Encoding
• All helpers that output model values will
automatically HTML encode the values before
rendering.
Cont.
Extension methods
• System.Web.Mvc.HtmlHelper<t>
• Several items implemented as extension
methods by the framework
• System.Web.Mvc.Html Namespace
• Note:
– Views/web.config has the namespace entry
Html.ValidationSummary
• Displays an unordered list of all validation
errors in the ModelState dictionary
ModelState.AddModelError
• ModelState.AddModelError(“”, “wrong”);
– Model-level error (no key)
• ModelState.AddModelError(“Title”, “Bad
Name);
– Property-Level (key provided)
Cont.
List of HTML Helpers
•
http://msdn.microsoft.com/en-us/library/dd410596(v=VS.98).aspx
Html.ActionLink
Html.Checkbox
Html.Label
Cont.
• Difference between
• Html.Label
• Html.LabelFor
– Works with a model
– Not to be confused with the “for” attribute
Html.DropDownList and Html.ListBox
Html.TextBox and Html.TextArea
Html.ValidationMessage
Set the value via the ViewBag
Cont.
Cont.
Strongly typed Helpers
Helpers and Model Metadata
Templated Helpers
• Templated helpers provide a way to automatically build UI based on
a data model that is marked with attributes defined in the
System.ComponentModel.DataAnnotations namespace.
• Templated Helpers
– Html.Display
– Html.Editor
• Strongly Typed Templated Helpers
– Html.DisplayFor
– Html.EditorFor
• Whole-Model Templated Helpers
– Html.DisplayForModel
– Html.EditorForModel
Cont.
• Use Html.EditorFor to render the same HTML
as TextBoxFor, however, you can change the
HTML using data annotations.
ModelState and Helpers
• ModelState is a byproduct of model binding and holds all validation
errors detected during model building.
• Also holds the raw values the user submits to update a model.
• Helpers used to render form fields automatically look up their
current value in the ModelState dictionary. If the value exists in the
ModelState, the helper uses the value from the ModelState instead
of a value in the view data.
• User enters “Bob” into the Price fields and submits, when the view
is returned to the user because the model binding failed, the user
will still see “Bob”
• When ModelState contains an error for a given property, the form
helper associated with the error renders a CSS class of inputvalidation-error (red)
Html.Hidden
Html.Password
Html.RadioButton
Html.CheckBox
Rendering Helpers
• Html.ActionLink
• Html.RouteLink
Url Helpers
• Action
– Exactly like ActionLink but does not return an
anchor
• Content
– Can convert a relative application path to an
absolute application path
• RouteUrl
– Same pattern as Action, but accepts a route name
like RouteLink
Html.Partial and Html.RenderPartial
• Html.Partial
– Renders partial view to a string.
• Html.RenderPartial
– Renders partial view to the response output
stream instead of returning a string.
Html.Action and Html.RenderAction
• Action
– Executes a separate controller action and displays
the result
• RenderAction
– Writes directly to the response
• [ChildActionOnly]
Cont.
Custom Helpers
• http://www.asp.net/mvc/tutorials/olderversions/views/creating-custom-html-helperscs
TagBuilder
• http://www.asp.net/mvc/tutorials/olderversions/views/using-the-tagbuilder-class-tobuild-html-helpers-cs
Cont.
6. Data Annotations and Validation
Data Annotation
• an unobtrusive validation library built on top of jquery.validation
• MVC comes with support for Data Annotations (that is,
System.ComponentModel.DataAnnotations) and can be extended
• becoming more popular and is being baked in to many other
Microsoft offerings, including Entity Framework
• MVC only contains four validators: Range, Required, StringLength
and Regular Expression
• The Data Annotations Extensions project can be found
at http://dataannotationsextensions.org/, and currently provides 11
additional validation attributes (ex: Email, EqualTo, Min/Max) on
top of Data Annotations’ original 4.
• .NET 4.5 http://msdn.microsoft.com/enus/library/system.componentmodel.dataannotations(v=vs.110).asp
x
NuGet packages
Using Validation Annotations
• System.ComponentModel.DataAnnotations
namespace (some in other namespaces)
• Provide Server-side validation
• The framework also supports client-side
validation when you use one of the attributes
on a model property
• There are 4 attributes in this namespace
[Required]
• Creates a required value
• Raises a validation error if the property value is
null or empty
• Client and server-side logic (although client-side
validation is actually through a validation adapter
design)
• If the client does not have JavaScript enabled in
the browser, the validation logic will catch the it
on the server, too. The user will still see the
error.
[StringLength]
[RegularExpression]
• [Phone]
• [EmailAddress]
• [CreditCard]
[Range]
[Remote]
• System.Web.Mvc namespace
[Compare]
Custom Error Messages
Validation and Model Binding
• By default, the MVC framework executes
validation logic during model binding.
• Part of a system of model binders, model
metadata, model validators and model state.
• The model binder runs implicitly when you
have parameters to an action method
UpdateModel / TryUpdateModel
Cont.
• Once the model binder is finished updating the
model properties with new values, the model
binder uses the current model metadata and
ultimately obtains all the validators for the
model.
• DataAnnotationsModelValidator
– A model validator that can find all the validation
attributes and execute the validation logic inside.
• The model binder catches all the failed
validation rules and places them into the Model
State
Validation and Model State
• Model binding produces model state.
• Model state is accessible in a Controller-derived
object using the ModelState property
• Model state contains all the values the user
attempted to put into model properties
• Model state also contains all the errors associated
with each property, and errors associated with
the model itself.
• If there is an error in model state Model.IsValid
returns false
Cont.
Valid or not?
TryUpdateModel
Custom Validation Logic
• Many possibilities:
– Package validation logic into a custom data
annotation
– Package validation logic into the model itself (selfvalidating model)
Custom Annotations
• Derive from ValidationAttribute base class
• System.ComponentModel.DataAnnotations
namespace
Cont.
• Override the IsValid method
• Add a constructor
Cont.
• Pass the error message to the base class.
Cont.
• Allow for custom error message
Cont.
IValiatableObject
Cont.
[Display]
• Display a friendly name to the UI
Cont.
• The default order is 10000
• Fields appear in ascending order
ScaffoldColumn
[DisplayFormat]
ReadOnly
[DataType]
[UIHint]
[HiddenInput]
[DatabaseGenerate]
• http://msdn.microsoft.com/enus/library/hh390735.aspx
• [ForeignKeyAttribute]
• [TabletAttrubute]
7. Security
Security Vectors in a web app
• Threats:
– Cross-Site Scripting XSS
– Cross-Site Request Forgery
– Over-Posting
– Open Redirection
8. Ajax
• Asynchronous JavaScript and XML
• The core of the support for Ajax in the
ASP.NET MVC 4 framework comes from the
jQuery JavaScript library
jQuery
• jQuery is added to your project by the
Template you selected.
• Scripts folder
• Added by NuGet
– Can easily upgrade scripts when a new version of
jQuery arrives
jQuery Features
• jQuery function (aliased as the $ sign)
– Less typing
jQuery Selectors
jQuery Events
• You can subscribe to events
jQuery Method Chaining
Shortcuts
jQuery and Ajax
• jQuery includes what you need to send
asynchronous request back to your server.
• You can generate Post or Get request and
jQuery will notify you when the request is
complete (error or not)
• Consume XML, HTML, Text or JSON
Unobtrusive JavaScript
• Keeping the JavaScript code separate from
markup
Using jQuery
Cont.
• Create a .js file in the scripts folder
• Add a <script> tag to the view
• Must come later than the jQuery script tag
Modernizr
• Modernizes old browsers.
• Enables HTML 5 elements on browsers that
don’t support HTML 5
• Also detects other features like geolocation
and the drawing canvas if available.
Ajax Helpers
• Add a reference to :
Ajax ActionLinks
• A Razor view has an Ajax property available
HTML 5 Attributes
• Data “dash” attributes
Ajax Forms
Client side validation
Cont.
Cont.
IClientValidatable
Cont.
Cont.
jQuery UI
jQuery UI examples
9. Routing
Defining Routes
• Your MVC application needs at lease one route
to define how the app should handle request.
• You can have many routes in your application.
Cont.
• Global.asax.cs
– RouteConfig.RegisterRoutes(RouteTable.Routes);
• App_Start folder:
Cont.
• url segments
– A segment is everything between slashes but not
including the slashes
• Url Parameters
– Each contains a parameter in curly braces
• This is a pattern matching rule
Cont.
• “{controller}/{action}/{id}”
• {controller} is used to instantiate a controller
class to handle the request. MVC appends the
suffix “Controller” to the value of the {controller}
URL parameter and attempts to find a type of
that name.
• {action} is used to indicate which method of the
controller to call in order to handle the current
request.
• {id} looks for a parameter named id
Cont.
Optional values
Cont.
@Html.RouteLink("blog", new
{controller="Blog", action="Index“
, year=2341, month=23, day=34})
http://[domain name]/2012/02/24
MVC Areas
• Allow you to divide your models, views, and controllers into
separate functional sections.
• Separate larger or complex sites into sections
– Each Area will have its own set of folders for controllers, views, models
– Each area will have its own routing registration
• Derive a class from the AreaRegistration class
• Override AreaName and RegisterArea
Cont.
• Demo:
– Create two Areas
Cont.
• Each area has its own routing registration
Area route conflicts
Catch-all parameter
cont
URL Generation
Overflow parameters
Cont.
• Routing is not looking for an exact match. Just
a sufficient match.
• Extra parameters will be placed in the
querystring prameters (after the ?)
HTML 5
CSS and CSS 3
• LESS: http://designshack.net/articles/css/10less-css-examples-you-should-steal-for-yourprojects/
• http://lesscss.org/
NuGet and Packages
Web API
• HTTP services on top of the .NET framework
• Ships with MVC 4
• Why?
– Reach more clients
• Xml, json,
– Scale with the cloud
– Embrace HTTP
• Simplify communication with clients
Dependency Injection
What is Dependency Injection?
• A software design pattern
• Types of Patterns in use today
– Inversion of Control
– Service Locator
• Weakly Typed Service Locator
• Strongly Typed Service Locator
– Dependency Injection
• Constructor Injection
• Property Injection
Coupling
• Coupling / Tightly Coupling
– When a component has a dependency.
• Ex: creating an instance of class “A” within the constructor
class “B”
• Class “B” can’t work if class “A” (the dependency) isn’t
available.
• Your class knows exactly what kind of class it needs to use.
• Makes it hard or impossible to use a different type of the
same class.
• Changes to the class “A” may break class “B”
• What if you wanted to use class “C” instead of class “A”?
Inversion of Control
• Moving the responsibility for creating the
instance of the class (Class A) outside of the
class (Class B) that consumes the dependency
• 2 steps:
– Create a layer of abstraction
• Interface
– Move the responsibility for creating the instance
outside of the consuming class
• Pass the class via the constructor or a property
• Or use a Service locator
Strongly Typed Service Locator
• An external component that finds the service
(class) that you are looking for. Your class
relies on the locator to always give it back the
correct type. Your class doesn’t care what
type it is because it expects a type that has
implemented the correct interface.
• Good for unit testing
Weakly Typed Service Locator
• Similar to the Strongly typed service locator
but returns object instead of a specific
interface
• Your class must cast to the correct type of
interface
• You could create a Generic Type as well
Dependency Injection
• This pattern is a type of Inversion of Control
– No service locator
– Good for testing
• Constructor Injection:
– Pass the dependency into the constructor
• Property Injection:
– Pass the dependency into a property
Dependency Injection Container
• Acts as a factory for components, inspecting
and fulfilling their dependency requirements
• A little different than a service locator
– Service locator:
• If anyone asks for this type, give them this object
– DIC:
• If anyone asks for this type, you create an object of this
concrete type and give them that