Module 01 Exploring ASP.

NET MVC 4
Lesson 1: Overview of Microsoft Web Technologies
Lesson 2 Overview of ASP.NET 4.5
Web Pages Web Forms

MVC ASP.NET Application Scenarios

Shared ASP.NET Features

Lesson 3 Introduction to ASP.NET MVC 4
Entity Framework version 5.0
Views and Razor
<h2>Details</h2>
<fieldset>
<legend>Comment</legend>
<div class="display-label">
@Html.DisplayNameFor(model => model.Subject)
</div>
<div class="display-field">
@Html.DisplayFor(model => model.Subject)
</div>
<div class="display-label">
@Html.DisplayNameFor(model => model.Body)
</div>
<div class="display-field">
@Html.DisplayFor(model => model.Body)
</div>
</fieldset>
Request Life Cycle
The Request life cycle comprises a series of events that happen when processing a
web request. The
following steps illustrate the process that MVC applications follow to respond to a
typical user request.
The request is for the details of a product with the ID “1”:
1. The user requests the web address:
http://www.adventureworks.com/product/display/1
2. The MVC routing engine examines the request and determines that it should
forward it to the
Product Controller and the Display action.
3. The Display action in the Product Controller creates a new instance of the Product
model class.
4. The Product model class queries the database for information about the product
with ID “1”.
5. The Display action also creates a new instance of the Product Display View and
passes the Product
Model to it.
6. The Razor view engine runs the server-side code in the Product Display View to
render HTML. In this
case, the server-side code inserts properties such as Title, Description, Catalog
Number, and Price into
the HTML.
7. The completed HTML page is returned to the browser for display.
Module 02 Designing ASP.NET MVC 4 Web Applications

Lesson 1: Planning in the Project Design Phase

Gathering Requirements

Plan database design Planning for distributed applications

Planning state management Planning Globalization and Localization

Lesson 2: Designing Models, Controllers, and Views

Designing Models Designing Controllers

Designing Views
Template views in ASP.NET MVC web applications perform
the same role as master pages in ASP.NET Web Forms
applications

Module03 Developing ASP.NET MVC 4 Models

public class Comment
{
public int CommentID { get; set; }
public int PhotoID { get; set; }
public string UserName { get; set; }
public string Subject { get; set; }
public string Body { get; set; }
public virtual Photo Photo { get; set; }
}

Controller View
Using Display and Edit Data Annotations on Validating User Input with Data Annotations
Properties

Model binders Model extensibility

Lesson 2: Working with Data

Connecting to a database The Entity Framework

Using an Entity Framework Context public class PhotoController : Controller

{
//Creating a reference to the Entity
 Framework context class
private PhotoSharingDB db = new PhotoSharingDB();
//This action gets all the photos in the database and passes them
to the Index view
public ActionResult Index()
{
return View("Index", db.Photos.ToList());
}
//This action gets a photo with a particular ID and passes it to the
Details view
public ActionResult Details(int id = 0)
{
Photo photo = db.Photos.Find(id);
if (photo == null)
{
return HttpNotFound();
}
return View("Details", photo);
}
}
}
Using LINQ to Entities

Module04 Developing ASP.NET MVC 4 Controllers

Lesson 1 Writing Controllers and Actions

1. inherits from the Responding to User Requests

System.Web.Mvc.Controller

2. Actions are methods within a controller,

which return an ActionResult object
Writing Controller Actions

Possible ActionResult: Child Actions =

ViewResult Controller actions marked with [ChildActionOnly]
HttpNotFoundResult to be used by views using the Html.Action()
FileContentResult Cannot be returns to the routing mechanism by
PartialViewResult typing the URL
RedirectToRouteResult
RedirectResult
ContentResult
Using parameters Using a Query String Parameter
public ActionResult GetPhotoByTitle (string title)
{
var query = from p in context.Photos
where p.Title == title
select p
Photo requestedPhoto = (Photo)query.FirstOrDefault();
if (requestedPhoto != null)
{
return View("Details", requestedPhoto);
}
else
{
return HttpNotFound();
}
}

Passing information to views Using The ViewBag

Using The ViewData Dictionary Controller Factories
ViewBag is a dynamic wrapper above the ViewData dictionary

Lesson 2 Writing Action Filters

Creating and Using Action Filters
Module05 Developing ASP.NET MVC 4 Views

Lesson 1: Creating Views with Razor Syntax

Strongly-Typed Views

a. Declare @model MyWebSite.Models.Product in “detail” view

b. Declare in a List view the following:

Rendering Accessible HTML Alternative View Engines

Web Content Accessibility Guidelines (WCAG)
http://www.w3.org/TR/WCAG10/

Lesson 2 Using HTML Helpers

Using Action Helpers Using Display Helpers
The Begin Form Helper Using Editor Helpers

Lesson 3 Reusing Code in Views

Creating Partial Views Using Partial Views
 @Html.Partial("_Comments")
@Html.Action("_CommentsForArticle", "Comment", new {
ArticleID = Model.ID })

Module06 Testing and Debugging ASP.NET MVC 4 Web Applications

Lesson 1: Unit Testing MVC Components

Principles of Test Driven Development

Principles of Test Driven Development:

