ASP.NET AJAX

1
(No Transcript)
2
ASP.NET -gt AJAX

• Jan Blomquist, MVP, MCT
• www.traincert.net
• www.cbtoffice.no

3
Agenda
4
A Better Web User Experience

• Better user experiences make better applications
• Higher user traffic and retention
• Greater differentiation
• Higher user productivity

5
ASP.NET AJAX
A framework for building a new generation of
richer, more interactive, highly personalized
browsing experiences

• Fully cross-platform, cross-browser
• High productivity AJAX application development
• Client script framework for easy script creation
  and reuse
• End-to-end programming model for browser and
  server
• Rich tool experience integrated with Visual
  Studio
• Free, fully supported runtime and tools

6
Architecture Diagram
ASP.NET Pages
Web Services (ASMX or WCF)
HTML markup, CSS, and Script
Ajax Service Proxies
Server Framework
Client Framework
7
What is ASP.NET Ajax?

• An end-to-end framework for building rich,
  interactive Web experiences and browser-based
  applications
• ASP.NET 2.0 Ajax Extensions
• Server controls that very simply enable AJAX in
  any ASP.NET application
• Microsoft Ajax Library
• Client script framework that works cross-browser,
  and back-end server
• ASP.NET Ajax Control Toolkit
• Rich set of server controls and client script
  functionality
• Community development model
• Key Goals
• Simple, Yet Powerful
• .NET-like feel to script framework
• Reduce the need for scripting by every developer
  in mainline scenarios

8
Why AJAX?Looking Beyond the Hype

• Improving site/application characteristics
• Performance smaller updates, requests/responses
• End-user perception smooth interactions no hard
  breaks
• Usability visual notifications, new gestures,
  widgets
• Improve visual appeal animations
• Provide additional functionality auto-updates,
  background work, etc.
• Why Ajax-ify?
• Not just because of the hype!
• Differentiated experiences are key to new
  successes with customers and meeting rising
  expectations

9
Demo

• AJAX Video Viewer

10
Which Scenarios does ASP.NET Ajax Address?

• Enriching ASP.NET applications
• No scripting required
• Declaratively enable post-back-less updates and
  partial rendering of portions of pages
• Ajax-enabled controls or extenders for scenarios
  beyond page updates
• Using Web services from client script
• Some amount of scripting
• Method-based abstraction over XMLHttp for
  .asmx/.svc services
• Support for JSON, RESTful services
• Building reusable Ajax Components
• Requires scripting with pay for play model
• Script framework provides more robust, and
  productive development model
• Extensibility support on both server and client

11
Demo NotesAjax via UpdatePanels

• Simple mechanism for basic Ajax-y feel
• Declarative model to specify logical parts of
  your page
• No need for scripting
• Each part can update incrementally and
  independently without a postback
• Updates happen without regular post-backs
• Browser does not refresh entire page
• Requests are processed as regular post-backs
• Server-side logic and model is preserved
• Framework code determines the parts of the page
  that should be re-rendered

12
UpdatePanel Under the Covers

• Client script suppresses normal form submit
• Simulates post-back request via XMLHttpRequest
• All form fields, including view state
• One extra header to request partial rendering
• Server processes a regular post-back
• Same page lifecycle, post-back processing
• UpdatePanels determine if they need to be updated
• Always vs. Conditional modes
• ScriptManager control takes over rendering
• Only render content of UpdatePanels needing
  update
• Response includes updated view state
• Client script processes delta response
• Updates rendering with new markup
• Update hidden fields etc.

13
Demo NotesUpdatePanel Performance Guidelines

• Post-back requests are still full post-back
  requests
• Incremental approach preserves existing app
  models
• One request at a time
• Smaller responses, but requests are same
• Think about which user actions should cause
  post-backs
• Optimize what needs to be updated and when
• Set UpdatePanels into Conditional Mode
• Use Triggers, or Update() method to control

14
UpdatePanel Code Snippet

• ltaspDataList idvideoListgt lt/aspDataListgt
• ltaspObjectDataSource idphotosDS gt
• ltSelectParametersgt
• ltaspControlParameter nameid
  ControlIDvideosList /gt
• lt/SelectParametersgt
• lt/aspObjectDataSourcegt
• ltaspUpdatePanel runatservergt
• ltContentTemplategt
• ltaspFormView runatserver idvideoView
• DataSourceIDvideoDSgt
• ltaspImage runatserver idvideoImage
• ImageUrllt Eval(videos/P0.wmv, ID)
  gt /gt
• lt/aspFormViewgt
• lt/ContentTemplategt
• lt/aspUpdatePanelgt

15
Demo NotesAccessing Web Services

• Applications can expose data and operations as
  Web services
• SOAP (.asmx, .svc), RESTful (.ashx) models
• Support for JSON-based message format and object
  serialization
• XMLHttp abstractions on the client
• Script proxies for .asmx and .svc services
• Enables calling methods which in turn perform web
  requests, and marshalling of parameters and
  return values

16
Web Services Code Snippet

• Server-side code for Web service (.asmx)
• public class VideoService WebService
• WebMethod
• public Video GetVideoInfo(string VideoId)
• return VideoController.GetVideo(VideoId)
• Client-side code (script proxy)
• ltscript typetext/javascript srcVideoService.a
  smx/jsgtlt/scriptgt
• Client-side code (invoking the service)
• ltscript typetext/javascriptgt
• function onVideoButtonClick(VideoID)
• VideoService.GetVideoInfo(VideoID,
  onVideoInfoAvailable)
• function onVideoInfoAvailable(result)
• var path result.VideoPath

17
Demo NotesPartial Rendering vs. Web Services

• Two models for updating UI incrementally
• Partial rendering when you need page state,
  controls etc. in server-side logic
• Pros Simple to incorporate, use control
  properties, page state
• Cons Full-postback, one request at a time
• Web Services when your server-side logic is
  stateless
• Pros Light-weight, multiple requests in parallel
• Cons Need to write a bit of client script to
  extract data from UI, and package as parameters
  to call web service
• Both are useful tools
• ASP.NET Ajax provides both models
• UpdatePanel
• .asmx/.svc programming model client script
  proxies provide higher level of abstraction over
  XMLHttpRequest

18
Demo NotesScripting

• Improvements to raw scripting
• OOP simulation namespaces, classes, interfaces,
  enums, delegates
• BCL extensions Array, String, etc.
• BCL additions StringBuilder, Debug, etc.
• UI Framework
• Behaviors and Controls on the client to attach
  functionality to DOM elements
• Unobtrusive script model keeps content and
  behavior separate

19
Resources

• ASP.NET AJAX Website
• Downloads, videos, tutorials, and forums
• http//ajax.asp.net

20
ASP.NET AJAX Release RoadmapBeyond

• New features previewed in ASP.NET AJAX Futures
  CTP
• Visual Studio and .NET Framework Orcas
• ASP.NET AJAX will be rolled into .NET Framework
• Better tools for script authoring and debugging
• Better designer support for ASP.NET AJAX server
  controls
• Richer server controls
• Fully localized versions of runtime, tools, and
  documentation(V1.0 already supports localized
  applications)

21
Til slutt

• Hjelp oss å bli bedre
• Fyll ut evalueringen som kommer på e-post
• Gi direkte råd til Microsoft-representanter
• Hold deg oppdatert
• www.microsoft.no/informasjon
• Besøk oss på www.microsoft.no/msdn eller
  www.microsoft.no/technet