Using AJAX with ASP.NET
This Article describes everything about AJAX. 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. Learn Using AJAX with ASP.NET
Learn about using AJAX with ASP.NET
AJAX
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:
AJAX stands for Asynchronous Javascript and XML.
AJAX allows you to perform server-side processing without postback to server and it is based on Javascript and Http requests.
2. How AJAX works ?
In AJAX, the Javascript directly communicates with the server, using the "XMLHttpRequest" object without even reloading the page. It uses Asynchoronous data transfer between the web browser and the web server.
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.
ASP.NET ajax integrates ASP.NET, DHTML and client-side javascript.
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
server.
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.
Ex:
<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.
Ex:
<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.
For Ex:
<scriptManager id="ScriptManager1" runat="server"></ScriptManager>
<asp:UpdatePanel id="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox runat="server" id="txtName" />
<asp:Button runat="server" id="btnUpdate" onclick="btnUpdate_Click" />
</ContentTemplate>
</asp:UpdatePanel>
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.
For Ex:
<asp:UpdateProgress runat="server" id="UpdateProgress1">
<ProgressTemplate>
Loading...
</ProgressTemplate>
</asp:UpdateProgress>
Timer Control:
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.
For Ex:
<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">
<Triggers>
<asp:AsyncPostBackTrigger controlid="Timer1" eventname="Tick" />
</Triggers>
<ContentTemplate>
<asp:Label runat="server" id="DateStampLabel" />
</ContentTemplate>
</asp:UpdatePanel>
Follow
Hi ,
Its really usefull n i learned Ajax basics little from here .
Thank u soo much for this article.