Update asynchronously control which is placed out of UpdatePanel

Hello I would like to share with you a tricky way how to update a control asynchronously which is placed out of UpdatePanel  .
So, let get started:

1. First of all you need to write the following scripts

   24 

   25         <script type="text/javascript">

   26            //Get an instance to PageRequestManager

                 //and register handler that will update the control

   27             var prm = Sys.WebForms.PageRequestManager.getInstance();

   28             prm.add_pageLoaded(updateControl);

   29 

   30 

   31             function updateControl(sender, args) {

   32 

   33                 var items = args.get_dataItems();

   34                 if (items[‘labelToUpdate’] != null) {

   35                     $get("labelToUpdate").innerHTML = items[‘labelToUpdate’];

   36                 }

   37             }

   38         </script>

   39 

2. The declaration of the UpdatePanel looks like this:


 

   78    <asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="UpdadePanel1">

   79      <ContentTemplate>

   80          <asp:Button ID="Button1" runat="server" Text="Button"

                      OnClick="Button1_Click" />

   81          <asp:Label Text="text" id="label1" runat="server" />

   82       </ContentTemplate>

   83    </asp:UpdatePanel>

   84          <%—  Control to update   —%>

   85    <asp:Label Text="text" ID="labelToUpdate" runat="server" />

As you can see we have a button control that will trigger an async postback also there is an  attached button click handler to it.
The code of  the buttton click handler looks like this:

   39    protected void Button1_Click(object sender, EventArgs e)

   40     {      

   41         label1.Text =

              "Update with info the label which is placed inside the UpdatePanel";

   42         //Sends custom data to a control during partial page rendering.

   43         ScriptManager1.RegisterDataItem(labelToUpdate,

              "Update label that is placed out of the UpdatePanel");

   44     }

3. So, finally when a button is clicked and partial postback  is raised we need to examine the returned value (the response form the server.)  for this purpose we have declared  a page_load AJAX handler which will be triggered. In this way we have access to the sent value by the server but we need to take care further to find the control in the DOM and assign the value to it. The Function below does this task:

   32     function updateControl(sender, args) {

   33 

   34                 var items = args.get_dataItems();

   35                 if (items[‘labelToUpdate’] != null) {

   36                     $get("labelToUpdate").innerHTML = items[‘labelToUpdate’];

   37                 }

   38             }

Advertisements

Leave a Reply

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

WordPress.com Logo

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

Google+ photo

You are commenting using your Google+ 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 )

w

Connecting to %s