AJAX
(Asynchronous JavaScript and XML)
· AJAX is one of the new features introduced in ASP.NET 3.5.
· AJAX is the new Web Development Technology offered by ASP.NET.
· It is the most powerful feature of ASP.NET, which dramatically reduces stress on web servers.
· In the year of 2007, Microsoft Corporation introduces ATLAS, which is renamed as AJAX in late 2007.
· AJAX is a client technique, which internally uses two languages like JavaScript and XML.
· Already you know that JavaScript is the client side language, which can be executed by browser. XML is a data descriptive language, which describes the data values in a structured manner.
· In the same way, already you know that web sites development models are 3 types totally.
1. Traditional Web Sites
2. Post-Backing Web Sites
3. AJAX Web Sites
· The limitations of Traditional web sites are overcome with Post-backing web sites.
· The main limitation of post-backing web sites is: the web page will be post-backed for every user action like clicking the buttons, selecting a date in the calendar, clicking on a node in the TreeView, selecting an item in the list box etc.
· In post-backing, the entire page will be refreshed / re-loaded.
· So that, web server has to give response for every post-back. This leads to heavy stress on the web server. Dramatically, this makes the web site executing very slowly.
· This problem can be solved with the introduction of AJAX. In other words, AJAX overcomes this limitation of Post-backing web sites.
Web Page Execution in AJAX Technology:
· On requesting the page from the client, the page will be transmitted from web server to the client.
· As a part of this transmition, the server code will be converted into java script; and the related data will be converted into XML.
· So, finally the client receives the JavaScript code and XML data.
· Whenever the user performs an action like clicking the buttons, selecting a date in the calendar, clicking on a node in the TreeView, selecting an item in the list box etc., the page will not be posted back. Instead, the java script code will be executed by the browser (at client side). If required, it uses XML data.
· So here, there is no any interaction with the web server at the time of post backing.
· In other words, the post backing will be performed at client level. In fact, you don’t call it as “client side post backing”; instead, you call it as “client side call back”.
The ASP.NET AJAX
· To develop ASP.NET web sites with AJAX technology, you are supposed to work with two types of controls.
A. AJAX Extension Controls
B. AJAX Toolkit Controls
A. AJAX Extension Controls:
These are in-built controls in ASP.NET. These controls are available in the toolbox under “AJAX Extensions” tab.
1. ScriptManager
2. UpdatePanel
3. UpdateProgress
4. Timer
B. AJAX Toolkit Controls:
These can be added into the toolbox explicitly by downloading “AjaxControlToolkit.dll” file from the Microsoft’s web site, and adding the reference of that DLL file to your web site.
Implementation of AJAX Extensions
1. ScriptManager:
· This control should be placed, at the top of all the AJAX extensions / toolkit controls, after <form> tag.
· This enables the AJAX technology in your web page.
· When you drag the control, you can see the following tag in the “Source” view.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
2. UpdatePanel:
· This control contains the content, which is to be updated in AJAX model, on the post back.
· When you drag the control, you can see the following tag in the “Source” view.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
· The <ContentTemplate> tag contains the actual content. In this tag, you drag and drop the controls, that you want.
· If any control in the UpdatePanel requires post back, the page would not be re-loaded. Just the required content would be updated.
· So, this features improves the execution speed of the page.
 |
. UpdateProgress:
· This control contains the content, which is to be displayed while the page is getting call back.
· This improves the user-friendly nature.
· When you drag the control, you can see the following tag in the “Source” view.
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
</ProgressTemplate>
</asp:UpdateProgress>
Timer:
· This control is same as “Timer” control in Windows Applications.
· It executes certain process at every completion of certain interval time.
· When you drag the control, you can see the following tag in the “Source” view.
<asp:Timer ID="Timer1" runat="server">
</asp:Timer>
Timer1 Properties:
Enabled: true
Interval: 1000
Implementation of AJAXControlToolKit
Linking AJAXControlToolKit.dll file:
· Download the “AjaxControlToolkit.dll” file from Microsoft’s web site.
· Copy that DLL file into the web site folder.
· Right click on the toolbox and select “Add Tab”.
· A new tab will be created in the toolbox. Enter the name of the new tab. Ex: “AJAX Toolkit”.
· Right click on “AJAX Toolkit” tab and select “Choose Items”.
· Click on Browser and select the “AjaxControlToolkit.dll” file, that is copied into the web site folder.
· Click on OK.
· Then automatically all the controls will be added to that tab.
· In this session, we are covering most important controls of this toolkit, which may be generally used in the now-a-days live projects development.
· Note: Most of the AJAX toolkit controls are extenders. The extender controls works depending on other controls.
1. ValidatorCalloutExtender:
· This acts as extension for a validation control.
· It displays the validation error message, in the form of tooltip.
· Implementation Steps:
1. Select the validation control and click on “>” symbol, to display the “Smart tag options”.
2. Then select the option “Add Extender”.
3. Select the option “ValidatorCalloutExtender”.
4. Click on OK.
5. hen the extender will be added to the selected validation control. You can see the properties of “ValidatorCalloutExtender” added in the properties of your validation control.
n the above application, add “ValidatorCalloutExtender” for the “RequiredFieldValidator”.
2. TextBoxWatermarkExtender:
· This acts as extension for a textbox control.
· It displays a water mark message, whenever no value is entered in the textbox.
· Implementation Steps:
1. Select the textbox control and click on “>” symbol, to display the “Smart tag options”.
2. Then select the option “Add Extender”.
3. Select the option “TextBoxWatermarkExtender”.
4. Click on OK.
5. Set the properties of Watermarkextender:
§ WatermarkText: any text
§ WatermarkCssClass: The CSS class for water mark message
 |
In this application, add “TextBoxWaterMarkExtender” for “txtName” and “txtAge” controls. Set the properties:
Properties of “txtName_WaterMarkExtender”:
1. WaterMarkText: Enter your name.
2. WatermarkCssClass: mywatermark
Properties of “txtAge_WaterMarkExtender”:
1. WaterMarkText: Enter your age.
2. WatermarkCssClass: mywatermark
3. ListSearchExtender:
· This acts as extension for a ListBox or ComboBox control.
· It allows the user to easily select the required item by typing the first few characters in it.
· Implementation Steps:
1. Select the ListBox or ComboBox control and click on “>” symbol, to display the “Smart tag options”.
2. Then select the option “Add Extender”.
3. Select the option “ListSearchExtender”.
4. Click on OK.
above application, add “ListSearchExtender” for the “ListBox” and “DropDownList”.
