Geeks With Blogs

News
Łukasz Kuryło's blog

I'm an Asp.Net web developer, but the truth is, I always preferred the MVC than WebForms. Especially what I hate in WebForms is the update panel control. I have always problems with it when I want to use it in my current scenario, so easier to me is to write some jQuery code and do the controls refresh manually. I know that, there are situatios when I can't skip the update panels, so this post is a reference for my future battles.

 

A simple example of one update panel with button and some labels.

<asp:Label ID="Label4" runat="server" Text="Label4"></asp:Label>
    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:Label ID="Label3" runat="server" Text="Label3"></asp:Label>
            <asp:Label ID="Label1" runat="server" Text="Label1"></asp:Label>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Button1" EventName="click" />
        </Triggers>
    </asp:UpdatePanel>

protected void Page_Load(object sender, EventArgs e)
        {
         Label3.Text = Label4.Text = DateTime.Now.ToString();
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            Label3.Text = Label4.Text = DateTime.Now.ToString();
            Label1.Text = "async post back";
        }

In this snippet, the update panel is updated by pressing the button localed outside the UP, because this button is set as the async trigger.

 

How to set an asynchronous trigger to a control located on a custom user control.

This is the same sample as this one above. The only difference is that, the button is moved to custom user control. Because of that, the trigger in the update panel can't be set to this button, because in runtime we will get an exception saying that, the button is missing. Solution for this is set the async trigger manually in the code.

<asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
    <uc1:WebUserControl1 ID="WebUserControl11" runat="server" />
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        </ContentTemplate>
    </asp:UpdatePanel>

 public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
           
            Label3.Text = Label4.Text = DateTime.Now.ToString();
        }
    }

public partial class WebUserControl1 : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            ScriptManager.GetCurrent(this.Page).RegisterAsyncPostBackControl(Button1
               );
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            ((Label)Parent.FindControl("Label1")).Text = "async post back";

                 ((Label)Parent.FindControl("Label3")).Text =
                 ((Label)Parent.FindControl("Label4")).Text = DateTime.Now.ToString();
            ((UpdatePanel)Parent.FindControl("UpdatePanel1")).Update();
        }
    }

 In this case, as I told earlier we must set the trigger manually. To do it, we need to get reference to ScriptManager located on our page and use the RegisterAsyncPostBackControl method with the button as a parameter. Thanks to this, we don't have any postback after pressing the button (which is outside UP). But in this time, there must be done one more thing. We get the result from the server with new values for controls (we can see it in e.g. firebug), but the controls on the page aren't updated. When we want to update any update panel in scenario like this one, the Update() method must be used as you can see in the code above.

 

How to refresh the nested update panel without touching the parent.

 Update panels can be nested. Thanks to this feature, we can divide the page into small segments and update only one of them when we need, not the entire page. This is useful, because the server controls have a view state, which on page with many controls can have a huge size, what results in drop of performance in our application. Default, when we want to update only a nested UP, the parent is refreshed too, so we must to prevent ourselves from it. Let's add second UP to the previous example.

<asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
    <asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
            <uc1:WebUserControl1 ID="WebUserControl11" runat="server" />
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                </ContentTemplate>
            </asp:UpdatePanel>
        </ContentTemplate>
    </asp:UpdatePanel>

In this scenario we have to add two additional attributes to the first UP. First we must set to false the ChildrenAsTriggers attribute. Thanks to it the update panel will skip on every postbacks from nested controls. The second attribute which we must apply, this is an UpdateMode attr set to Conditional.

Posted on Monday, August 8, 2011 11:51 AM ASP.NET | Back to top


Comments on this post: Playing with update panels

# re: Playing with update panels
Requesting Gravatar...
EXTJS, jQuery, etc.
I definitely prefer to use a client side framework rather than UpdatePanel and all that nasty viewstate!
Left by Guilherme Cardoso on Aug 09, 2011 3:13 PM

Comments have been closed on this topic.
Copyright © Łukasz Kuryło | Powered by: GeeksWithBlogs.net