deep dive into new asp.net mvc 4 features
DESCRIPTION
An in-depth look ASP.NET MVC 4 features including better integration with NuGet, modern templates to support mobile and responsive websites, display mode, customizing generated code with recipes and more.TRANSCRIPT
Deep Dive Into MVC 4Building tomorrows web
Peter HimschootU2U Trainer MS Regional Director
About me…
Peter [email protected]
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.