Learn about using AJAX with ASP.NET
In this article we are going to look at the following concepts in AJAX:
1.What is AJAX?
2.How AJAX works?
3.AJAX in ASP.NET.
4.AJAX controls like: Script Manager, Update Panel, Update Progress...
1. What is AJAX:
2. How AJAX works ?
A request is made to the server using the "XMLHttpRequest" object. The "OnReadyStateChanged property is used to store the function that processes the response received from the server.
The "ReadyState" property holds the status of the server's response. Whenver the ReadyState changes, the "OnReadyStateChange" function will be executed.
ReadyState can be in the following states:
0 - The Request is not yet initialized.
1 - The Request has been set up.
2 - The Request has been sent.
3 - The Request is in process.
4 - The Request is complete.
The "responseText" property is used to retrieve the data sent back from the server.
The "Open" method takes three arguments
. First argument specifies which method (GET/POST) to use when sending the request.
. Second argument specifies the url of the server side script.
. Third argument specifies if the request has to be handled asynchronous or not.
The send() method sends the request to the server.
ASP.NET with AJAX.
It enables you to create webpages that include a rich user experience with responsive and familiar user-interface elements.
Why use ASP.NET ajax:
Peroformance of the application is improved as the page is partially posted to
Client integration with ASP.NET application servicesfor forms authentication and user profiles.
Integration of data from various different sources through calls to Web services.
Support for more commonly used browsers.
Script Manager Control:
1. Only one Instance of Script Manager control is allowed on page which handles all the AJAX calls.
2. It is must for every AJAX enabled web page.
3. It doesnot have any UI.
<asp:ScriptManager runat="server" id="ScriptManager1" />
Update Panel Control:
1. Controls placed inside the Update Panel are easily refreshed using Ajax - partial postbacks.
2. Since update panel is a ajax control in asp.net it requires a Script Manager.
<asp:UpdatePanel id="UpdatePanel1" runat="server">.......</asp:UpdatePanel>
2. The updatepanel tag has 2 child tags as follows:
1. ContentTemplate tag which is used to hold the contents of the update panel.
2. Trigger tag which allows you to define certain triggers which makes the panel update its content.
<scriptManager id="ScriptManager1" runat="server"></ScriptManager>
<asp:UpdatePanel id="UpdatePanel1" runat="server">
<asp:TextBox runat="server" id="txtName" />
<asp:Button runat="server" id="btnUpdate" onclick="btnUpdate_Click" />
The UpdatePanel control supports 2 types of triggers.
1. AsyncPostbackTrigger: It is useful in that it can target any event from a control that exists as a child of any update panel control.
2. PostbackTrigger: It is useful when the child control of any updatepanel control performs a full postback.
The UpdatePanel defines 2 modes to trigger an update:
1. Conditional: The UpdatePanel is refreshed only when a trigger is invoked.
2. Always: The UpdatePanel is refreshed always when the page is partially rendered.
Update Progress control:
This control is used to provide status information regarding the asynchronous postback caused by the action of the update panel. By using the AssociatedUpdatelID property you can make sure that the UpdateProgress is only shown when a certain update panel is updated.
The DynamicLayout property specifies if the page should reserve the space for the UpdateProgress control or not. The ProgressTemplate is a container used to display messages to the user regarding the progress of the request.
<asp:UpdateProgress runat="server" id="UpdateProgress1">
It allows you to do postback at certain intervals of time.
It can be used to
1. Postback the entire page.
2. When it is used with UpdatePanel, it causes async postback to update the updatepanel at regular intervals.
3. Interval property is used to set the interval for an update.
4.When a postback is caused by a Timer Control, A server-side event "Tick" event is fired.
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Timer runat="server" id="Timer1" interval="5000" ontick="Timer1_Tick" />
<asp:UpdatePanel runat="server" id="TimedPanel" updatemode="Conditional">
<asp:AsyncPostBackTrigger controlid="Timer1" eventname="Tick" />
<asp:Label runat="server" id="DateStampLabel" />
Its really usefull n i learned Ajax basics little from here .
Thank u soo much for this article.