ASP.

NET & AJAX

ALI CABAS

What is AJAX Ajax: A New Approach to Web Applications Ajax isnt a technology. Its really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates:
standards-based presentation using XHTML and CSS; dynamic display and interaction using the Document Object Model; data interchange and manipulation using XML and XSLT; asynchronous data retrieval using XMLHttpRequest; and JavaScript binding everything together.

The Classic Web

The classic web application model works like this: Most user actions in the interface trigger an HTTP request back to a web server. The server does some processing retrieving data, talking to various legacy systems and then returns an HTML page to the client. Its a model adapted from the Webs original use as a hypertext medium, but as fans of The Elements of User Experience know, what makes the Web good for hypertext doesnt necessarily make it good for software applications.

AJAX Enabled Sites

Ajax is new web development technique used for the development of most interactive website. Ajax helps you in making your web application more interactive by retrieving small amount of data from web server and then showing it on your application. You can do all these things without refreshing your page.

How Ajax is Different An Ajax application eliminates the start-stop-startstop nature of interaction on the Web by introducing an intermediary an Ajax engine between the user and the server. It seems like adding a layer to the application would make it less responsive, but the opposite is true.

How Ajax is Different

Instead of loading a webpage, at the start of the session, the browser loads an Ajax engine written in JavaScript. This engine is responsible for both rendering the interface the user sees and communicating with the server on the users behalf. The Ajax engine allows the users interaction with the application to happen asynchronously independent of communication with the server. So the user is never staring at a blank browser window and not waiting around for the server to do something.

How Ajax is Different

Instead of loading a webpage, at the start of the session, the browser loads an Ajax engine written in JavaScript. This engine is responsible for both rendering the interface the user sees and communicating with the server on the users behalf. The Ajax engine allows the users interaction with the application to happen asynchronously independent of communication with the server. So the user is never staring at a blank browser window and not waiting around for the server to do something.

Understanding the technology behind Ajax JavaScript: JavaScript is used to make a request to the web server. Once the response is returned by the webserver, more JavaScript can be used to update the current page. DHTML and CSS is used to show the output to the user. JavaScript is used very heavily to provide teh dynamic behavior to the application.

Understanding the technology behind Ajax Asynchronous Call to the Server: Most of the Ajax application used the XMLHttpRequest object to send the request to the web server. These calls are Asynchronous and there is no need to wait for the response to come back. User can do the normal work without any problem.

Understanding the technology behind Ajax XML: XML may be used to receive the data returned from the web server. JavaScript can be used to process the XML data returned from the web server easily.

Benefits of Ajax Ajax is new very promising technology, which has become extremely popular these days. Here are the benefits of using Ajax:
Ajax can be used for creating rich, web-based applications that look and works like a desktop application Ajax is easy to learn. Ajax is based on JavaScript and existing technologies like XML, CSS, DHTML. etc. So, its very easy to learn Ajax Ajax can be used to develop web applications that can update the page data continuously without refreshing the whole page

ASP.NET AJAX is a free framework for quickly creating efficient and interactive Web applications that work across all popular browsers. With ASP.NET AJAX you can:
Create next-generation interfaces with reusable AJAX components. Enhance existing pages using powerful AJAX controls with support for all modern browsers. Access remote services and data from the browser without tons of complicated script. Take advantage of the improved efficiency and ease of use in Visual Studio 2008, with its built-in support for ASP.NET AJAX, improved JavaScript support, and a new Web page designer interface.

Partial Page Updates

Perhaps the most visible feature of the ASP.NET AJAX Extensions is the ability to do a partial or incremental page updates without doing a full postback to the server, with no code changes and minimal markup changes. The advantages are extensive the state of your multimedia (such as Adobe Flash or Windows Media) is unchanged, bandwidth costs are reduced, and the client does not experience the flicker usually associated with a postback.

Partial Page Updates

Perhaps the most visible feature of the ASP.NET AJAX Extensions is the ability to do a partial or incremental page updates without doing a full postback to the server, with no code changes and minimal markup changes. The advantages are extensive the state of your multimedia (such as Adobe Flash or Windows Media) is unchanged, bandwidth costs are reduced, and the client does not experience the flicker usually associated with a postback.

Get_Started_with_ASPNET_AJAX.wmv

ASP.NET AJAX Server Controls The UpdatePanel Control The UpdateProgress Control The Timer Control ScriptManager Control

UpdatePanel Control Overview

The UpdatePanel control is a server control that helps you develop Web pages with complex client behavior that makes a Web page appear more interactive to the end user. Coordinating between server and client to update only specified parts of a Web page usually requires in-depth knowledge of JavaScript. However, by using the UpdatePanel control, you can enable a Web page to participate in partial-page updates without writing any client script.

