• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide
  • AJAX is a buzzword acronym which stands for Asynchronous JavaScript And Xml. At it’s simplest, it is just a technique that brings together DHTML, Javascript and XMLHttpPosts together to produce a visually compelling web based application that doesn’t need to refresh the web page, because the actual request to get new data from the web server is done asynchronously via the XMLHttpPost mechanism that was developed by Microsoft for Exchange’s Outlook Web Access. Developers and users can experience frustration with the performance of the traditional request/response model used by most web applications. Because web applications are stateless, every time the data or a ui element on a page needs to be updated, the entire page must be posted back to the server. The page must make a round trip. Numerous round trips, especially those involving large amounts of data, can really slow down the user’s experience. Utilizing AJAX technologies, we can update only certain portions of a page, allowing us to overcome the limitation of requiring an entire page update just to update a small piece. Technology is very widely deployed and already in use for some of the most popular websites. The following slides will give some examples of AJAX in use today. 04/29/10 11:54 ©2005 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • A normal (non-Ajax) application performs its processing in the following manner: First, the browser client requests a page from the server and the entire page is returned to the client. The user fills in the HTML form or selects a link causing a Postback. The server recreates and returns an entire new web page to the client. There are several issues with this “classic” web application architecture. Because the entire page is refreshed at the client, a browser “flash” occurs and the page is scrolled to the top, even if the user was scrolled down the page. Network usage is very inefficient because the entire page is always transferred to the client. Because of the above issues, classic web applications do not lend themselves well to highly interactive applications, such as mapping applications and data entry.
  • An Ajax-enabled web application performs its processing in the following manner: First, the browser client requests a page from the server and the entire page is returned to the client. The user fills in an HTML form or selects a link which causes JavaScript code to execute an XmlHTTPRequest, passing parameters and calling a function on the web server. This is an asynchronous request, meaning the browser does not wait for the return.The server processes the request and typically returns only data back to the web browser. A callback function is executed in the web browser to process the returned data. Because Ajax applications persist the original web page returned from the server, and only request data back from the web server, there are the following advantages: A more interactive UI can be created for things like fast data entry and mapping applications. The browser “flash” and “scroll to top” effects of a classic web page are avoided. The network and server resources are more efficiently used.
  • Microsoft’s Live Search is one example of a popular website using AJAX technology to deliver an advanced web experience. The user can scroll the map around without a full postback and page refresh. Instead, only the image is updated. To try this DEMO: - open a web browser and go to http://local.live.com/ - Go to the “maps” tab and select “Birds Eye View” on the toolbox - Enter “500 S Franklin St, Syracuse, NY” in the “Enter City, Address or Landmark” textbox Other mapping sites such as Google Maps and Mapquest use AJAX in a similar manner. * Interesting note: The aerial image data is provided by Rochester, NY based “Pictometry” http://www.pictometry.com/ 04/29/10 11:54 ©2005 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • PageFlakes.com is another example of a website using AJAX. In this case, the site offers a highly personalized page for the user – components can be dragged and dropped in different positions on the page and those positions are saved. Mashups are another popular way of using AJAX technology. A Mashup is a web application that combines content or functionality from more than one website into a seamless application. An example of a mashup site is NaviTraveller (http://www.navitraveler.com), which combines Google maps with service ratings for dining, hotels, etc. 04/29/10 11:54 ©2005 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • SinkMyShip.com is an example AJAX site that allows users to play a multiplayer BattleShip game. While there are still significant limitations on browser technology, it is possible to do simple 2D games and have acceptable performance. 04/29/10 11:54 ©2005 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • There are three main browser technologies that allow for AJAX oriented applications to be developed: DHTML DOM Dynamic HTML (DHTML) and the Document Object Model (DOM) allow HTML page elements to be manipulated through JavaScript. This allows for the dynamic update of page elements and data. CSS styles are accessible through the DOM so that element appearance and formatting can be dynamically changed through JavaScript. JavaScript JavaScript is a loosely typed scripting language that is available in modern browsers. Mostly used as the “glue” to wire things together on a page JavaScript code an quickly become hard to maintain because of the loosely typed language and lack of good IDE support (but “Orcas” will offer better support!) XMLHttpRequest object Allows exchange of data asynchronously with the web server Any data format will work - HTML fragments, text, XML, JSON Introduced in 1998 for IE 5.0 by the Exchange Outlook Web Access team 04/29/10 11:54 ©2005 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • ASP.NET Ajax is not the only option for creating AJAX enabled applications. In fact, at the time of this writing it is still in Beta but has a “go live” license available. Other AJAX libraries for ASP.NET include Ajax.NET Professional. When choosing appropriate technologies for a solution, a developer should not rule out less “pure” technologies such as Flash or WPF/E (which is in early “CTP” stage). Both of these technologies offer a similar user experience as AJAX are in many ways easier to develop.
  • “ Atlas” is a project by Microsoft to develop a set of tools that can be utilized within existing ASP.NET applications (or new ones) to implement AJAX functionality easily and quickly. It uses standard ASP.NET technologies, like Server Controls to accomplish this – which gives us a great benefit… we can use Visual Studio 2005 to build our applications – with the help of the “Atlas” assembly reference. “ Atlas” is designed to be fully supported across any browser platform and can be easily extended via the exposed APIs. When is Atlas being released? Atlas has been broken up between Atlas framework and Atlas Toolkit. Toolkit will drive adoption of framework. Toolkit Released now on Codeplex released now, so true open source. With Full Support – it is a Microsoft Product. RTM for the Framework with Orcas. Long lifecycle plan for Atlas. Ongoing release schedule. Pieces that are ready for RTM will be included. Is Atlas going to become part of the official .net framework? The toolkit will not. The atlas framework will never become part of that framework so we’re not bound to the release schedule of .net. The reason it won’t be open source (framework) are that parts of the framework is licensed.
  • In this diagram, we see the two “sides” of “Atlas” On the left, we see the client based technologies, on the right, the server based technologies. In the next two slides, we’ll discuss each side in more detail. It is interesting to point out that the Script Core (JavaScript files) for Atlas are installed to C:Program FilesMicrosoft ASP.NETASP.NET 2.0 AJAX Extensionsv1.0.61025MicrosoftAjaxLibrarySystem.Web.Extensions1.0.61025.0
  • Here we can see how the Server-Centric Programming Model works. The main point here is that as the browser application requests a page, the normal page flow operations occur, but when a client page requests additional information, the data is handled by a different mechanism (UI Behavior) on the server. The postback mechanism doesn’t interfere with the client rendering as a typical web based application does.
  • In this demonstration we will use the UpdatePanel and UpdateProgress controls to improve the experience of an existing website. Open Windows Explorer and browse to directory C:Program FilesMicrosoft LearningAtlasDemosUpdatePanel Open the UpdatePanel.sln Solution File Right-click Starter.aspx and try the page out. This is a simple master/detail type page with a GridView and DetailsView. Notice how each action such as Selecting a row or changing the page causes a postback. Lets add UpdatePanels to the page to make the user experience a bit better! First, go to the toolbox and find the “AJAX Extensions” section. Drag a ScriptManager control onto the form at the top of the page. Add an UpdatePanel to the top of the page and Drag/Drop the GridView control INTO the UpdatePanel. Add a second UpdatePanel to the bottom of the page and Drag/Drop the DetailsView INTO the second UpdatePanel. Run the page. Notice that the entire page is not longer posted back, and screen refresh is not a problem. OPTIONAL TASK: Using Nikhil’s Web Development Helper or Fiddler, examine the HTTP traffic coming back in the response. Notice that the entire HTML content to replace both UpdatePanels is being sent back EACH request! This is not very efficient, so we can make it better… To make the page more intelligent about refreshing its UpdatePanels, we can set the UpdateMode property and apply Triggers to the UpdatePanels. Select UpdatePanel2 in the properties window and set its UpdateMode to Conditional. This will cause the contents of the UpdatePanel to only refresh under certain conditions. Open the Triggers Collection in the Properties Window. Notice there are two “Add” options: PostbackTrigger and AsyncPostbackTrigger. We can use AsyncPostbackTrigger to specify both a control to key on AND an Event. Add an AsyncPostbackTrigger and set the ControlId to GridView1 and the EventName to SelectedIndexChanged. Now run the application. You can use the Web Development Helper to log the HTTP requests and see that the Response stream only contains UpdatePanel1 unless the SelectedIndexChanged Event is fired Note that you can also use PostbackTriggers to force an UpdatePanel to update when a control OUTSIDE of any UpdatePanels needs to cause a refresh. UpdateProgress Demo Drag an UpdateProgress Control from the “AJAX Extensions” section of the toolbar into UpdatePanel2. Set its “DisplayAfter” property to 10 milliseconds in the Properties Window (this determines how long of a delay will force the UpdateProgess Control should be shown) From the images subfolder, drag the BusySpinningWheel.gif image into UpdateProgess1. (Optional) Add a Sleep call in the SelectedIndexChanged event for GridView1: protected void GridView1_SelectedIndexChanged(object sender, EventArgs e) { System.Threading.Thread.Sleep(1000); } 4. Run the application, and click a few “Select” hyperlinks. Notice how the busy icon pops up between selected rows.
  • This slide details the steps to adding ‘Atlas’ content to an existing application. Step 1. Add the ScriptManager control to the page. Step 2. Set the “Enable Partial Rendering” flag. This setting enables a significant amount of code on the client side to allow the page to be updated “behind” the scenes via script. Step 3. Add any ‘Atlas’ controls to the page. UpdatePanel is used for existing controls. AutoCompleteExtender to enhance existing textboxes and the others for new functionallity. Step 4. Write any custom script code necessary to complete the desired functionallity… utilizing the Client Side Libraries to simplify the development.
  • The client-centric programming model is similar to the server centric model, except the postback mechanism does not get invoked from the server controls. Instead, the client side Javascript code calls server based web services via “Atlas” Service Proxies. When the web service call returns, the data is passed into a call back method for processing on the client side (again, via Javascript code.)
  • Here are some example ‘Atlas’ scenarios. 1.) Dynamically updating the web pages, but limiting the update to just the area of the page affected. Like a dropdown control that updates another dropdown control based on the item selected. 2.) Raising event notification to the user without having the page do a “meta-refresh.” This scenario makes a real nice user experience by “popping up” a notification (a.k.a. Toast) to the user to indicate a certain event. 3.) AutoComplete is the ability of a textbox (or similar control) to display additional “pick lists” to the user based on the characters entered. The pick list dynamically changes based on the characters entered.
  • The slide describes the client side scripting technology provided in the ‘Atlas’ library. The scripting framework allows a developer to produce Object Oriented Programming in Javascript utilizing libraries of script code that can be called like any other .NET API. It contains encapsulated classes for things like data and logic and allows you to attach that code to the HTML elements very easily. You can also utilize the XML script features to define the behavior of your application without having to resort to code. Lastly, there is a cross-browser abstraction layer which provides a uniform API set for the various different browser applications available. (This is the feature set that allows this code to work in IE, FireFox, Netscape, Mozilla, etc.)
  • In this section we will do two demos: an “Eye Candy” demo showing some nice Ajax effects and a “Data Completion” demo showing dynamic dropdowns and autocomplete. DropShadow Demo Open the EyeCandy Solution in directory C:Program FilesMicrosoft LearningAtlasDemosEyeCandy Notice there are two projects in this solution: Animation and DropShadow. We will be working with DropShadow in this demo. Open Starter.aspx and notice it contains a simple Panel with some content. From the “AJAX Extensions” tab of the Toolbox, drag a ScriptManager control onto the form. From the “AjaxControlToolkit” tab of the Toolbox, drag a DropShadowExtender onto the form and set its TargetControlId to Panel1. View Starter.aspx in the browser and note the DropShadow that has been applied. Go back to the page in Design View and select Panel1 in the Properties Window. Set the Rounded property to True and the Width to 10. View Starter.aspx in the browser again and notice the difference in the DropShadow. Animation Demo We will be working on the Animation project in the Eye Candy solution. Add a new web page to the project called Default.aspx. Go to Design View for Default.aspx. From the images subfolder in the web project, drag asterisk.gif and torus.gif to the page. Right-click each image and select “Run As Server Control”. Drag a ScriptManager Control onto the page. Drag two AnimationExtenders onto the page. Set their TargetControlId’s to IMG1 and IMG2, respectively. 8. Switch to HTML View and add an OnClick animation to AnimationExtender1 so that its tags look like so: <cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Asterisk"> <Animations> <OnClick> <FadeOut Duration=".5" Fps="20" /> </OnClick> </Animations> </cc1:AnimationExtender> 9. Add an OnClick animation to AnimationExtender2 so that its tags look like so: <cc1:AnimationExtender ID="AnimationExtender2" runat="server" TargetControlID="Torus"> <Animations> <OnClick> <Resize Duration="1" Fps="20" Height="100" Width="100" /> </OnClick> </Animations> </cc1:AnimationExtender> 10. View the page in the browser and click on each image. AutoComplete Demo Open the DataCompletion.sln file in C:Program FilesMicrosoft LearningAtlasDemosDataCompletion Examine the AutoComplete project. Note there is a DSPerson Typed DataSet which retrieves data from the AdventureWorks database. Also note that there is a web service called “DataService.cs” and that the [ScriptService] attribute is applied to the class. This allows the web service to be called from ASP.NET Ajax client side controls. Look at the FindContracts method and note that the [ScriptMethod] attribute is applied to this method. This is also needed to allow client-side ajax calls. The FindContacts method also accepts prefixText and count parameters which are required for the AutoCompleteExtender. PrefixText must contain the search prefix string and count is the maximum number of matches to return. Add a new WebForm called Default.aspx. Switch to Design View. From the “AJAX Extensions” tab of the toolbox, drag a ScriptManager onto the form. Then drag an AutoCompleteExtender onto the form. Drag a TextBox control on the form. Set the following properties of the AutoCompleteExtender: MinimumPrefixLength 1 ServiceMethod FindContacts ServicePath DataService.asmx TargetControlId TextBox1 View the page in the browser and try typing in a character or two.
  • This demo shows how to call a web service from JavaScript and return a DataSet. It also shows how to navigate the DataSet contents using JavaScript. Open the DataCompletion.sln file in C:Program FilesMicrosoft LearningAtlasDemosDataCompletion Open web.config and look for “DEMO NOTE”. In RC1, note that the serializers are not in web.config for DataSet, DataRow, and DataTable… So the following section has already been added for you for this demo: <system.web.extensions> <scripting> <webServices> <!-- DEMO NOTE: THIS SECTION NEEDED TO PASS DATASETS!!! --> <jsonSerialization> <converters> <add name="DataSetConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataSetConverter, Microsoft.Web.Preview"/> <add name="DataRowConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataRowConverter, Microsoft.Web.Preview"/> <add name="DataTableConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataTableConverter, Microsoft.Web.Preview"/> </converters> </jsonSerialization> </webServices> </scripting> </system.web.extensions> 3. Examine the AutoComplete project. Note there is a DSPerson Typed DataSet which retrieves data from the AdventureWorks database. 4. Also note that there is a web service called “DataService.cs” and that the [ScriptService] attribute is applied to the class. This allows the web service to be called from ASP.NET Ajax client side controls. 5. Look at the GetPersons method and note that the [ScriptMethod] attribute is applied to this method. This is also needed to allow client-side ajax calls. The GetPersons method also accepts a prefixText parameter to search on Last Name with. And note that the return type is a DataSet . 6. Add a new WebForm to the project called Default.aspx. 7. From the “AJAX Extensions” Tab of the Toolbox, drag a ScriptManager control onto the form. Here we will tell the page about the web service we want to call. In the Properties window for ScriptManager1, click the Ellipsis button (…) next to the Services Collection. Click the Add button and enter “DataService.asmx” in the Path property. Then click ok. 8. From the HTML Tab of the Toolbox, drag an HTML Input (Text) control onto the form. Set the following properties on the control in the Properties Window: id=“txtSearch” Drag an HTML Input (Button) control onto the form. Set the following properties on the control (NOTE that you will need to switch to HTML view for the onclick handler): id=“btnSearch” value="Search“ onclick="callWebService ();“ Drag a Div control onto the form. Set the following properties on the control: id=“divResults” (optional: you can remove the style tags so that the width of the DIV is more appropriate) 9. Add the following JavaScript block just after the <BODY> tag of the page. Note that to call a web service, we must pass (a) any parameters, (b) the callback function, (c) the error handler function, and (d) any optional “context” parameters to be passed to the error or callback function. <script language="javascript" type="text/javascript"> function callWebService() { var searchString = $get("txtSearch").value; var ds = DataService.GetPersons(searchString, onGetPersonsComplete, onError, searchString); } function onGetPersonsComplete(result, userContext) { var ds = result; var sNames = "<b>Found Names:</b><br/>"; if (ds.tables[0].rows == null) { // no rows were found! sNames = "<b>NO ROWS FOUND</b>"; } else { for (i=0; i<ds.tables[0].rows.length-1; i++) { sNames += ds.tables[0].rows[i].LastName + ", " + ds.tables[0].rows[i].FirstName + "<br/>"; } } $get("divResults").innerHTML = sNames; } function onError(result) { alert("Error: " + result.get_message()); } </script> 10. Run the solution. Try entering a couple of characters such as “Sm” and click the Search button. 11. How does this work? There are a couple of key pieces that allow an .asmx web service to be called through AJAX. The first is in the httpHandlers section of web.config, which allows the web service to be called: <httpHandlers> <remove verb="*" path="*.asmx"/> <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> </httpHandlers> The second key piece is the ScriptManager Control, where we added the web service reference. This will cause a Web Service Proxy script (JavaScript) to be referenced in the HTML page: <script src="DataService.asmx/jsdebug" type="text/javascript"></script> … this script is requested from your web app when the page is first loaded and contains the proxy code to call the service. You can see this yourself by requesting the same resource at http://localhost:XXXX/DataSetFromService/DataService.asmx/jsdebug (where XXXX is your current web port address). The third key piece is the JSON Serializers. There are JSON serializers/deserializers on both the client and server side. The advantage of JSON over XML is that it is compact and readily consumed by Javascript with a simple eval function call. 12. To examine the JSON Traffic used when calling the web service: - run the project - ensure that Nikhil’s web development helper is visible at the bottom of the IE browser page. If it is not, then select Tools/Web Development Helper. - next to the “HTTP Debugging,” check the Checkbox next to “Enable Logging” - double-click the line in the log window. The top portion of this dialog contains the Request information and the bottom portion contains the response. - visit the “Request Body” tab at the top and notice the request parameters (in JSON format) - visit the “Response Content tab” at the bottom and notice that the Web Development Helper is nice enough to give us a “JSON Object Graph” view showing what the response will look like when deserialized. - change the Viewer to Text. Now we can see what the JSON traffic looked like when coming back from the server.
  • More Eye Candy! The Ajax Control Toolkit ships with examples of all of the other controls. To view these, open the solution in C:Program FilesMicrosoft LearningAtlasControlToolkit. Run the solution.
  • Getting Started Documentation at Good resource for starting is: http://ajax.asp.net/ajaxtoolkit/Walkthrough/CreatingNewExtender.aspx NOTE : MAKE SURE THAT THE LATEST EXTENDER VSI TEMPLATE IS INSTALLED FROM C:Program FilesMicrosoft LearningAtlasControlToolkitAjaxControlExtender Select File/New Project and other “Other Project Types” select “Blank Solution” Name the Solution ColorTextBox and save to C:Program FilesMicrosoft LearningAtlasDemos Right-click the solution and select Add/New Website/ASP.NET AJAX-Enabled Web Site and name the project “TestHarness” saving to C:Program FilesMicrosoft LearningAtlasDemosColorTextBoxTestHarness Right-click the solution and select Add/New Project and select “ASP.NET AJAX Control Project” and name it “ColorTextBox” Notice that three files have been generated for you in the ColorTextBox Control Solution (see next slide for descriptions) Let’s add some Javascript to the behavior to allow text color change whenever the user types a key. Add this JavaScript just before the _onkeyup : function() { var red = Math.floor(Math.random()*256); var green = Math.floor(Math.random()*256); var blue = Math.floor(Math.random()*256); this.get_element().style.backgroundColor = "rgb(" + red + ", " + green + ", " + blue + ")"; }, Attach the OnkeyUp event handler to your function by adding the following into the initialize method: $addHandler(this.get_element(), 'keyup', Function.createDelegate(this, this._onkeyup)); Now, to consume the Control Extender: Right-click the TestHarness project and select Add Reference. Select Projects, and then ColorTextBox. Add a TextBox control onto Default.aspx. Add a Register Prefix in your .aspx page, just below the Page attribute: <%@ Register Assembly="ColorTextBox" Namespace="ColorTextBox" TagPrefix="cc1"%> Add an instance of the ColorTextBox Extender and set its TargetControlId to TextBox1: <cc1:ColorTextBoxExtender ID="ColorTextBoxExtender" runat="server" TargetControlID="TextBox1" /> Try running the solution and typing a few characters
  • When creating a new AJAX Control Extender project, these files are automatically generated for you.
  • This slide shows the necessary steps for adding properties to a Control Extender.
  • More Eye Candy! The Ajax Control Toolkit ships with examples of all of the other controls. To view these, open the solution in C:Program FilesMicrosoft LearningAtlasControlToolkit. Run the solution.


  • 1. Andy Beaulieu MCT, MCSD http://www.andybeaulieu.com
  • 2. What We Will Cover
    • What is AJAX?
      • Some example sites using AJAX
      • AJAX Technology
      • “ The Competition” - some other libraries for AJAX under .NET
    • Building Server-Centric AJAX Applications
      • Using UpdatePanel and UpdateProgress Controls
    • Building Client-Centric AJAX Applications
      • Eye Candy
      • Data Completion
      • Calling a Web Service, DataSets
    • Extending AJAX
    • Tools and Resources
  • 3. What is AJAX?
    • AJAX buzzword
      • Web development technique for creating more interactive and responsive web applications using available browser technologies
      • AJAX == Asynchronous JavaScript and XML
        • refers to the ability of a browser to request data from the server in the background (asynchronously)
      • AJAX buzzword has been extended to include “Eye Candy”
        • Various effects such as animation, fades, shadows, etc.
  • 4. “ Normal” Web Application (non-Ajax) Browser “Dumb Client” Presentation (HTML/CSS)
    • Entire page is refreshed every time on a postback
      • Browser “flashes”
      • Page Scrolls back to the top
      • Inefficient use of bandwidth
      • Does not lend itself to interactive applications (ie maps, data entry)
    ASP.NET Application Pages Data Postback Full Page Response Initial Page Request
  • 5. Ajax Enabled Web Application Browser “Smart Client” Presentation (HTML/CSS)
    • Entire page is loaded on first request only
    • Browser acts as “Smart Client” and can contain UI logic (JavaScript)
    • Efficient use of bandwidth and server resources
    • No more browser flash or scroll to top!
    • More interactive UI for things like Data Entry, Maps, etc.
    ASP.NET Application Pages Data XmlHTTPRequest Data Response Initial Page Request
  • 6. Some Example AJAX Sites Virtual Earth, Google Maps, etc…
  • 7. Some Example AJAX Sites Personalized Portals, Mashups (pageflakes.com)
  • 8. Some Example AJAX Sites Sink My Ship (www.sinkmyship.com)
  • 9. AJAX Technology
      • Browser DOM manipulated through JavaScript to dynamically display and interact with information
      • CSS styles are accessible through DOM
    • JavaScript
      • Loosely typed scripting language
      • Mostly used as the “glue” to wire things together on a page
      • Can quickly become hard to maintain
    • XMLHttpRequest object
      • Exchange data asynchronously with the web server
      • Any data format will work - HTML fragments, text, XML, JSON
      • Introduced in 1998 for IE 5.0
  • 10. “The Competition” There are other AJAX libraries for .NET…
    • Ajax.NET Professional
      • http://www.ajaxpro.info/
      • Uses attributes to make methods callable through AJAX
      • Includes DataSet wrapper for manipulating DataSets in the browser
      • No “eye candy” effects
    • A comparison of many more Ajax Libraries…
      • http://www.daniel-zeiss.de/AJAXComparison/Results.htm
    • What about WPF/E and Flash?
      • Not AJAX, but these also offer cross-platform, responsive web UI’s
  • 11. What is Microsoft ASP.NET Ajax?
    • High productivity AJAX development
    • Builds on top of ASP.NET 2.0
    • Works cross-browser
    • End-to-End Framework
    • Extensible
    • Download at http://ajax.asp.net/
  • 12. Architecture Diagram “ Atlas” Server Framework “ Atlas” Client Framework and Services “ Atlas”-enabled ASP.NET Pages Web Services (ASMX or WCF) HTML, Script, “ Atlas” Markup “ Atlas” Service Proxies ASP.NET “Atlas” Server Extensions “ Atlas” Server 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
    • Server-Centric Programming Model
      • Utilize knowledge of ASP.NET Server Controls (grids, etc).
      • Good for adding AJAX to existing Applications
      • Not as efficient as Client-Centric Model
    • Client-Centric Programming Model
      • Enhanced JavaScript
        • Namespaces, Behaviors, Declarative Programming through XML Script
      • More efficient than Server-Centric
  • 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
    • Ajax-Enabling Pages
      • Add a ScriptManager control
    • Enable Partial Rendering on ScriptManager (true by default)
      • Continue to use the postback model, but work out-of-band
      • Only portions of the page are rendered on the server
      • Existing page is updated using script
    • Extend Existing Controls
      • Add rich client-side behavior to enable key scenarios
      • AutoCompleteExtender, etc.
    • ASP.NET Ajax Script Framework is an enabling technology
      • Control developers have a richer target to build for
      • Page developers continue to use server controls
    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
    • Dynamically update controls
      • User selects Country
        • States are populated based on country selection
        • Cities are populated based on state selection
      • User selects Product
        • Available accessories are populated based on product selection
    • AutoComplete
      • Populates optional dropdown with Server data
  • 19. Client-centric Web Applications
    • Disciplined and more manageable script
      • OOP in JavaScript
      • .NET-like APIs on core script objects
      • Classes to encapsulate data and logic, and attach to HTML in an unobtrusive manner
      • Declarative XML script to define behavior of application (more designer-oriented)
      • Cross-browser abstraction layer to provide a uniform DOM API
    • AJAX Control Toolkit
    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
    • Ajax Control Toolkit is a community driven, open source project hosted at Codeplex.
    • DEMO: Open and Run the Control Toolkit Project
    • You can create your own Control Extenders like those in the Toolkit!
    • Design-time support is provided
    • Enhanced JavaScript through library provides namespaces, events, properties, and more.
    • Share your Control creations on Codeplex!
  • 23. Creating your Own Control Extender Client-Centric Programming Model
  • 24. Extending ASP.NET Ajax
    • Files Created by the Extender Project
      • ****Behavior.js - contains JavaScript that you write to execute on the client. Behaviors are attached to controls.
      • ****Extender.cs - this is where you will add properties that you want exposed by your control at design time.
      • ****Designer.vb - This is a class used for Design-Time functionality in VS (usually do not have to modify)
  • 25. Extending ASP.NET Ajax
    • Creating Properties in an Ajax Control
      • Declare the Property in the Behavior’s prototype:
      • Declare the Property in the Extender (for the Designer):
    [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
    • Creating Events in an Ajax Control
      • Declare the Event:
      • Raise the event: this._raiseEvent(‘ eventName ', eventargs );
    add_ eventName : function(handler) { this.get_events().addHandler(‘ eventName ', handler); }, remove_ eventName : function(handler) { this.get_events().removeHandler(‘ eventName ', handler); },
  • 27. Session Summary
    • Ajax is a key part of the ASP.NET story
    • ASP.NET Ajax Goals
      • Make it super easy to incorporate AJAX patterns, and create rich user experiences, and leverage the browser
      • Create a natural progression from Web applications to Smart clients using a common application model
    • preview builds for greater transparency, more opportunities for feedback to have impact
  • 28. Important NOTES!!
    • Tools to download
      • Web Development Helper http://projects.nikhilk.net/Projects/WebDevHelper.aspx
      • IE Developer Toolbar http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en
      • Fiddler http://www.fiddlertool.com
    • IE7 broke the ability to set breakpoints in JavaScript when placed inside a <script> tag in a page. VS 2005 SP1 may fix this…
    • Intro to Forms Authentication with ASP.NET Ajax - http://ajax.asp.net/docs/tutorials/UsingFormsAuthenticationTutorial.aspx
  • 29. Resources
    • ASP.NET Ajax Web site
      • http://ajax.asp.net/
      • Bits, Forums, Quickstarts, Docs, Updates
    • Blogs
      • http://www.nikhilk.net
      • http://weblogs.asp.net/scottgu
      • http://weblogs.asp.net/bleroy