Random MVC 4 Notes

Spindustry Training
• 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
The View
• Defines how the application’s UI will be
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
• 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
– The MVC pattern has been applied to ASP.NET.
This does not mean that it is the same as MVC
running in other places.
• 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
No XML-like heavy syntax
• Features include:
– Enhancements to the default project templates
– Mobile project template using jQuery Mobile
– Display Modes
– Task Support for Asynchronous Controllers
– Bundling and Minification
• 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:
Model Binding and Validation
Easy Unit Testability
• 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
• http://www.asp.net/mvc/mvc5
Enhancements to the default project
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
• You can create custom bundles to contain
specific scripts and reference them with a
single URL
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
Object reference presevation
Camel casing
LINQ to JSON is also included along with automatic
conversion from JSON to XML
• DotNetOpenAuth:
– Used to support OpenID and Oauth-based logins
• MVC 4 also provides an OAuthWebSecurity
• 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
• FilterConfig.cs:
– Used to register global MVC filters. By default the
HandlerErrorAttribute is registered. You can put other
filter registrations here.
• 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
• 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.
• 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
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
• Internet Application:
– Contains the beginnings of an MVC web application, including
basic account management functions that use ASP.NET
• 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.
• 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
• Razor
• 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
• 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
• “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.
• Each controller’s class name ends with Controller
– LegalController, LegalServicesController, HomeController
• One Views directory for all the views of your
• 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
• 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
• The controller’s method could return
something other than a view.
• 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)
Controller Class
Controller Actions
• Add additional methods for additional
– 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
• 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
– Inherits from System.Web.Mvc.Controller
• We returned text to the browser without a model
or a view.
• /LegalServices/Details/5 vs.
• The default routing convention in MVC will
automatically pass the URL segment to you as
a parameter. The default parameter is named
• If your parameter is not “ID” then use the “?”
or configure routing.
• The previous example was not common and
was oversimplified.
– You will almost always use Views
– You will most often return ActionResult instead of
– 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
• Before talking about Views, let’s look at
– 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
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
• Note:
– Not all views render HTML, but HTML is the most
common case
– More info on alternate types of content later.
• 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:
• 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”] =
• 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”]
– See page 51 Note
• Create a simple
Strongly Typed Views
• You can add a collection or list of items to the
• 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()
• 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
• 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
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
– Creates an empty view. Only the model type is specified using the @model syntax
– 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
– 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
– Creates a view that displays a label and the value for each property of the model type
– 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.
– 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
• 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
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
• 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
• @{}
• @(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>”;
This statement will not create an alert box
• You can use the HTML.Raw() method to return
a string that Razor will not encode.
• You can also create an instance of HTMLString
• 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.
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
<text>This is plain text</text>
@if (showMessage){
this is plain text.
Server-side comments
@* *@
Calling a Generic Method
Use parenthesis just like with explicit code
• Same purpose as MasterPages
• Maintain a consistent look and feel across
multiple views within your application
• Simpler syntax that MasterPages and greater
• Contains one or more placeholders that the
other views can provide content for.
• Looks like a standard Razor view, but has
specific place holders.
• @RenderBody
– Placeholder where views using this layout will
have their main content rendered.
@RenderSection(“Footer”, required:false)
@section Footer{
This is <i>footer</i> content!
<span>Some default content</span>
Or use Templated Razor Delagates (Page 392 (Later))
• _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()
• 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
• 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
• 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?
• 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
• 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
• 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
• 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;}
• The DbContext can be created manually or
automatically via the create controller dialog
• Change to Virtual Methods for EF
• 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
• 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
• 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
• If you don’t configure a specific db connection
to use at runtime, EF creates on using a
Database Initializer
• To allow the EF to re-create an existing
• DropCreateDatabaseAlways
• DropCreateDatabaseIfModelChanges
• 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
• http://blogs.msdn.com/b/adonet/archive/2012/0
• 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
Changing the Edit View
Get and Post
• In previous code:
– ModelState:
• The model knows if it is valid or not
– EntityState
• Next page
– db.SaveChanges
– RedirectToAction(“Index”)
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
• 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
• 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
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”,
Automatic Encoding
• All helpers that output model values will
automatically HTML encode the values before
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
• Displays an unordered list of all validation
errors in the ModelState dictionary
• ModelState.AddModelError(“”, “wrong”);
– Model-level error (no key)
• ModelState.AddModelError(“Title”, “Bad
– Property-Level (key provided)
List of HTML Helpers
• 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
Set the value via the ViewBag
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
• 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)
Rendering Helpers
• Html.ActionLink
• Html.RouteLink
Url Helpers
• Action
– Exactly like ActionLink but does not return an
• 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]
Custom Helpers
• http://www.asp.net/mvc/tutorials/olderversions/views/creating-custom-html-helperscs
• http://www.asp.net/mvc/tutorials/olderversions/views/using-the-tagbuilder-class-tobuild-html-helpers-cs
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
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
• 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
• 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
• [Phone]
• [EmailAddress]
• [CreditCard]
• System.Web.Mvc namespace
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
• 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
• 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
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
Valid or not?
Custom Validation Logic
• Many possibilities:
– Package validation logic into a custom data
– Package validation logic into the model itself (selfvalidating model)
Custom Annotations
• Derive from ValidationAttribute base class
• System.ComponentModel.DataAnnotations
• Override the IsValid method
• Add a constructor
• Pass the error message to the base class.
• Allow for custom error message
• Display a friendly name to the UI
• The default order is 10000
• Fields appear in ascending order
• 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 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
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
Using jQuery
• Create a .js file in the scripts folder
• Add a <script> tag to the view
• Must come later than the jQuery script tag
• 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
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.
• Global.asax.cs
– RouteConfig.RegisterRoutes(RouteTable.Routes);
• App_Start folder:
• 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
• “{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
• {id} looks for a parameter named id
Optional values
@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
• Demo:
– Create two Areas
• Each area has its own routing registration
Area route conflicts
Catch-all parameter
URL Generation
Overflow parameters
• Routing is not looking for an exact match. Just
a sufficient match.
• Extra parameters will be placed in the
querystring prameters (after the ?)
CSS and CSS 3
• LESS: http://designshack.net/articles/css/10less-css-examples-you-should-steal-for-yourprojects/
• http://lesscss.org/
NuGet and Packages
• 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 / 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
• 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
• Your class must cast to the correct type of
• 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