UpdatePanel Control Overview The UpdatePanel control requires a ScriptManager control in the Web page. By default, partial-page updates are enabled because the default value of the EnablePartialRendering property of the ScriptManager control is true.

Specifying UpdatePanel Control Content You add content to an UpdatePanel control declaratively or in the designer by using the ContentTemplate property. In markup, this property is exposed as a <ContentTemplate> element. To add content programmatically, you use the ContentTemplateContainer property.

Specifying UpdatePanel Triggers

By default, any postback control inside an UpdatePanel control causes an asynchronous postback and refreshes the panel's content. However, you can also configure other controls on the page to refresh an UpdatePanel control. You do this by defining a trigger for the UpdatePanel control. A trigger is a binding that specifies which postback control and event cause a panel to update. When the specified event of the trigger control is raised (for example, a button's Click event), the update panel is refreshed.

The UpdateProgress Control If a page contains UpdatePanel controls, you can also include UpdateProgress controls to keep users informed about the status of partialpage updates. You can use one UpdateProgress control to represent the progress of partial-page updates for the whole page. Alternatively, you can include an UpdateProgress control for every UpdatePanel control.

The UpdateProgress Control

One UpdateProgress control on the page can show a progress message for all UpdatePanel controls on the page. Asynchronous postbacks originating inside an UpdatePanel control cause the UpdateProgress control to display its message. Postbacks from controls that are triggers for the panel also display the message. You can associate the UpdateProgress control with a single UpdatePanel control by setting the progress control's AssociatedUpdatePanelID property. In that case, the UpdateProgress control displays a message only when a postback originates inside the associated UpdatePanel control.

The UpdateProgress Control

DEMO

The UpdateProgress Control

One UpdateProgress control on the page can show a progress message for all UpdatePanel controls on the page. Asynchronous postbacks originating inside an UpdatePanel control cause the UpdateProgress control to display its message. Postbacks from controls that are triggers for the panel also display the message. You can associate the UpdateProgress control with a single UpdatePanel control by setting the progress control's AssociatedUpdatePanelID property. In that case, the UpdateProgress control displays a message only when a postback originates inside the associated UpdatePanel control.

The Timer Control

Timer control is used to specify intervals for refreshing of the upadate panel, it works with miliseconds and Timer_Tick event works each in specified interval, this control can be used to refresh small part of a page without interrupting.

SAMPLE APPLICATION AutoComplete Textbox From Database

AutoComplete Textbox AutoComplete Textbox is an ASP.NET AJAX extender that can be attached to any TextBox control. When the user types some letters in the Textbox, a popup panel will come to action and displayed the related words. So that the user can choose exact word from the popup panel.

AutoComplete Textbox Create a new website by selecting ASP.NET AJAX-Enabled Web Site from installed templates in New Web Site window. ScriptManager would already be there in your webpage (Default.aspx). Now drag and drop a Textbox from your Toolbox and AutoCompleteExtender to your webpage.

AutoComplete Textbox This is how the extender looks

<ajaxToolkit:AutoCompleteExtender runat="server" ID="autoComplete1" TargetControlID="txtCountry" ServicePath="AutoComplete.asmx" ServiceMethod="GetCountriesList" MinimumPrefixLength="1" EnableCaching="true" /> So lets find out what these properties mean

AutoComplete Textbox
The textbox is linked with an AutoCompleteExtender which is initialized with this code. The italic properties are optional:

AutoComplete Textbox
TargetControlID - The TextBox control where the user types content to be automatically completed ServiceMethod - The web service method to be called. The signature of this method must match the following:

Note that you can replace "GetCompletionList" with a name of your choice, but the return type and parameter name and type must exactly match, including case.

AutoComplete Textbox ServicePath - The path to the web service that the extender will pull the word\sentence completions from. If this is not provided, the service method should be a page method. MinimumPrefixLength - Minimum number of characters that must be entered before getting suggestions from the web service. CompletionInterval - Time in milliseconds when the timer will kick in to get suggestions using the web service.

AutoComplete Textbox Now, the two most important parts This line allows javascript to access the webservice which is responsible for retrieving data from database

[System.Web.Script.Services.ScriptService]

AutoComplete Textbox Now it is time to write our web service. A method which will return list of text items from a database based on the parameter it has

AutoComplete Textbox More samples

http://www.codeproject.com/KB/ajax/AutoCompleteExtenderajax.aspx http://dotnetslackers.com/Community/blogs/kaushalparik/archive/2008/06/06 http://www.danielisaacs.com/2008/02/13/aspnet-ajax-autocomplete-extender