Implementing Ajax in WebForms

Ajax is a useful and commonly used technology in web applications.By implementing Ajax in our applications we can provide better user experience.Ajax allows to prevent the postbacks for the user actions.This allows web applications to provide desktop application like experience for the end user. Instead of full page postback ,partial page updates happen.

We can implement ajax functionality in ASP.NET using jQuery or Microsoft Ajax library.Here we will see how to implement ajax functionality using Microsoft Ajax library.

By using Microsoft Ajax library we can use controls to easily implement the ajax functionality in WebForms .

Implementing Ajax in WebForms

For Implementing Ajax in WebForms  there are few useful controls.Some of these are:

• ScriptManager
• UpdatePanel
• UpdateProgress

ScriptManager  This is required to use the Ajax extensions in a Webforms.Without adding it to a Webform we can not use the ajax controls such as UpdatePanel.

UpdatePanel  This wraps the controls in which we want to update using partial page updates(using AJAX).Update panel is declared as:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ButtonSave" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:GridView>
.....
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>

UpdatePanel has the following useful properties

• ID  The of the update panel
• Triggers Defines the actions which triggers postback.In the above example Click even triggers postback.

UpdateProgress  This is used to report the progress of the asynchronous event or the ajax request.

<asp:UpdateProgress ID="Progress1" runat="server">
<ProgressTemplate>
<div>
Processing.....
</div>
</ProgressTemplate>
</asp:UpdateProgress>

We can depict these controls using the below :

We need add the logic in the triggering event for partial page updates.In the above example the triggering action is button click.So we need to add the page update logic in the click event.

Follow on: