In this article, you will see how to perform a partial page rendering using ASP.NET Ajax Extensions and UpdatePanels. This article is intended for beginners in ASP.NET Ajax development and those who whish to switch to ASP.NET. Example in this article was made using .NET Framework 2.0 and Visual Studio 2005.

First, let's see why and when to "ajaxify" your web application.

• You have a same application model like in classic ASP.NET
• You don't have to learn any new techniques - your skills are enough
• There is a minimum use of JavaScript (for those who dislike JS)
• Smooth and quick page refreshing
• You still have full ViewState support

All of this mean that you don't have to change your code at all. You just determine which content should be partially updated and place it in UpdatePanel. It is simple as it is. So, let's start.

In this example I will use a sample database that contains two tables: Regions and Countries. Each country belongs to one region and has some information: CountryName, Symbol, NumberOfInternetUsers and so on. The task is simple: when user selects a region from a drop down, another drop down should be populated with a countries that belong to the selected region. Next, when user selects a country from second drop down, additional country data should be shown. Simple, eh?

I am not going to show the code behind and data access class. You can download and explore the example from this article.

The easiest way (used by lazy developers) is to put the whole content in UpdatePanel. Yes, you will get smooth refreshing, but this is not our only goal. Ajax pages should be optimized for best performance and user experience. Thus, we are going to separate content in two UpdatePanels:

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
    <div style="border: solid 1px #dcdcdc; padding: 10px;">
        Region:
        <asp:DropDownList ID="ddlRegions" runat="server" 
            OnSelectedIndexChanged="ddlRegions_SelectedIndexChanged"
            AutoPostBack="True">
        </asp:DropDownList>
        <br />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" 
            ChildrenAsTriggers="false">
            <ContentTemplate>
                Country:
                <asp:DropDownList ID="ddlCountries" runat="server" AutoPostBack="True" 
                    OnSelectedIndexChanged="ddlCountries_SelectedIndexChanged">
                </asp:DropDownList>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="ddlRegions" 
                    EventName="SelectedIndexChanged" />
            </Triggers>
        </asp:UpdatePanel>
        <br />
    </div>
</div>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" 
    ChildrenAsTriggers="false">
    <ContentTemplate>
        <asp:Panel ID="pnlDetails" runat="server">
            <hr />
            Country:
            <asp:Label ID="lblName" runat="server"></asp:Label><br />
            Symbol:
            <asp:Label ID="lblSymbol" runat="server"></asp:Label><br />
            Internet users:
            <asp:Label ID="lblUsers" runat="server"></asp:Label>
        </asp:Panel>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="ddlCountries" 
            EventName="SelectedIndexChanged" />
        <asp:AsyncPostBackTrigger ControlID="ddlRegions" 
            EventName="SelectedIndexChanged" />
    </Triggers>
</asp:UpdatePanel>

As you can see from the markup above, we placed in UpdatePanels only the content that will be updated. You can see one more important thing: in order to ASP.NET Ajax function properly you have to place ScriptManager control on each Ajax page.

Ok, this looks simple, but what are UpdateMode, ChildrensAsTriggers and AsyncPostBackTrigger?

The answer is simple. If you just place an UpdatePanel on a page, it is going to be updated always, because default option for UpdateMode is "Always". So, if we set UpdateMode to Conditional, that means that UpdatePanel will be updated only if some conditions are met.

What conditions? The conditions set by ChildrensAsTriggers and AsyncPostBackTrigger. By default ChildrensAsTriggers property of UpdatePanel is set to true. This means that if any control causes a postback inside UpdatePanel it will be updated. But in our case there is no need for that. We want our UpdatePanels to be refreshed only by drop down lists from the outside. Thus, ChildrensAsTriggers has to be set to false.

The last thing we have to do is to set each UpdatePanel to update when a corresponding drop down causes a postback. That is the purpose of AsyncPostBackTrigger. As you can see from the markup above, we set which event of which control will cause the refreshing.

Now we have optimized "ajaxified" web page. Please download the sample code and try it. Also, note that you'll have to download and install ASP.NET Ajax extensions first.

Happy ajaxification!