Update Panel and Callback Panel

AJAX Page - UpdatePanel

CallbackPanel has 2 elements:

• content element can contain contain html, js, css and other server controls - like Obout Calendar, Obout EasyMenu, ASP.NET controls (ASP Textbox, ASP DropDownList, etc.).
• loading element is optional and it can include the html to display while the panel is loading.
  If ommited, a default "Loading..." text is shown and all styles from content element are applied to theloading element.
  It is visible only when the callback panel is updated using client-side UpdatePanel method.

Both content and loading elements can contain style definitions. 

<oajax:CallbackPanel runat="server" ID="callbackPanel1">

<content style="border:1px solid gray;width:400px;height:200px">

some content

</content>

<loading style="border:1px solid red;width:400px;height:200px">

Loading...please wait

</loading>

</oajax:CallbackPanel>

---------------------------------------------
It is very useful to load dynamic scripts, dynamic stylesheets, dynamic controls, etc. 

The update of the panel is done without reloading the page. 

Client-side update 
ob_post.UpdatePanel("callbackPanel1"); 
ob_post.UpdatePanelInContainer("callbackPanel1", "container"); 
ob_post.UpdatePanelFromPage("callbackPanel1", "container", "callbackPanels.aspx"); 
ob_post.UpdateAllPanels(); 

Server-side update 
UpdatePanel("callbackPanel1"); 
UpdatePanel("callbackPanel1", "container"); 
UpdateAllPanels(); 
--------------------------------------------------------------------
Update Callback Panel specified by id. 

For example, you can use the next lines: 

Client-side update

        ob_post.UpdatePanel("callbackPanel1"); 
  

Server-side update

        UpdatePanel("callbackPanel1"); 
  

Example 1 - Callback Panel contain html, css and ASP DataList control.

<%@ Register TagPrefix="oajax" Namespace="OboutInc" Assembly="obout_AJAXPage" %>

        <oajax:CallbackPanel runat="server" ID="callbackPanel1">
            <content style="border: gray 1px solid;">
                <style>
                .divItem
                {
                    border-bottom:1px solid gray;
                    font-size:9px;
                    width:130px;
                    padding-top:4px;
                    padding-bottom:4px;
                }
                </style>
                <b>My List</b>
                <asp:DataList id="dataList1" runat="server">
                    <ItemTemplate>
                        <div class="divItem">
                            some item content
                        </div>
                    </ItemTemplate>
                </asp:DataList>
            <content>
            <loading style="border: gray 1px solid;">
                Loading...please wait
            </loading>
        </oajax:CallbackPanel>
    

See also live UpdatePanel Example. 


Example 2 - Callback Panel contain ASP Literal control.

<%@ Register TagPrefix="oajax" Namespace="OboutInc" Assembly="obout_AJAXPage" %>

        <oajax:CallbackPanel runat="server" ID="callbackPanel1">
            <content style="border: gray 1px solid;">
                <asp:Literal id="serverTime" Runat="server"></asp:Literal>
            </content>
            <loading style="border: gray 1px solid;">
                Loading...please wait
            </loading>
        </oajax:CallbackPanel>
   

Example 3 - multiple Callback panel.

Client-side update

        ob_post.UpdateAllPanels(); 
  

Server-side update

        UpdateAllPanels(); 

public void UpdateAllPanels()

{ 

        UpdatePanel("CallBackPanel1");
        UpdatePanel("CallBackPanel2");

}

<%@ Register TagPrefix="oajax" Namespace="OboutInc" Assembly="obout_AJAXPage" %>
        <!-- CallbackPanel1-->
        <oajax:CallbackPanel runat="server" ID="callbackPanel1">
            <content style="border: gray 1px solid;">
                <span style="color:red">
                    <asp:Literal id="serverMillisecond" Runat="server"></asp:Literal>
                </span>
            </content>
        </oajax:CallbackPanel>

        <!-- CallbackPanel2-->
        <oajax:CallbackPanel runat="server" ID="callbackpanel2">
            <content style="border: gray 1px solid;">
                <asp:Literal id="serverTime" Runat="server"></asp:Literal>
            </content>
        </oajax:CallbackPanel>

Example 4- Callback Panel inside Update panel.

<%@ Register TagPrefix="oajax" Namespace="OboutInc" Assembly="obout_AJAXPage" %>

 <tr>

    <td>

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

         <ContentTemplate>

           <oajax:CallbackPanel ID="CallBackPanel1" runat="server">

             <Content>

                 <table border="0" width="100%">

                  <tr>

                     <td>

 age ID="imgIndication" runat="server" Height="15px" ImageUrl="~/images/icon-delete.gif" Width="15px" />

                     </td>

                  </tr>

                </table>

              </Content>

      </oajax:CallbackPanel>

    </ContentTemplate>

   </asp:UpdatePanel>

  </td>

 </tr>

Server-Side Update

    UpdatePanel("callbackPanel1");