New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

WebForms XmlHttpPanel Overview


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

About RadXmlHttpPanel for ASP.NET AJAX

Telerik RadXmlHttpPanel is a panel control that serves as a container for rapid content loading. You can place diverse content on the RadXmlHttpPanel: rich user content, user controls or just about anything that could be added on a page. It can be updated with WebServices or ASP.NET CallBack requests and allows you to easily create responsive applications with minimum HTML footprint.

RadXmlHttpPanel and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Types of loading There are three ways for loading data in the RadXmlHttpPanel. These are: AJAX, Client Callback and WebService
  • Industry-best cross-browser support Telerik controls support all major browsers Internet Explorer, Firefox, Safari, Opera and Google Chrome
  • Diverse content You can update diverse content: rich user content, user controls, just about anything that could be added on a page
  • Search Engine Optimization Telerik controls completely follow the SEO principles by allowing crawlers to follow and index content within the controls
  • No full page life cycle Any content in the Telerik XmlHTTP panel can be updated quickly without the need of FULL page lifecycle or Viewstate
  • FREE Training Materials A wealth of supporting resources: documentation, interactive training sessions, KB articles, videos and many more
More about RadXmlHttpPanel for ASP.NET AJAX
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • Styles.css
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.XmlHttpPanel.Overview.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="Styles.css" rel="stylesheet" type="text/css" />
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg">
        <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 RenderMode="Lightweight" ID="rcbCallBack" Visible="true" runat="server" OnClientSelectedIndexChanged="telerikDemo.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") %>'></asp:Image>
                            </div>
                        </ItemTemplate>
                    </telerik:RadComboBox>
                </div>
                <div style="position: absolute; left: 328px;">
                    <span style="color: #0F3789;">Country:</span>
                    <telerik:RadComboBox RenderMode="Lightweight" ID="rcbWebService" Visible="true" runat="server" AutoPostBack="False"
                        OnClientSelectedIndexChanged="telerikDemo.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") %>'></asp:Image>
                            </div>
                        </ItemTemplate>
                    </telerik:RadComboBox>
                </div>
                <div style="position: absolute; left: 615px;">
                    <span style="color: #0F3789;">Country:</span>
                    <telerik:RadComboBox RenderMode="Lightweight" ID="rcbWcfService" Visible="true" runat="server" AutoPostBack="False"
                        OnClientSelectedIndexChanged="telerikDemo.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") %>'></asp:Image>
                            </div>
                        </ItemTemplate>
                    </telerik:RadComboBox>
                </div>
            </div>
            <div class="divXmlPanelLeft">
                <telerik:RadXmlHttpPanel runat="server" ID="XmlHttpPanelCB" Value="3" OnClientResponseEnding="telerikDemo.onClientResponseEnding"
                    OnServiceRequest="XmlHttpPanel_ServiceRequest" RenderMode="Block">
                    <asp:Repeater ID="Repeater1" runat="server">
                        <ItemTemplate>
                            <div class="smallUserImage" onclick="telerikDemo.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="telerikDemo.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="telerikDemo.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>
    </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">
            Sys.Application.add_load(function() {
                telerikDemo.rcbWebService = $find("<%= rcbWebService.ClientID %>");
                telerikDemo.xmlHttpPanelWS = $find("<%=XmlHttpPanelWS.ClientID %>");
                telerikDemo.rcbCallBack =  $find("<%= rcbCallBack.ClientID %>");
                telerikDemo.xmlHttpPanelCB = $find("<%=XmlHttpPanelCB.ClientID %>");
                telerikDemo.rcbWcfService = $find("<%= rcbWcfService.ClientID %>");
                telerikDemo.xmlHttpPanelWCF = $find("<%=XmlHttpPanelWCF.ClientID %>");
                telerikDemo.radXmlHttpPanelInfoCustomer = $find("<%= RadXmlHttpPanelInfoCustomer.ClientID %>");

            });
        </script>
    </telerik:RadScriptBlock>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance