Building the Next Generation of Web Applications with ASP.NET ...

  • Published on

  • View

  • Download


<ul><li>1.Andy Beaulieu MCT, MCSD</li></ul> <p>2. What We Will Cover </p> <ul><li>What is AJAX? </li></ul> <ul><li><ul><li>Some example sites using AJAX </li></ul></li></ul> <ul><li><ul><li>AJAX Technology </li></ul></li></ul> <ul><li><ul><li> The Competition - some other libraries for AJAX under .NET </li></ul></li></ul> <ul><li>Building Server-Centric AJAX Applications </li></ul> <ul><li><ul><li>Using UpdatePanel and UpdateProgress Controls </li></ul></li></ul> <ul><li>Building Client-Centric AJAX Applications </li></ul> <ul><li><ul><li>Eye Candy</li></ul></li></ul> <ul><li><ul><li>Data Completion </li></ul></li></ul> <ul><li><ul><li>Calling a Web Service, DataSets </li></ul></li></ul> <ul><li>Extending AJAX </li></ul> <ul><li>Tools and Resources </li></ul> <p>3. What is AJAX? </p> <ul><li>AJAX buzzword </li></ul> <ul><li><ul><li>Web development technique for creating more interactive and responsive web applications using available browser technologies </li></ul></li></ul> <ul><li><ul><li>AJAX == Asynchronous JavaScript and XML </li></ul></li></ul> <ul><li><ul><li><ul><li>refers to the ability of a browser to request data from the server in the background (asynchronously)</li></ul></li></ul></li></ul> <ul><li><ul><li>AJAX buzzword has been extended to include Eye Candy </li></ul></li></ul> <ul><li><ul><li><ul><li>Various effects such as animation, fades, shadows, etc. </li></ul></li></ul></li></ul> <p>4. Normal Web Application (non-Ajax) Browser Dumb Client Presentation (HTML/CSS) </p> <ul><li>Entire page is refreshed every time on a postback </li></ul> <ul><li><ul><li>Browser flashes </li></ul></li></ul> <ul><li><ul><li>Page Scrolls back to the top </li></ul></li></ul> <ul><li><ul><li>Inefficient use of bandwidth </li></ul></li></ul> <ul><li><ul><li>Does not lend itself to interactive applications (ie maps, data entry) </li></ul></li></ul> <p>ASP.NET Application Pages Data Postback Full Page Response Initial PageRequest 5. Ajax Enabled Web Application Browser Smart Client Presentation (HTML/CSS) </p> <ul><li>Entire page is loaded on first request only </li></ul> <ul><li>Browser acts as Smart Client and can contain UI logic (JavaScript) </li></ul> <ul><li>Efficient use of bandwidth and server resources </li></ul> <ul><li>No more browser flash or scroll to top! </li></ul> <ul><li>More interactive UI for things like Data Entry, Maps, etc. </li></ul> <p>ASP.NET Application Pages Data XmlHTTPRequest Data Response Initial PageRequest 6. Some Example AJAX Sites Virtual Earth, Google Maps, etc 7. Some Example AJAX Sites Personalized Portals, Mashups ( 8. Some Example AJAX Sites Sink My Ship ( 9. AJAX Technology </p> <ul><li>DHTML DOM </li></ul> <ul><li><ul><li>Browser DOM manipulated through JavaScript to dynamically display and interact with information </li></ul></li></ul> <ul><li><ul><li>CSS styles are accessible through DOM </li></ul></li></ul> <ul><li>JavaScript </li></ul> <ul><li><ul><li>Loosely typed scripting language </li></ul></li></ul> <ul><li><ul><li>Mostly used as the glue to wire things together on a page </li></ul></li></ul> <ul><li><ul><li>Can quickly become hard to maintain </li></ul></li></ul> <ul><li>XMLHttpRequest object</li></ul> <ul><li><ul><li>Exchange data asynchronously with the web server </li></ul></li></ul> <ul><li><ul><li>Any data format will work - HTML fragments, text, XML, JSON </li></ul></li></ul> <ul><li><ul><li>Introduced in 1998 for IE 5.0 </li></ul></li></ul> <p>10. The Competition There are other AJAX libraries for .NET </p> <ul><li>Ajax.NET Professional </li></ul> <ul><li><ul><li> </li></ul></li></ul> <ul><li><ul><li>Uses attributes to make methods callable through AJAX </li></ul></li></ul> <ul><li><ul><li>Includes DataSet wrapper for manipulating DataSets in the browser </li></ul></li></ul> <ul><li><ul><li>No eye candy effects </li></ul></li></ul> <ul><li>A comparison of many more Ajax Libraries </li></ul> <ul><li><ul><li> </li></ul></li></ul> <ul><li>What about WPF/E and Flash?</li></ul> <ul><li><ul><li>Not AJAX, but these also offer cross-platform, responsive web UIs </li></ul></li></ul> <p>11. What is MicrosoftASP.NET Ajax? </p> <ul><li>High productivity AJAX development </li></ul> <ul><li>Builds on top of ASP.NET 2.0 </li></ul> <ul><li>Works cross-browser </li></ul> <ul><li>End-to-End Framework </li></ul> <ul><li>Extensible </li></ul> <ul><li>Download at </li></ul> <p>12. Architecture Diagram Atlas Server Framework Atlas Client Framework and Services Atlas-enabledASP.NET Pages Web Services (ASMX or WCF) HTML, Script, Atlas Markup Atlas Service Proxies ASP.NET Atlas Server Extensions AtlasServer Controls App Services Bridge Web Services Bridge Atlas Client Script Library Controls, Components Script Core Base Class Library Component Model and UI Framework Browser Compatibility Atlas Client Application Services Local Store, Browser Integration ASP.NET 2.0 Application Services Page Framework, Server Controls 13. There are TWO Programming Models </p> <ul><li>Server-Centric Programming Model </li></ul> <ul><li><ul><li>Utilize knowledge of ASP.NET Server Controls (grids, etc). </li></ul></li></ul> <ul><li><ul><li>Good for adding AJAX to existing Applications </li></ul></li></ul> <ul><li><ul><li>Not as efficient as Client-Centric Model </li></ul></li></ul> <ul><li>Client-Centric Programming Model </li></ul> <ul><li><ul><li>Enhanced JavaScript </li></ul></li></ul> <ul><li><ul><li><ul><li>Namespaces, Behaviors, Declarative Programming through XML Script </li></ul></li></ul></li></ul> <ul><li><ul><li>More efficient than Server-Centric </li></ul></li></ul> <p>14. Server-Centric Programming Model Browser Application Presentation (HTML/CSS) ASP.NET Application Services Page Framework, Server Controls Atlas Script Framework Client Application Services Component/UI Framework, Controls ASP.NET Application Pages UI Behavior (Managed Code) Input Data Updated UI + Behavior Initial Rendering (UI + Behavior) 15. UpdatePanel and UpdateProgress Controls Server-Centric Programming Model 16. Enriching ASP.NET Applications </p> <ul><li>Ajax-Enabling Pages </li></ul> <ul><li><ul><li>Add a ScriptManager control </li></ul></li></ul> <ul><li>Enable Partial Rendering on ScriptManager (true by default) </li></ul> <ul><li><ul><li>Continue to use the postback model, but work out-of-band </li></ul></li></ul> <ul><li><ul><li>Only portions of the page are rendered on the server </li></ul></li></ul> <ul><li><ul><li>Existing page is updated using script </li></ul></li></ul> <ul><li>Extend Existing Controls </li></ul> <ul><li><ul><li>Add rich client-side behavior to enable key scenarios </li></ul></li></ul> <ul><li><ul><li>AutoCompleteExtender, etc. </li></ul></li></ul> <ul><li>ASP.NET Ajax Script Framework is an enabling technology </li></ul> <ul><li><ul><li>Control developers have a richer target to build for </li></ul></li></ul> <ul><li><ul><li>Page developers continue to use server controls </li></ul></li></ul> <p>Enable key AJAX and user experience scenarios in an incremental manner while preserving the existing server controls and server-side development models 17. Client-Centric Programming Model Browser Application Presentation (HTML/CSS) Atlas Service Proxies UI Behavior (Script) ASP.NET Application Services Page Framework, Server Controls ASP.NET Application Pages Web Services Atlas Script Framework Client Application Services Component/UI Framework, Controls Initial Rendering (UI + Behavior) Data Data 18. Example Key Scenarios </p> <ul><li>Dynamically update controls </li></ul> <ul><li><ul><li>User selects Country </li></ul></li></ul> <ul><li><ul><li><ul><li>States are populated based on country selection </li></ul></li></ul></li></ul> <ul><li><ul><li><ul><li>Cities are populated based on state selection </li></ul></li></ul></li></ul> <ul><li><ul><li>User selects Product </li></ul></li></ul> <ul><li><ul><li><ul><li>Available accessories are populated based on product selection </li></ul></li></ul></li></ul> <ul><li>AutoComplete </li></ul> <ul><li><ul><li>Populates optional dropdown with Server data </li></ul></li></ul> <p>19. Client-centric Web Applications </p> <ul><li>Disciplined and more manageable script </li></ul> <ul><li><ul><li>OOP in JavaScript </li></ul></li></ul> <ul><li><ul><li>.NET-like APIs on core script objects </li></ul></li></ul> <ul><li><ul><li>Classes to encapsulate data and logic, and attach to HTML in an unobtrusive manner </li></ul></li></ul> <ul><li><ul><li>Declarative XML script to define behavior of application (more designer-oriented) </li></ul></li></ul> <ul><li><ul><li>Cross-browser abstraction layer to provide a uniform DOM API </li></ul></li></ul> <ul><li>AJAX Control Toolkit </li></ul> <p>Provide a script framework that makes it possible to create next-generation interactive applications, and to interact easily with the server and services while scripting in a disciplined manner. 20. Eye Candy and Data Completion Client-Centric Programming Model 21. Calling a Web Service from JavaScript and returning a DataSet Client-Centric Programming Model 22. Extending ASP.NET Ajax </p> <ul><li>Ajax Control Toolkit is a community driven, open source project hosted at Codeplex. </li></ul> <ul><li>DEMO: Open and Run the Control Toolkit Project </li></ul> <ul><li>You can create your own Control Extenders like those in the Toolkit! </li></ul> <ul><li>Design-time support is provided </li></ul> <ul><li>Enhanced JavaScript through library provides namespaces, events, properties, and more. </li></ul> <ul><li>Share your Control creations on Codeplex! </li></ul> <p>23. Creating your Own Control Extender Client-Centric Programming Model 24. Extending ASP.NET Ajax </p> <ul><li>Files Created by the Extender Project </li></ul> <ul><li><ul><li>****Behavior.js -contains JavaScript that you write to execute on the client. Behaviors are attached to controls. </li></ul></li></ul> <ul><li><ul><li>****Extender.cs -this is where you will add properties that you want exposed by your control at design time. </li></ul></li></ul> <ul><li><ul><li>****Designer.vb - This is a class used for Design-Time functionality in VS (usually do not have to modify) </li></ul></li></ul> <p>25. Extending ASP.NET Ajax </p> <ul><li>Creating Properties in an Ajax Control </li></ul> <ul><li><ul><li>Declare the Property in the Behaviors prototype: </li></ul></li></ul> <ul><li><ul><li>Declare the Property in the Extender (for the Designer): </li></ul></li></ul> <p>[ExtenderControlProperty] [DefaultValue("")] public int fps { get { return GetPropertyIntValue("fps"); } set{ SetPropertyIntValue("fps", value); } } get_ property: function() { return this._ property ; }, set_ property: function(value) { this._property = value; }, 26. Extending ASP.NET Ajax </p> <ul><li>Creating Events in an Ajax Control </li></ul> <ul><li><ul><li>Declare the Event: </li></ul></li></ul> <ul><li><ul><li>Raise the event: this._raiseEvent( eventName ',eventargs); </li></ul></li></ul> <p>add_ eventName: function(handler) { this.get_events().addHandler( eventName ', handler); }, remove_ eventName: function(handler) { this.get_events().removeHandler( eventName ', handler); }, 27. Session Summary </p> <ul><li>Ajax is a key part of the ASP.NET story </li></ul> <ul><li>ASP.NET Ajax Goals </li></ul> <ul><li><ul><li>Make it super easy to incorporate AJAX patterns, and create rich user experiences, and leverage the browser </li></ul></li></ul> <ul><li><ul><li>Create a natural progression from Web applications to Smart clients using a common application model </li></ul></li></ul> <ul><li>preview builds for greater transparency, more opportunities for feedback to have impact </li></ul> <p>28. Important NOTES!! </p> <ul><li>Tools to download </li></ul> <ul><li><ul><li>Web Development Helper </li></ul></li></ul> <ul><li><ul><li>IE Developer Toolbar;displaylang=en </li></ul></li></ul> <ul><li><ul><li>Fiddler </li></ul></li></ul> <ul><li>IE7 broke the ability to set breakpoints in JavaScript when placed inside a </li></ul> <ul><li>Intro to Forms Authentication with ASP.NET Ajax - </li></ul> <p>29. Resources </p> <ul><li>ASP.NET Ajax Web site </li></ul> <ul><li><ul><li></li></ul></li></ul> <ul><li><ul><li>Bits, Forums, Quickstarts, Docs, Updates </li></ul></li></ul> <ul><li>Blogs </li></ul> <ul><li><ul><li> </li></ul></li></ul> <ul><li><ul><li> </li></ul></li></ul> <ul><li><ul><li> </li></ul></li></ul>


View more >