Your SlideShare is downloading. ×
0
Developing Rich Web Applications
with ASP.NET AJAX

Kashif Alam
Program Manager
Microsoft Corporation
Session Objectives And
Key Takeaways
 Session Objective:
  Introduction to "ASP.Net AJAX" framework for developers
 Key Ta...
“ASP.Net AJAX”

 A framework for building next generation, cross-
 platform, browsing experiences
   Ubiquitous, cross-pla...
“ASP.Net AJAX”

Browser   ASP.Net AJAX Client          Web Server
Clients   JavaScript Libraries
                         ...
Server Or Client Centric?

  Server-centric web sites and apps
    Work with existing server application model
    Keep co...
“ASP.Net AJAX” Server Controls
 Easily build rich experiences with ASP.NET
   Application UI and core logic still runs on ...
“ASP.Net AJAX” Server Controls
Reducing full roundtrips

   <asp:UpdatePanel> control
      Easily define “updatable” regi...
“ASP.Net AJAX” Server Controls
Adding interactivity

   “ASP.Net AJAX” client behaviors
      Reusable piece of interactiv...
“ASP.Net AJAX” Server Controls
Adding interactivity

   “ASP.Net AJAX” control extenders
      Extend ASP.NET controls wit...
Building Contact List app
“ASP.Net AJAX” Server Controls

       Browser
       Browser                                          Server Application
