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

WCF Service binding

good food
Product NameUnit Price
Page 1 of 2
 Item 1 to 7 of 9
Nord-Ost Matjeshering25.89
Inlagd Sill19.00
Gravad lax26.00
Boston Crab Meat18.40
Jack's New England Clam Chowder9.65
Rogede sild9.50
Spegesild12.00
  • Demo Configurator

Select WCF Service request method


RadXmlHttpPanel can be configured to perform a WCF Service ajax call to update its content, which in general leads to an improved performance. In order to enable this, you should set the WcfRequestMethod, WcfMethodPath and the WcfMethodName properties of the control.
<telerik:RadXmlHttpPanel ID="RadXmlHttpPanel1" runat="server"
                WcfRequestMethod="POST"
                WcfServiceMethod="PostRetrieveProductByID"
                WcfServicePath="XmlHttpPanelWcfService.svc">
</telerik:RadXmlHttpPanel>

There are three client events where you can handle the items request:

  • The OnClientResponseEnding event occurs just before the RadXmlHttpPanel content is updated. This event is cancellable.
  • The OnClientResponseEnded event occurs just after the RadXmlHttpPanel content is updated. This event is not cancellable.
  • The OnClientResponseError event occurs if there has been an error when the RadXmlHttpPanel content should be updated. An error alert which can be canceled is displayed.
Setting the Value property of RadXmlHttpPanel depends on the WcfRequestMethod property value. In both cases CustomerID is the name of the parameter in the Wcf Service method.
  • "POST" - '{"CustomerID":"value"}'
  • "GET" - 'CustomerID=value'
The WCF Service should have the following implementation:
  • Define the contracts of the WCF Service in an interface. The Method = "POST"/"GET" corresponds to the value of the WcfRequestMethod property.
    [ServiceContract]
    public interface IXmlHttpPanelWcfService
    {
        //"POST" or "GET" depends on the WcfRequestMethod property value
        [OperationContract]
        [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Wrapped,
        ResponseFormat = WebMessageFormat.Json)]
        string PostRetrieveProductByID(string ProductID);
    }
  • Define the WCF Service class
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class XmlHttpPanelWcfService : IXmlHttpPanelWcfService
    {
        public string PostRetrieveProductByID(string ProductID)
        {
            return "The content of the XmlHttpPanel";
        }
    }
  • Deifne the configuration in the web.config file
    <system.serviceModel>
        <behaviors>
            <endpointBehaviors>
                <behavior name="XmlHttpPanelWcfBehavior">
                    <webHttp />
                </behavior>
            </endpointBehaviors>
            <serviceBehaviors>
                <behavior name="XmlHttpPanelWcfBehavior">
                    <serviceMetadata httpGetEnabled="true" />
                    <serviceDebug includeExceptionDetailInFaults="true" />
                </behavior>
            </serviceBehaviors>
        </behaviors>
        <services>
            <service behaviorConfiguration="XmlHttpPanelWcfBehavior" name="XmlHttpPanelWcfService">
                <endpoint address="" binding="webHttpBinding" contract="IXmlHttpPanelWcfService"
                behaviorConfiguration="XmlHttpPanelWcfBehavior"/>
            </service>
        </services>
    </system.serviceModel>
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.XmlHttpPanel.Default.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" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT TOP(11) [ProductID], [ProductName], [QuantityPerUnit], [UnitPrice], [UnitsInStock] FROM [Products] WHERE ([CategoryID] = @CategoryID)">
        <SelectParameters>
            <asp:Parameter DefaultValue="8" Name="CategoryID" Type="Int32"></asp:Parameter>
        </SelectParameters>
    </asp:SqlDataSource>
    <div class="demo-container no-bg">
        <div class="divContainer">
            <div class="divContainerHeader">
                <img src="images/good-food.png" alt="good food" />
            </div>
            <div class="divGrid">
                <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" Skin="Telerik" DataSourceID="SqlDataSource1" Width="370px"
                    AllowSorting="True" AllowPaging="true" runat="server" AutoGenerateColumns="false" PageSize="7"
                    GridLines="None">
                    <MasterTableView ClientDataKeyNames="ProductID" Width="100%" Summary="RadGrid table">
                        <Columns>
                            <telerik:GridBoundColumn DataField="ProductID" Visible="false">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn HeaderText="Product Name" DataField="ProductName" UniqueName="ContactName">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn HeaderText="Unit Price" DataField="UnitPrice" UniqueName="Address">
                            </telerik:GridBoundColumn>
                        </Columns>
                    </MasterTableView>
                    <PagerStyle Mode="Slider" PageButtonCount="5"></PagerStyle>
                    <ClientSettings EnableRowHoverStyle="true" Selecting-AllowRowSelect="true" ClientEvents-OnRowSelected="telerikDemo.rowSelected">
                    </ClientSettings>
                </telerik:RadGrid>
            </div>
            <div class="divXmlHttpPanel">
                <telerik:RadXmlHttpPanel ID="RadXmlHttpPanel1" runat="server" RenderMode="Block"
                    WcfRequestMethod="POST" WcfServiceMethod="PostRetrieveProductByID" WcfServicePath="XmlHttpPanelWcfService.svc">
                </telerik:RadXmlHttpPanel>
            </div>
        </div>
    </div>
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    </telerik:RadScriptBlock>
    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View runat="server">
                <qsf:RadioButtonList ID="RequestMethodChooser" runat="server" Label="Select WCF Service request method">
                    <asp:ListItem Value="post" Text="Post" Selected="True" />
                    <asp:ListItem Value="get" Text="Get" />
                </qsf:RadioButtonList>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    <script src="scripts.js" type="text/javascript"></script>
    <script type="text/javascript">
        serverIDs({
            xmlHttpPanelID: "<%=RadXmlHttpPanel1.ClientID %>",
            requestMethodChooserID: "<%=RequestMethodChooser.ClientID%>",
            gridID: "<%= RadGrid1.ClientID %>"
        });
    </script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance