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