...
“ASP.Net AJAX” Script Framework
 Scenarios
    Mash-up and composite applications and sites
    Components and Gadgets (Li...
“ASP.Net AJAX” Script Framework
Networking

  A networking stack for asynchronous
  services
  Easy access to server-based...
“ASP.Net AJAX” Script Framework
Component and control model

  Enables rich encapsulation and reuse
     For UI behavior
 ...
“ASP.Net AJAX” Script Framework
Component and control model
   Search for: <input id=“Query" type="text" />
   <div id="co...
“ASP.Net AJAX” Script Framework
Component and control model
   Search for: <input id=“Query" type="text" />
              ...
“ASP.Net AJAX” Script Framework
Client-centric application model


        Browser
        Browser                        ...
“ASP.Net AJAX” Script Framework
Using the script library without ASP.NET

   Use “ASP.Net AJAX” client script with any ser...
Server Or Client Centric?

  Server-centric web sites and apps
    Work with existing server application model
    Keep co...
How Do I Get Started?
    “ASP.Net AJAX” 1.0 & Futures CTP
      ASP.Net AJAX 1.0 available online now.
      Preview upda...
Questions
Thank You!
© 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only.
                 ...
Upcoming SlideShare
Loading in...5
×

Developing Rich Web Applications with ASP.NET AJAX

1,021

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,021
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
40
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Developing Rich Web Applications with ASP.NET AJAX"

  1. 1. Developing Rich Web Applications with ASP.NET AJAX Kashif Alam Program Manager Microsoft Corporation
  2. 2. Session Objectives And Key Takeaways Session Objective: Introduction to "ASP.Net AJAX" framework for developers Key Takeaway: ASP.Net AJAX provides an evolution for the next generation web applications
  3. 3. “ASP.Net AJAX” A framework for building next generation, cross- platform, browsing experiences Ubiquitous, cross-platform, browser support Highly productive framework for building AJAX- enabled web applications Rich tool support for designer and developer workflow No cost, free tool support, easy to use
  4. 4. “ASP.Net AJAX” Browser ASP.Net AJAX Client Web Server Clients JavaScript Libraries Apache & PHP IE PreviewGlitz.js IIS & ASP.NET PreviewDragDrop.js JSON Bridge Support Firefox PreviewScript.js Mashup Bridge Support MicrosoftAjaxWF.js Membership & Personalization Support Safari MicrosoftAjax.js ASP.NET Server Control Integration
  5. 5. Server Or Client Centric? Server-centric web sites and apps Work with existing server application model Keep core UI/application logic on server Improve latency, interactivity, personalization Client-centric browser applications Fully exploit DHTML in presentation tier Use AJAX for data, services, composition Enable new immersive experiences “ASP.Net AJAX” provides a great framework for both
  6. 6. “ASP.Net AJAX” Server Controls Easily build rich experiences with ASP.NET Application UI and core logic still runs on server Avoid need to master JavaScript and async programming Use AJAX techniques to reduce full roundtrips Enable incremental page UI updates Examples: data navigation and editing, form validation, auto refresh Fall back for down-level browsers Richer interactivity for existing ASP.NET controls Enrich the client UI experience of web applications Examples: auto-completion, drag-and-drop, tooltips
  7. 7. “ASP.Net AJAX” Server Controls Reducing full roundtrips <asp:UpdatePanel> control Easily define “updatable” regions of a page Server roundtrips become asynchronous “ASP.Net AJAX” handles all the infrastructure <asp:UpdatePanel id=“u1” runat=“server”> <ContentTemplate> <!-- This content can be dynamically updated! -> <asp:Calendar id=“cal1” runat=“server”/> <ContentTemplate> </asp:UpdatePanel>
  8. 8. “ASP.Net AJAX” Server Controls Adding interactivity “ASP.Net AJAX” client behaviors Reusable piece of interactive functionality Attach to HTML UI declaratively or in code Examples: Drag-and-drop Tooltips Popups Auto-complete Easily extend or write your own in Javascript
  9. 9. “ASP.Net AJAX” Server Controls Adding interactivity “ASP.Net AJAX” control extenders Extend ASP.NET controls with “ASP.Net AJAX” behaviors Encapsulate both client and server behavior Same familiar programming model as ASP.NET server controls <asp:TextBox runat="server" ID="TextBox1" /> <asp:AutoCompleteExtender runat="server" ID="AC1” TargetControlID="TextBox1" ServicePath="AutoComplete.asmx“ ServiceMethod="GetWords" Enabled="true" /> </asp:AutoCompleteExtender>
  10. 10. Building Contact List app
  11. 11. “ASP.Net AJAX” Server Controls Browser Browser Server Application Server Application Initial Rendering Pages Pages Presentation (UI + Behavior) Presentation (HTML/CSS) (HTML/CSS) Input Data UI Behavior UI Behavior Updated UI + Behavior (Managed (Managed Code) Code) “ASP.Net AJAX” Script “ASP.Net AJAX” Script ASP.NET ASP.NET Framework Framework Component/UI Component/UI Client Client Page Page Application Application Framework, Framework, Application Application Framework, Framework, Services Services Controls Controls Services Services Server Controls Server Controls
  12. 12. “ASP.Net AJAX” Script Framework Scenarios Mash-up and composite applications and sites Components and Gadgets (Live.com, Windows Sidebar) Powerful script framework Rich type system and class library for Javascript Component model and UI framework Rich client-side data access and databinding Easily integrated with server application model Easily consume web services from browser Script access to ASP.NET application services Server-side bridge to reuse 3rd party services
  13. 13. “ASP.Net AJAX” Script Framework Networking A networking stack for asynchronous services Easy access to server-based services Integrated with ASP.NET application services
  14. 14. “ASP.Net AJAX” Script Framework Component and control model Enables rich encapsulation and reuse For UI behavior For non-visual components – data, services Rich client-side data-binding and validation Clean developer/designer workflow UI defined using standard XHTML and CSS Page behavior defined and attached separately “ASP.Net AJAX” components and controls can be declared procedurally or declaratively
  15. 15. “ASP.Net AJAX” Script Framework Component and control model Search for: <input id=“Query" type="text" /> <div id="completionList"></div> ........ function doLoad() { var auto1 = new Web.UI.AutoCompleteBehavior(); auto1.set_completionList($("completionList")); auto1.set_serviceURL("AutoCompleteService.asmx"); auto1.set_serviceMethod("GetCompletionList"); auto1.set_completionSetCount(15); auto1.set_completionInterval(500); var txt1 = new Web.UI.TextBox(document.getElementById(‘Query')); txt1.get_behaviors().add(auto1); txt1.initialize(); auto1.initialize(); }
  16. 16. “ASP.Net AJAX” Script Framework Component and control model Search for: <input id=“Query" type="text" /> id=“ <div id="completionList"></div> ........ <script type="text/xml-script"> type="text/xml- <page xmlns:script="http://schemas.microsoft.com/xml-script/2005"> xmlns:script="http://schemas.microsoft.com/xml- <components> <textBox id=“Query"> id=“ <behaviors> <autoComplete completionList="completionList" serviceURL="AutoCompleteService.asmx" serviceMethod="GetWordList" completionSetCount="15" completionInterval="500" /> </behaviors> </textBox> </components> </page> </script>
  17. 17. “ASP.Net AJAX” Script Framework Client-centric application model Browser Browser Server Application Server Application Presentation Presentation Initial Rendering (HTML/CSS) Pages Pages (HTML/CSS) (UI + Behavior) ““Atlas” Atlas” Service Service Data Proxies UI Behavior UI Behavior UI Behavior UI Behavior Proxies Data (Managed (Managed (Script) (Script) Code) Code) “ASP.Net AJAX” Script Fx “ASP.Net AJAX” Script Fx ASP.NET ASP.NET Component/UI Component/UI Client Client Page Page Application Application Framework, Framework, Application Application Framework, Framework, Services Services Controls Controls Services Services Server Controls Server Controls
  18. 18. “ASP.Net AJAX” Script Framework Using the script library without ASP.NET Use “ASP.Net AJAX” client script with any server Get the client script files from Program Files directory after installation What ASP.NET provides Great integration with server-centric UI and programming model Browser detection Access to rich set of application services Web services, proxies, and bridges
  19. 19. Server Or Client Centric? Server-centric web sites and apps Work with existing server application model Keep core UI/application logic on server Reduce latency, improve interactivity, personalization Client-centric browser applications Fully exploit DHTML in presentation tier Use AJAX for data, services, composition Enable new immersive experiences “ASP.Net AJAX” provides a great framework for both
  20. 20. How Do I Get Started? “ASP.Net AJAX” 1.0 & Futures CTP ASP.Net AJAX 1.0 available online now. Preview updated on 1-2 month basis Installs on Visual Web Developer 2005 and ASP.NET 2.0 Community site: http://ajax.asp.net Download the latest bits ASP.Net AJAX Control Toolkit Tutorials, samples, forums, resources Blogs http://weblogs.asp.net/scottgu http://www.nikhilk.net http://weblogs.asp.net/bleroy http://blogs.msdn.com/kashif We want your feedback! kalam@Microsoft.com
  21. 21. Questions
  22. 22. Thank You!
  23. 23. © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. presentation MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY. SUMMARY.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×