deep dive into new asp.net mvc 4 features

Deep Dive Into MVC 4Building tomorrows web

Peter HimschootU2U Trainer MS Regional Director

About me…

Peter Himschootpeter@u2u.net

U2UTraining company based in BrusselsSpecialized in developer training For .NET, SharePoint, HTML5

www.u2u.be

Session Contents• Building Tomorrows Web• Responsive Web Design• New MVC4 project templates

• Mobile Web• Mobile MVC4 features

• NuGet Code Generation Recipes

Building Tomorrows Web

Yesterday’s Web

Server

Server does all the work

ASP.NETWeb Forms

Today’s Web

Server

We share the work

JavaScript

ASP.NETMVC

HTML5

+

Tomorrow’s Web

Server

JSON

jQueryKnockOut.js

ASP.NETMVC

HTML5

Responsive Web Design

Web Design• Now has to support many screen sizes• Personal computer• Tablet• Mobile• Landscape and portrait

960px

566px 331px

566 / 960 = 58.958333%

331 / 960 = 34.47916%

360px

90%

90%

@media only screen and (max-width: 360px)

MVC 4 site templates• Updated to support all resolutions• Mobile web template

DemoA look at the new project templates

Async

Async Controller• Long running actions• Especially IO-intensive

• Use new async support• Better server-side performance

Normal controller example

With intense IO

public class UploadController : Controller{ public ActionResult Upload() { ... Request.Files[upload].SaveAs(Path.Combine(path, filename)); return Json(Path.GetFileNameWithoutExtension(filename)); }

Async Controller

Derive from AsyncControllerpublic async Task<ActionResult> Upload_Async(){ var task = Task<ActionResult>.Factory.StartNew(() => { ... Request.Files[upload].SaveAs(Path.Combine(path, filename)); return Json(Path.GetFileNameWithoutExtension(filename)); }); await task; return task.Result;}

DemoMaking a long running action asynchronous

Adding Mobile support

Mobile Web <> Desktop Web• MVC4 supports this• jQuery Mobile• Display Modes

Controller

Normal View

Mobile ViewMobile Views

Using the ViewPort meta-tag<meta name="viewport" content="width=device-width" />

DisplayModes Modes

Two built-in display modes

Adding your own display mode• Differentiate between browsers

DisplayModes.Modes.Insert(0, new DefaultDisplayMode("WP"){ ContextCondition = (context => context.Request.UserAgent.IndexOf ("Windows Phone", StringComparison.OrdinalIgnoreCase) >= 0)});

Building a Custom Display Mode

Derive from DefaultDisplayMode classprotected override string TransformPath(string virtualPath, string suffix) { virtualPath = base.TransformPath(virtualPath, suffix); if (CheckCondition()) { virtualPath = virtualPath.Replace("cshtml", string.Format("{0}.cshtml", suffix)); } return virtualPath; }

DemoUsing Display Modes and jQuery Mobile

Code Generation Recipes

An ASP.NET MVC 4 recipe is a dialog box delivered via NuGet with associated user interface (UI) and code used to automate a specific task.

Creating a recipe using a recipe

Recipe skeleton

Folder or File recipe[Export(typeof(IRecipe))]public class MyRecipe : IFolderRecipe{ public bool Execute(ProjectFolder folder) { ... } public bool IsValidTarget(ProjectFolder folder) { ... } public string Description ... public Icon Icon ... public string Name ...}

Publishing the recipe on NuGet• Register an account on nuget.org

• Run following commands

nuget pack <project>.nuspec

nuget push <recipe>.<version>.nupkg

Using the recipe• Add the recipe first using NuGet• Just like any other

• Run recipe using Add... Menu• Wierd... This will change later

DemoBuilding a Recipe

Session Summary• A whole new web is born, so…• Learn JavaScript, jQuery and HTML5• Use JSON for data transfer• MVC4 is excellent platform• Supports latest HTML5 standards• Mobile support AND display modes

Be what’s next• Find everything here

http://aka.ms/mbl-tech• Visual Studio Developer Preview Downloads

http://aka.ms/mbl-tech/devprev• MSDN HTML5 Developer Center

http://aka.ms/mbl-tech/html5

Q&A

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

Preferred Text LayoutSize 40pt for the main topicsSize 20pt for the subtopicsSize 20pt for the subtopics

Size 40pt for the main topicsSize 20pt for the subtopicsSize 20pt for the subtopics

Size 40pt for the main topicsSize 20pt for the subtopicsSize 20pt for the subtopics

Choosing Correct Slide TransitionsLimit the slide transitions to two types per deck.Choose from these preferred settings.Fade with 1 second durationReveal with 1.5 second durationPush with 1.5 second duration, from rightPan with 1.5 second duration, from right

All About Charts

Keep Charts Clean & Modern

StatisticalTrend

Statistical Survey

1.0

1.0

80 went to the market

89 stayed home

68 had roast beef

77 had none

1x

1x

.03x .03x

Lots Of Data? Minimalize & Plan

Brand 2

Brand 1

Brand 3

58%19%

IBM

Ora

cle

13%

140M130M 125M

Cis

co

VM

War

e

Oth

er

Apple

.485x

1x

.03x

1.5x

.03x

Pictures can set a mood orevoke emotion, making fora more memorable presentation.

Full Bleed Photos

Full Bleed Photos

Pictures can set a mood orevoke emotion, making fora more memorable presentation.Sometimes a gradient shapebelow the text can help legibility.

Sample Layouts

Sample Layout 1

Size 40pt for the main topicsSize 20pt for the subtopicsSize 20pt for the subtopics

Size 40pt for the main topicsSize 20pt for the subtopicsSize 20pt for the subtopics

Text/Icon/PicText/Icon/Pic

Text/Icon/PicText/Icon/Pic

Sample Layout 3

Text goes hereSupporting text hereSize 20pt for the subtopics

Text goes hereSupporting text goes hereSupporting text goes here

Text/Icon/Pic

Text/Icon/Pic

Text/Icon/Pic

Text/Icon/Pic

Text/Pic

Sample Layout 4Text goes hereSupporting text hereSize 20pt for the subtopics

Text goes hereSupporting text goes hereSupporting text goes here

Text goes hereSupporting text goes hereSupporting text goes here

Text/Icon/Pic

Text/Icon/Pic

Text/Pic

Sample Layout 8

Text/Icon/PicText/Icon/Pic

Text/Icon/PicText/Icon/Pic

Text/Pic

Simple, clean, &impactful text here.

Simple, clean, &impactful text here.