Click here to Skip to main content
13,250,182 members (69,907 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


7 bookmarked
Posted 29 Mar 2011

Ajax update panel- best practice 1

, 29 Mar 2011
Rate this:
Please Sign up or sign in to vote.
Though update panel keeps the page responsive while paritially post back, it will not avoid a round trip of complete page and control events. So care needs for a better performance
Update panel helps with ajax in It registers itself with the script manager and perform a partial postback without refreshing the whole page. However at the code behind there is a full round trip of the page and control events takes place. This will be a performance hinderance if the code behind is not designed ajax friendly. So simply adding update panel not simply enhance user experience even though it keeps the page responsive.
Let us try a worst case example.
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ScriptManager EnablePartialRendering="true" ID="Script1" runat="server">
    <asp:UpdatePanel ID="UpdatePanel1"  runat="server">
            <asp:TextBox ID="Text1" runat="server">
            <asp:Button runat="server" ID="Button1" Text="Partial Postback"  OnClick="Button1_Click"/>
       <asp:TextBox ID="TextBox1" runat="server" CausesValidation="false" OnTextChanged="TextBox1_TextChanged" >
<asp:Button ID="Button2" runat="server" Text="Full Postback" />

The above markup has a Script Manager where Partial Rendering enabled. It has an update panel with a textbox and a button. Outside the update panel there is a textbox which has a Text_Changed event handler declared. The button inside the update panel do a partial postback on its click event and update the textbox inside the update panel. This is the desired behaviour.
protected void Button1_Click(object sender, EventArgs e)
    Text1.Text = "This is updated by partial postback";

But we don't need the Text_Changed event handler job here as it is no way related to our partial postback. But unfortuantely it executes even on the partial postback. For our test case the Text Changed event handling a busy function.
    protected void TextBox1_TextChanged(object sender, EventArgs e)

So Changing the textbox and hit the button inside the update panel takes 20 secs to get the response.. This is simply unnecessary because our update panel event don't need to run the Text changed event.
So the good thing we can do is move the handler assignment to code behind
<asp:TextBox ID="TextBox1" runat="server" CausesValidation="false" >

    protected void Page_Load(object sender, EventArgs e)
       //If more update panels in the page, then identify the control from
      // ide below and make the code branching accordingly.
        string id = Script1.AsyncPostBackSourceElementID;
        if (string.IsNullOrEmpty(id)==true)
            //Keep the handlers and function calls on full postback here.
            TextBox1.TextChanged += new EventHandler(TextBox1_TextChanged);
            //Keep only handlers and function calls necessary for partial postback here.

The above code identify the async postback by checking the AsyncPostBackSourceElementID of the script manager and it assign handlers or function calls accordingly.
Conclusively, care needs to be taken when using update panel to make the asynchronous postback a better experince. Cheers.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Albin Abel
Software Developer
India India
I am developer in .Net and GIS.

You may also be interested in...

Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.171114.1 | Last Updated 29 Mar 2011
Article Copyright 2011 by Albin Abel
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid