Developing Rich Web Applications with ASP.NET AJAX
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Developing Rich Web Applications with ASP.NET AJAX

on

  • 1,321 views

 

Statistics

Views

Total Views
1,321
Views on SlideShare
1,320
Embed Views
1

Actions

Likes
1
Downloads
37
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Developing Rich Web Applications with ASP.NET AJAX Presentation Transcript

  • 1. Developing Rich Web Applications with ASP.NET AJAX Kashif Alam Program Manager Microsoft Corporation
  • 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. “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. “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. 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. “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. “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. “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. “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. Building Contact List app
  • 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. “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. “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. “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. “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. “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. “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. “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. 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. 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. Questions
  • 22. Thank You!
  • 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.