ASP.NET AJAX - PowerPoint PPT Presentation

1 / 18
About This Presentation
Title:

ASP.NET AJAX

Description:

Client script framework for easy script creation and reuse ... Gi direkte r d til Microsoft-representanter. Hold deg oppdatert. www.microsoft.no/informasjon ... – PowerPoint PPT presentation

Number of Views:64
Avg rating:3.0/5.0
Slides: 19
Provided by: janeblo
Category:
Tags: ajax | asp | net | raad

less

Transcript and Presenter's Notes

Title: 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
Write a Comment
User Comments (0)
About PowerShow.com