What’s New in ASP.NET 4.5

Ori Calvo, 2012John Bryce Hi-Tech CollegeOri.calvo@gmail.comhttp://blogs.microsoft.co.il/blogs/oric/

ObjectivesPart 1 - ASP.NET Web Forms 4.5Part 2 - IDE EnhancementsPart 3 - ASP.NET MVC 4

PrerequisitesASP.NET DeveloperGood understanding of HTML and

HTTPGood understanding of C#

Language

Getting StartedInstall Visual Studio 11 Beta

◦http://www.microsoft.com/visualstudio/11/en-us

Some new features require Windows 8 Consumer Preview◦http://

windows.microsoft.com/en-us/windows-8/download

◦And then install Visual Studio 11

ASP.NET Web Forms 4.5Strongly Typed Data ControlModel BindingUnobtrusive validationHTML5 UpdatesCore Runtime and Framework

◦Bundling and Minification◦Support for Web Sockets API

Strongly Typed Data ControlsStill uses the <%# and %>

syntaxUses a new “ItemType” attributeNew syntax is supported under a

web control template◦Item◦BindItem

IntelliSense works !!!Invoking a method is supported

Model BindingNew data binding mechanismA data bound control can specify

◦Select/Update/Insert/Delete methodsMethod’s parameters are

automatically bound to control state◦Can bind parameters to other value

providersValidation is supported through

DataAnnotation

Is it MVVM?New model binding makes ASP.NET

feels like an MVVM framework◦Each control is bound to an ItemType

(A.K.A ViewModel)Use AutoMapper to switch

between Model and ViewModelCan it be testable too?

◦See my blog: http://blogs.microsoft.co.il/blogs/oric/archive/2012/02/22/asp-net-web-forms-and-mvvm.aspx

KnockoutJSOpen Source project developed

by Steve SandersonAn MVVM libraryCan bind HTML elements to a

JavaScript ViewModelInstall through NuGet

ASP.NET Web API“Stop looking at HTTP through the eyes of WCF”

More control over HTTPSimplifying configurationMore testabilityMultiple formats on a single

serviceOData support

Bundling and MinificationMust be enabled at Application_StartCan bundle a whole directory

◦Alphabetical order ◦Known libraries are moved to top ◦Can be customized◦Minification can be skipped

Consider a NuGet package named “Cassette”◦http://getcassette.net/

Web SocketsBi-directional, full-duplex

communication channelOver a single TCP socketRequires implementation by both

web server and web browsers◦IIS 8◦IE 10

See sample

Small ImprovementsHTML Encoded Data-Binding

◦Use <%#:◦More secured◦Not the default

Unobtrusive Validation◦Cleaner page◦Small page

HTML5 Updates◦TextBox.TextMode new values◦FileUpload supports multiple files

IDE EnhancementsHTML EditorJavaScript EditorCSS EditorPage InspectorPublishingIIS Express

HTML EditorSmart Tasks inside source viewNew HTML5 snippetsExtract to user controlIntelliSense inside attributesAutomatic renaming of matching tagEvent Handler generationSmart indentationAuto reduce statement completionRefactoring effects markup too

JavaScript EditorCode outliningBrace MatchingGo to definitionImplicit referencesDOM IntelliSense

CSS EditorHierarchical indentationIntellisense for CSS HacksCtrl+K,CColor pickerVendor specific prefixesSnippets for browser specific

settings

Page InspectorDetermine which server-side code has produced the HTML markup

Install through Web Platform InstallerRight click a file and select “View in

Page Inspector”Renders web pages directly into visual

studioAllows you to examine source code

and HTML

More IDE EnhancementsBrowser chooser

◦MultipleImage Thumbnails

ASP.NET MVC – Brief OverviewView Controller Routing

SystemExtensibility

Partial View

Action Route Model Metadata

HTML Helper

Filter Route Handler

Value Provider

Inline Template

Model State

Constraint Model Binder

Razor Method Selector

Temp Data Provider

View Bag Temp Data Dependency Resolver

View Engine

Action Result

ASP.NET MVC 4New Project TemplatesBetter Mobile SupportDisplay Modes and View SwitcherRecipesTask Support for Asynchronous

Controllers

Project TemplatesDefault Project Template

◦Modern looking◦Richer UI through jQuery UI dialog◦Adaptive Rendering

Mobile◦Incorporate jQuery Mobile scripts

Single Page Application◦Integrates upshot & Knockout◦Come to next session

Web API

Better Mobile SupportAdaptive RenderingDisplay ModesView SwitcherMobile Template Project

Display ModesUseful when adding mobile support

for existing web site◦Install-Package jQuery.Mobile.MVC

Allows view/layout selection depending on the browser

Can override current browser “User Agent String”◦Can be used to implement a “View

Switcher”Can register custom display modes

JQM – Server vs. Client centricJQM can be used for both type of

applicationThe challenge is to create a real

Mobile/Web application◦Need to preload all application views◦Views should be filled by client code

KnockoutJS◦What if server is down?

HTML5 Offline Web Applications

SummaryASP.NET Web Forms

◦New data binding mechanismASP.NET MVC 4

◦Better mobile supportVisual Studio

◦Better JavaScript development support

◦Lots of nice/small improvements

Read moreCourse 1373 at John Bryce

http://weblogs.asp.net/scottgu/http://www.hanselman.com/blog/http://www.asp.net/mvchttp://jquery.com/http://jquerymobile.com/http://blogs.microsoft.co.il/blogs/

oric/

Thank You !!!