Multiple UpdatePanels in seperate user controls on one page

The asp:UpdatePanel is a feature in the ASP.NET Ajax components that allows you to get a partial update of your page on postback. You can place all of your old non-AJAX components inside the update panel and they will behave as they were AJAX enabled.

Is it possible to have pages with more than one update panel, and allowing these panels to talk to each other? Yes it is.
Imagine this example: You have a page that mimmicks a Windows Explorer. At the left side you have a tree structure, and the right side is a list of icons. When opening and closing the treelist you would not have the icon list to update. When clicking a node on the treelist, the icon list should update.

Update panels

Multiple Update Panels

You can achieve this using multiple update panels. In order to seperate the code you can place each pane in its own user control. So to create the page above I would use:

  • One .aspx page containing 2 user controls
  • A “tree list” user control (the pane at the left)
  • A “thumbnail list” user control (the pane at the right)

First of all, when using the update panel you need to add the ScriptManager to the .aspx page:

<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server">

Each user control needs to expose a UpdatePanelUpdateMode property and a Update function.  This is my “tree list” user control (the “thumbnail list” have the same stcuture):

<asp:UpdatePanel ID="searchUpdatePanel" runat="server">
    <!-- add your controls here! -->

And the code is:

public UpdatePanelUpdateMode UpdateMode
  get { return searchUpdatePanel.UpdateMode; }
  set { searchUpdatePanel.UpdateMode = value; }

public void Update()

Furthermore, the tree list user control must know about the thumbnail list in order to update it, so the thumbnail list must expose a function that the tree list can call so the thumbnail list is updated. And the tree list must have a reference to the thumbnail list.

The .aspx page can now include the user controls. Add the following to the top of the .aspx page (or drag your user controls into the web control, and the code is added automatically):

<%@ Register src="TreeList.ascx" tagname="TreeList" tagprefix="uc1" %>
<%@ Register src="ThumbnailList.ascx" tagname="ThumbnailList" tagprefix="uc2" %>

Then add the usercontrols to the body of the web control:

// The code will be embedded in some HTML tags for design
<uc1:TreeList ID="treeList" UpdateMode="Conditional" runat="server" />
<uc2:ThumbnailList ID="thumbnailList" UpdateMode="Conditional" runat="server" />

Notice that the UpdateMode property that was exposed in each user control is set to Conditional. This allows each panel to be updated individually.
Also remember to reference the thumbnailList from the treeList so the tree list can update the thumbnail list, I did this is the Page_Init of the web control (the .aspx page):

protected void Page_Init(object sender, EventArgs e)
  // In this example I have a public property
  // called "ThumbnailList" on my treelist user control
  // Now the treelist will be able to call code
  // on the thumbnaillist when the treelist
  // must update the thumbnail list
  treeList.ThumbnailList = thumbnailList;

When the tree list needs to update the thumbnail list it will call a function on the thumbnail list that will update the thumbnails. This code is individual depending on the implementation. In real life, the  updatepanel of the thumbnail list contains some sort of iterateable list (a repeater for example). The thumbnail list then contains a public function called “BindDataSource” or “UpdateList” that takes some parameters of which items to show. The code will then bind the items using DataBind() on the repeater.

Now you have a web page that updates panels individually and where the panels can talk to each other.

About briancaos

Developer at Pentia A/S since 2003. Have developed Web Applications using Sitecore Since Sitecore 4.1.
This entry was posted in .net, c#, General .NET and tagged , , , . Bookmark the permalink.

4 Responses to Multiple UpdatePanels in seperate user controls on one page

  1. Ansar says:

    I have same scenario that you mentioned above.
    ie. left menu usercontrol lists the category. right pane usercontrols have the details of items.
    When click a subcategory in leftmenu, I triggerd a event to aspx page and from that page I call public funtion in right pane control to lists the details.
    It is working fine in local, but when I uploaded to live server, its not working. That means when I click left menu nothing happening in live server.

  2. briancaos says:

    It’s usually some security issue. Maybe you do not have read access to one of your .ascx files. If you have a web service involved you need to enable HTTP POST and HTTP GET, as this is disabled by default:

  3. Ansar says:

    Thanks for your reply.
    In my code I didnt use any webservices. And it is working fine in local machine.
    When I uploaded to server it is not working. When I removed the update panel and uploaded to the server it is working fine. So I think it will be the issue of update panel. If you have any solution, please reply.
    Thanks in advance.

  4. RBurgundy says:

    Thanks for you post. I think it’s a clean way of code, I’ve implemented it without any trouble:).

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s