Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q1 2012 released 04/11/2012
select
  • Rate / Review ▼

    • Give your Feedback:

      Rate this demo:


XmlHttpPanel / First Look


Country Customers (Callback): Country Customers (WebService): Country Customers (WCF Service):
Country:
Country:
Country:


  • Telerik RadXmlHttpPanel

    Telerik RadXmlHttpPanel is a panel that can load content on demand using web services or ASP.NET callbacks. It can replace UpdatePanel, or RadAjaxPanel, in certain scenarios where no viewstate and control lifecycle execution is required. In these cases it will deliver much better performance compared to UpdatePanel or RadAjaxPanel.

    Partial page updates with AJAX are flexible and can be used in just about any scenario. However, when AJAX is used, the server-side page goes through its full page lifecycle. The whole control tree is created, all event handlers are executed, the ViewState is processed and updated, and sent back to the client. On the other hand, callbacks and web services can also be used for partial page updates, but carry a much smaller (or even no additional) overhead.

    There are three ways for loading data on the RadXmlHttpPanel - by using the ASP.NET Callback mechanisms, WebService and WCF Service.

    • Callback - When a client callback is used, the server Page does not go through its whole lifecycle, but only a small part of it. The client state is not updated, and it is not sent back to the client-side. When Callbacks are used, a POST request is made from the client to the server, and the values of all FORM fields, such as hidden fields (including the view state field) are sent to the server. When the view state is large, this could mean increased overhead. On the other hand, no extra files are needed to use this mode (unlike when using a WebService).
    • WebService - can be used to handle the data request of the RadXmlHttpPanel. The WebMethodPath and the WebMethodName properties should be set and the RadXmlHttpPanel automatically retrieves and loads the data. Similarly as in the Client Callback the client state is not affected. A web service requires a couple of extra files to set up, but it is the most efficient approach, as no data, other than the Value string is sent over from the client to the server.
    • WCF Service - can be used to handle the data request of the RadXmlHttpPanel. The WcfRequestMethod, WcfMethodPath and the WcfMethodName properties should be set and the RadXmlHttpPanel automatically retrieves and loads the data. Similarly as in the Client Callback the client state is not affected. A WCF Service requires a couple of extra files to set up, but it is an efficient approach, as no data, other than the Value string is sent over from the client to the server. For more information review the Client-Side WCF Service binding help topic.

    In addition, when using RadXmlHttpPanel a partial page update request can be easily initiated from the client side using its set_value method.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.XmlHttpPanel.Default.DefaultCS"
        CodeFile="DefaultCS.aspx.cs" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <qsf:HeadTag ID="Headtag1" runat="server" />
        <style type="text/css">
            .divContainerTop
            {
                background: url('Images/top_back.png') no-repeat;
                width: 100%;
                height: 375px;
                position: relative;
            }
            .divXmlPanelLeft, .divXmlPanelMiddle, .divXmlPanelRight
            {
                position: absolute;
                top: 98px;
                width: 250px;
                height: 240px;
                overflow: auto;
            }
            .divXmlPanelLeft
            {
                left: 35px;
            }

            .divXmlPanelMiddle
            {
                left: 321px;
            }
            .divXmlPanelRight
            {
                left: 609px;
            }
            .spanTitle
            {
                font-size: 14px;
                color: #5281ce;
                position: absolute;
            }
            .divContainerBottom
            {
                background: url('Images/bot_back.png') no-repeat;
                height: 260px;
                position: relative;
            }
            .xmlPanelCustomerInfo
            {
                position: absolute;
                top: 19px;
                left: 40px;
            }
            .country
            {
                margin: 4px;
                border: solid 1px #004759 !important;
            }
            .classImg
            {
                float: left;
                border: 1px solid White;
                border-top-color: #b7ceee;
                border-left-color: #b7ceee;
                margin-right: 50px;
                width: 180px;
                height: 220px;
                background-position: center;
                background-repeat: no-repeat;
            }
            .title
            {
                font-size: 14px;
                color: #5281ce;
                width: 300px;
            }
            .info
            {
                color: #0F3789;
                font-size: 14px;
            }
            .smallUserImage
            {
                border: 1px solid #999999;
                margin: 6px 10px 5px 6px;
                width: 85px;
                height: 104px;
                float: left;
                background: center no-repeat;
            }
        </style>
    </head>
    <body class="BODY">
        <form id="Form2" method="post" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" ShowSkinChooser="false" />
        <asp:ScriptManager ID="ScriptManager" runat="server" />
        <div class="divContainerTop">
            <div style="height: 65px;">
                <br />
                <span class="spanTitle" style="left: 20px;">Country Customers (Callback):</span>
                <span class="spanTitle" style="left: 306px;">Country Customers (WebService):</span>
                <span class="spanTitle" style="left: 593px;">Country Customers (WCF Service):</span>
            </div>
            <div>
                <div style="position: absolute; left: 42px;">
                    <span style="color: #0F3789;">Country:</span>
                    <telerik:RadComboBox ID="rcbCallBack" Visible="true" runat="server" OnClientSelectedIndexChanged="OnClientSelectedIndexChanged"
                        DataSourceID="dllDataSource" DataTextField="Country" DataValueField="Country"
                        Width="194px" Height="450px" Skin="Web20">
                        <ItemTemplate>
                            <div>
                                <asp:Image ImageUrl='<%# Eval("Country", "~/Img/Northwind/Countries/Thumbs/{0}.gif") %>'
                                    ID="Image" runat="server" Width="150px" Height="150px" class="country" AlternateText='<%# Eval("Country","{0}.gif") %>' />
                            </div>
                        </ItemTemplate>
                    </telerik:RadComboBox>
                </div>
                <div style="position: absolute; left: 328px;">
                    <span style="color: #0F3789;">Country:</span>
                    <telerik:RadComboBox ID="rcbWebService" Visible="true" runat="server" AutoPostBack="False"
                        OnClientSelectedIndexChanged="OnClientSelectedIndexChanged" DataSourceID="dllDataSource"
                        DataTextField="Country" DataValueField="Country" Width="194px" Height="450px"
                        Skin="Web20">
                        <ItemTemplate>
                            <div>
                                <asp:Image ImageUrl='<%# Eval("Country", "~/Img/Northwind/Countries/Thumbs/{0}.gif") %>'
                                    ID="Image" runat="server" Width="150px" Height="150px" class="country" AlternateText='<%# Eval("Country","{0}.gif") %>' />
                            </div>
                        </ItemTemplate>
                    </telerik:RadComboBox>
                </div>
                <div style="position: absolute; left: 615px;">
                    <span style="color: #0F3789;">Country:</span>
                    <telerik:RadComboBox ID="rcbWcfService" Visible="true" runat="server" AutoPostBack="False"
                        OnClientSelectedIndexChanged="OnClientSelectedIndexChanged" DataSourceID="dllDataSource"
                        DataTextField="Country" DataValueField="Country" Width="194px" Height="450px"
                        Skin="Web20">
                        <ItemTemplate>
                            <div>
                                <asp:Image ImageUrl='<%# Eval("Country", "~/Img/Northwind/Countries/Thumbs/{0}.gif") %>'
                                    ID="Image" runat="server" Width="150px" Height="150px" class="country" AlternateText='<%# Eval("Country","{0}.gif") %>' />
                            </div>
                        </ItemTemplate>
                    </telerik:RadComboBox>
                </div>
            </div>
            <div class="divXmlPanelLeft">
                <telerik:RadXmlHttpPanel runat="server" ID="XmlHttpPanelCB" Value="3" OnClientResponseEnding="OnClientResponseEnding"
                    OnServiceRequest="XmlHttpPanel_ServiceRequest" RenderMode="Block">
                    <asp:Repeater ID="Repeater1" runat="server">
                        <ItemTemplate>
                            <div class="smallUserImage" onclick="loadUserProfile(this);" style="background-image: url('<%# Eval("CustomerID", "../../../Img/Northwind/Customers/Thumbs/{0}.jpg") %>');">
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                </telerik:RadXmlHttpPanel>
                <br />
            </div>
            <div class="divXmlPanelMiddle">
                <telerik:RadXmlHttpPanel runat="server" ID="XmlHttpPanelWS" Value="3" OnClientResponseEnding="OnClientResponseEnding"
                    WebMethodPath="XmlHttpPanelWebService.asmx" WebMethodName="GetCustomersByCountryXmlHttpPanel"
                    RenderMode="Block">
                </telerik:RadXmlHttpPanel>
            </div>
            <div class="divXmlPanelRight">
                <telerik:RadXmlHttpPanel runat="server" ID="XmlHttpPanelWCF" Value="{&quot;country&quot;:&quot;Argentina&quot;}" OnClientResponseEnding="OnClientResponseEnding"
                    WcfServicePath="XmlHttpPanelWcfService.svc" WcfServiceMethod="GetCustomersByCountry" WcfRequestMethod="POST"
                    RenderMode="Block">
                </telerik:RadXmlHttpPanel>
            </div>
        </div>
        <div class="divContainerBottom">
            <telerik:RadXmlHttpPanel runat="server" Height="240px" ID="RadXmlHttpPanelInfoCustomer"
                Value="3" OnServiceRequest="RadXmlHttpPanelInfoCustomer_ServiceRequest" RenderMode="Block"
                CssClass="xmlPanelCustomerInfo">
                <asp:Repeater ID="RepeaterCustomerInfo" runat="server">
                    <ItemTemplate>
                        <div class="classImg" style="background-image: url('<%# Eval("CustomerID", "../../../Img/Northwind/Customers/{0}.jpg") %>');">
                        </div>
                        <div style="float: left;">
                            <br />
                            <br />
                            <asp:Label CssClass="info" ID="Name" runat="server" Font-Size="X-Large" ForeColor="#5281ce"><%# Eval("ContactName") %></asp:Label><br />
                            <asp:Label CssClass="info" ID="Label1" runat="server" ForeColor="#5281ce"><%# Eval("ContactTitle")%></asp:Label><br />
                            <br />
                            <div style="text-align: right; float: left;">
                                <span class='title'>Company Name:</span>
                                <br />
                                <br />
                                <span class='title'>Address:</span>
                                <br />
                                <br />
                                <span class='title'>City:</span>
                                <br />
                                <br />
                                <span class='title'>Country:</span>
                                <br />
                                <br />
                            </div>
                            <div style="float: left; margin-left: 5px;">
                                <asp:Label CssClass="info" ID="cName" runat="server"><%# Eval("CompanyName")%></asp:Label>
                                <br />
                                <br />
                                <asp:Label CssClass="info" ID="Label2" runat="server"><%# Eval("Address")%></asp:Label>
                                <br />
                                <br />
                                <asp:Label CssClass="info" ID="Label3" runat="server"><%# Eval("City")%></asp:Label>
                                <br />
                                <br />
                                <asp:Label CssClass="info" ID="Label4" runat="server"><%# Eval("Country")%></asp:Label>
                                <br />
                            </div>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
            </telerik:RadXmlHttpPanel>
        </div>
        <asp:SqlDataSource ID="dllDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT DISTINCT TOP 12 Country FROM [Customers]"></asp:SqlDataSource>
        <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

            <script type="text/javascript">
                function OnClientSelectedIndexChanged(sender, args)
                {
                    var value = args.get_item().get_value();
                    //Use client-side update
                    if (sender == $find("<%= rcbWebService.ClientID %>"))
                    {
                        var panel = $find("<%=XmlHttpPanelWS.ClientID %>");
                    }
                    else if (sender == $find("<%= rcbCallBack.ClientID %>"))
                    {
                        var panel = $find("<%=XmlHttpPanelCB.ClientID %>");
                    }
                    else if (sender == $find("<%= rcbWcfService.ClientID %>"))
                    {
                        var panel = $find("<%=XmlHttpPanelWCF.ClientID %>");
                        value = '{"country":"' + value + '"}';
                    }
                    panel.set_value(value);
                }

                function OnClientResponseEnding(sender, args)
                {
                    //This method is called whan response data is about to be inserted in the XmlHttpPanel on the client
                    //Use this handler to automatically load a user profile in the bottommost XmlHttpPanel
                    //A timeout is needed to allow for the panel to have its innerHTML set.
                    window.setTimeout(function()
                    {
                        var div = $telerik.getElementByClassName(sender.get_element(), "smallUserImage", "DIV");
                        if (div)
                            loadUserProfile(div);
                    }, 0);
                }

                function loadUserProfile(div)
                {
                    var img = div.style.backgroundImage;
                    var id = img.substring(img.lastIndexOf("/") + 1, img.lastIndexOf("."));
                    //Load user profile in XmlHttpPanelWS panel through a callback request
                    var panel = $find("<%= RadXmlHttpPanelInfoCustomer.ClientID %>");
                    panel.set_value(id);
                }
            </script>

        </telerik:RadScriptBlock>
        <qsf:Footer runat="server" ID="Footer1" ShowCodeViewer="true" />
        </form>
    </body>
    </html>

Get more than expected!

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2012 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451