AJAX: GETTING STARTED

Hi guys, in this post I am going to walk you people through using UpdatePanel this would be good start for beginners who want to learn AJAX. AJAX is there in the .Net framework from the beginning in order to facilitate develops to develop web applications with richer and more responsive UI for better user experience.

Applications with AJAX give the illusion of desktop based application in web application to the end user.Microsoft has provided bunch of AJAX based control in AJAX control toolkit to satisfy developer needs. Most basic of them is UpdatePanel. So let's kick off this exercise.

First of all copy the above written code and paste it in aspx file.

<table> <tr> <td> <asp:ScriptManager ID="smPage" runat="server" /> <asp:UpdatePanel ID="upText" runat="server"> <ContentTemplate> <asp:Label ID="lblText" runat="server" Text="Default Value" /> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="ddlValue" EventName="SelectedIndexChanged" /> </Triggers> </asp:UpdatePanel> </td> </tr> <tr> <td> <asp:DropDownList ID="ddlValue" AutoPostBack="true" runat="server" OnSelectedIndexChanged="ddlValue_SelectedIndexChanged"> <asp:ListItem Text="One" Value="1" /> <asp:ListItem Text="Two" Value="2" /> </asp:DropDownList> </td> </tr> </table>

Step 1:

In the above written code first I add ScriptManager control. This control does not have UI but it is required for UpdatePanel control to run all the scripts created by ASP.Net engine.

<asp:ScriptManager ID="smPage" runat="server" />

It is a server-side control that sits on your Web Form and enables the core of ASP.NET AJAX. Its primary role is the arbitration of all other ASP.NET AJAX controls on the Web Form and the addition of the right scripting libraries to the Web browser so that the client portion of ASP.NET AJAX can function.

Step 2:

Secondly we've Add UpdatePanel which is a container control. Controls which I want to update on SelectedIndexChanged will go in this is container. UpdatePanel requires two pieces of information:

<asp:UpdatePanel ID="upText" runat="server"> ….. </ asp:UpdatePanel>

ContentTemplate Triggers

ContentTemplate contains control which I want to update on certain event asynchronously (means without postback)

Trigger are of two types tell these:

AsyncPostBackTrigger PostBackTrigger

AsyncPostBackTrigger specify that these are the controls and these are their events on which controls defined in ContentTemplate will update asynchronously.

PostBackTrigger specify that this is the control which must be in the UpdatePanel in ContentTemplate is allowed to cause postback

Up till now I have done with telling you what is ContentTemplate and what is PostBackTrigger. So now it's time to add controls in UpdatePanel.

To keep this example simple I just have added a Label control in UpdatePanel. what I am doing in this example is I am going to update Label control on the OnSelectedIndexChanged event of Dropdown with the SelectedItem's text.

<ContentTemplate> <asp:Label ID="lblText" runat="server" Text="Default Value" /> </ContentTemplate>

After adding control(s) to ControlTemplate, now I am adding Trigger.

<Triggers> <asp:AsyncPostBackTrigger ControlID="ddlValue" EventName="SelectedIndexChanged" /> </Triggers>

We were required to specify two piece of information and we are done with that. Now It's time to add control which cause asynchronous postback.

<asp:DropDownList ID="ddlValue" AutoPostBack="true" runat="server" OnSelectedIndexChanged="ddlValue_SelectedIndexChanged"> <asp:ListItem Text="One" Value="1" /> <asp:ListItem Text="Two" Value="2" /> </asp:DropDownList>

Step 3:

Now it time to add server side code. This code will run when DropDownList cause asynchronous postback when selected index of DropDownList change.

protected void ddlValue_SelectedIndexChanged(object sender, EventArgs e) { lblText.Text = ((ListControl)(sender)).SelectedItem.Text; }

We are done with exercise. Try it and have a nice day :).