Write tests before code
Move in small steps
Only write enough code to pass the test
1. Phase 1: The ProductController class is defined and the Test_Index_Action unit test is written. The test checks that the Index
action works with an integer parameter. When you call the Index action with an integer, the action returns a collection that includes
the same number of Product objects. The test passes.

2. Phase 2: A developer modifies the Index action so that it returns a partial view. The developer renames the action _Index to
conform to the team’s partial view naming convention. The test fails because the name has changed. The developer modifies the
test so that it calls the renamed action and the test passes.

3. Phase 3: A developer modifies the Index action by writing a different Language Integrated Query (LINQ) query to implement a
new functional requirement. However, the developer makes a mistake in the LINQ query. The Index action now returns zero
products whatever integer is passed as a parameter. The test fails.
Writing Loosely Coupled MVC Components Writing Unit Tests for MVC Components
 Using Mocking Frameworks

Lesson 2 Implementing an Exception Handling Strategy

Using OnException to Catch Controller Errors

OnException is a method in the controller class

HandleError annotation directs exceptions of a

specified type, that are raised in the annotated
action, to specified views.
Configuring Exception Handling

Where to Write Error Logging Code Health Monitoring

A more effective approach is as follows:
o Create a custom base controller class for your web
application. This class inherits from the
System.Web.Mvc.Controller base class.
o In your custom base controller class, override the
OnException() method. Place you error
logging code in this method.
o When you create controllers, inherit from your custom
base controller class instead of
System.Web.Mvc.Controller.

Using Third Party Logging Tools:ELMAH

Module07 Structuring ASP.NET MVC 4 Web Applications

Lesson 1: Analyzing Information Architecture

Information Architecture Presenting a Hierarchy in Navigation Controls:

 Site Menus
 Tree Views
 Breadcrumb Trails

Presenting a Hierarchy in URLs:

Instead of
http://site/Furnace/Details/23
use
http://site/OilFired/HotBurner2000

Lesson 2 Configuring Routes

1. An MvcHandler object creates a controller factory. The controller factory is the object that
instantiates a controller to respond to the request.

2. The controller factory consults the routing table to determine the right Controller class to use.

3. The controller factory creates a Controller object, and the MvcHandler calls the Execute method in
that controller.
 4. The ControllerActionInvoker examines the request URL and consults the routing table to determine
the action in the Controller object to call.

5. The ControllerActionInvoker uses a model binder to determine the values that should be passed to
the action as parameters. The model binder consults the routing table to determine if any segments
of the URL should be passed as parameters. The model binder can also pass parameters from a
posted form, from the URL query text, or from uploaded files.

6. The ControllerActionInvoker runs the action. Often, the action creates a new instance of a model
class, perhaps by querying the database with the parameters that the invoker passed to it. This model
object is passed to a view, to display results to the user.
Adding and Configuring Routes Using Routes to Pass Parameters

Optional Parameters Unit Tests and Routes

Lesson 3 Creating a Navigation Structure

 Configuring the MVC Site Map Provider

Adding Menu Controls

Module08 Applying Styles to ASP.NET MVC 4 Web Applications

Lesson 1: Using Layouts

 Layouts with sections

Lesson 2 Applying CSS Styles to an MVC Application

Lesson 3 Creating an Adaptive User Interface
<meta name="viewport" content="width=device-width,
initial-scale=1, maximum-scale=1">
http://www.quirksmode.org/mobile/viewports.htm
l
http://www.quirksmode.org/mobile/viewports2.ht
ml

CSS Media Queries @media only screen and (max-width:

500px) {
header{
float: none;
}
}

<link rel="stylesheet" type="text/css" href="smallscreen.css"

media="only screen and
(max-width: 500px)" />

MVC 4 Templates and Mobile Specific Views

Module09 Building Responsive Pages in ASP.NET MVC 4 Web
Applications

Lesson 1: Using AJAX and Partial Page Updates

Using AJAX in an MVC 4 Web Application

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.js"
type="text/javascript"></script>
<script
src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusiveajax
.
min.js" type="text/javascript"></script>
</head>
<body>
<div>
<div id="divMessage">@ViewBag.Message</div>
@Ajax.ActionLink("Refresh","HelloWorld", new AjaxOptions{
HttpMethod =
"POST", UpdateTargetId = "divMessage", InsertionMode =
InsertionMode.Replace })
</div>
</body>
</html>
Lesson 2 Implementing a Caching Strategy
The output cache

The Data Cache [OutputCache(Duration = 60)]

public PartialViewResult HelloWorld()
{
ViewBag.Message = "Hello World";
return PartialView();
}

[OutputCache(Duration = 60, VaryByParam="ID")]

public PartialViewResult HelloWorld()
{
ViewBag.Message = "Hello World";
return PartialView();
}

[OutputCache(Duration = 60, VaryByCustom="browser")]

public PartialViewResult HelloWorld()
{
ViewBag.Message = "Hello World";
return PartialView();
}
The HTTP Cache Preventing cache
Module10 Using JavaScript and jQuery for Responsive MVC 4 Web
Applications

Lesson 1: Rendering and Executing JavaScript Code

Lesson 2 Using jQuery and jQueryUI