How to update controls which are outside of updatepanel during partial page rendering?

we generally used update panel to do the partial page postback, which means to postback the controls which are only inside the update panel. For achieve this we simply call Update() method for the corresponding Update Panel. This thing is quite simple when we are trying to update any control which is inside the updatepanel itself. But, The problem may come when we want to update the controls which are outside of UpdatePanel and we need to update the same while updating then control inside updatepanel.

To make it simple. Let’s consider below scenarios. In our web page, we have Two labels (Label1 and Label2). Lable1 present inside the updatePanle and Label2 is in the outside of updatePanel. We have one Button say Button1, which is also inside the UpdatePanel. Now, our requirement is to update the Label2 while we are updating Label1 by Clicking Button1.

below is the code block for above scenarios

      <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode=Conditional>
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                <asp:Button ID="Button1" runat="server" Text="Update Button"  onclick="Button1_Click" />
            </ContentTemplate>
        </asp:UpdatePanel>
     <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>

Now, if we click on “Button1”, it will update only the content of Label1 not Lable2.

The solutions is to use ScriptManager.RegisterDataItem() . Using RegisterDataItem() methods we can register any control with the Particular Page ScriptManager Instance. While registering we need to provide the Control name along with the data item for the control which we want to render.
Below code block showing how to register the control which is outside of UpdatePanel with the ScriptManager.

  protected void Button1_Click(object sender, EventArgs e)
    {
       //Updating Label1 Text with the current Time Ticks
        Label1.Text = DateTime.Now.Ticks.ToString();
        //Register Label2 control with current DataTime as DataItem
        ScriptManager1.RegisterDataItem(Label2, DateTime.Now.ToString());
    }

If we click on Button1 now, it will update the text of Label1, but though we have registered the Label2 with the script manager still its value will not be reflect. As We have just registered the control.

The next step is to update the control value. For that we need to take help of PageRequestManager and add_pageLoaded method. The pageLoaded event is raised after all content on the page is refreshed, either because of a full-page postback or an partial postback. You can read the details of same from MSDN.

We need to write below code in client side which will update the content values.

            var pageInstance = Sys.WebForms.PageRequestManager.getInstance();
            pageInstance.add_pageLoaded(UpdateLabelHandler);

            function UpdateLabelHandler(sender, args)
            {
                var ControldataItems = args.get_dataItems();
                if ($get('Label2') !== null)
                    $get('Label2').innerHTML = ControldataItems ['Label2'];
            }

Let me explain the codeblock, Sys.WebForms.PageRequestManager.getInstance(), will return the current Instance of PageRequestManager Class. From that Instance we can invoke the add_PageLoaded method. We have added UpdateLabelHandler() which take “args” as an Argument. This args conatins the data items for the registred controls. we can call args.get_dataItems()to retreive the data from the dataitem collections. After that we have set the Control Value by from the data item collection using $get(‘Label2’).innerHTML = ControlsdataItems[‘Label2’]; . So, In case we have multiple control that we need to update we can use the control name to retrieve the value form the ControldataItems.

Hope this gives you a good idea that what needs to do to update controls which is outside of updatepanel during partial page rendering.

Ref. & More Information