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

WCF Web Service Support

Notifier
Elizabeth Lincoln
Roland Mendel
Yoshi Tannamuri
Catherine Dewey
Jean Fresnière
Georg Pipps
Pascale Cartrain

RadNotification 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:RadNotification ID="RadNotification1" runat="server" LoadContentOn="EveryShow"
    WcfRequestMethod="POST"
    WcfServicePath="XmlHttpPanelWcfService.svc"
    WcfServiceMethod="GetCustomerByID"
    OnClientUpdating="OnClientUpdating">
</telerik:RadNotification>

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

  • The OnClientUpdating event occurs just before the notification content is updated. This event is cancellable. It will not be fired when the content is static. It is only fired when new content is received via a WebService or via a callback. The LoadContentOn setting is also used to control whether it will be fired or not.
  • The OnClientUpdated event occurs just after the notification content is updated. This event is not cancellable. It will not be fired when the content is static. It is only fired when new content is received via a WebService or via a callback. The LoadContentOn setting is also used to control whether it will be fired or not.
  • The OnClientUpdateError event occurs if there has been an error when the RadNotification content should be updated. An error alert which can be canceled is displayed.
Setting the Value property of RadNotification 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
    {
         [OperationContract]
         [WebInvoke(Method = "POST" , BodyStyle = WebMessageBodyStyle.Wrapped,
         ResponseFormat = WebMessageFormat.Json)]
         string GetCustomerByID( string CustomerID);
    }
  • Define the WCF Service class
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class XmlHttpPanelWcfService : IXmlHttpPanelWcfService
    {
         public string GetCustomerByID( string CustomerID)
         {
             return "The content of the notification" ;
         }
    }
  • Define 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>
Click on a person to see whether he/she is available for an online conversation.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
    • DefaultVB.aspx.vb
    • XmlHttpPanelWcfService.vb
  • styles.css
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.Notification.Callback.DefaultVB" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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" />
    <script type="text/javascript">
        function ShowNotification(arg) {
            var notification = $find("<%=RadNotification1.ClientID %>");
            notification.set_value('{"CustomerID":"' + arg + '"}');
            notification.show();
        }

        function OnClientUpdating(sender, args) {
            //The actual result data is in the [WcfServiceMethod]Result property of the content object.
            var data = args.get_content().GetCustomerByIDResult,
                customer = $telerik.$.parseJSON(data);

            UpdateNotificationData(customer);

            args.set_cancel(true);
        }

        function UpdateNotificationData(customer) {
            $telerik.$(".userImg > img").attr("src", "../../../Img/Northwind/Customers/Thumbs/" + customer.CustomerID + ".jpg")
            $telerik.$(".userName").html(customer.ContacName);
            $telerik.$(".userData").html("Hi there! I am currently out of the office. You can reach me by phone at " + customer.Phone + ".");
        }
    </script>
    <div class="demo-container no-bg">
        <div class="notWrapper">
            <div class="notTitle">
                Notifier
            </div>
            <div class="notCont">
                <asp:Repeater runat="server" ID="itemsRepeater" DataSourceID="SqlDataSource1">
                    <ItemTemplate>
                        <div onclick='<%# [String].Format("ShowNotification(""{0}"")", Eval("CustomerID")) %>'
                             class="notItems">
                            <div class="notThumb" style="background-image: url('<%# Eval("CustomerID", "images/{0}.jpg") %>');">
                            </div>
                            <div class="notName">
                            <%# Eval("ContactName") %>
                            </div>
                            <div>
                            <%# GetNote(((DirectCast(Container.DataItem, System.Data.DataRowView))("ContactName")).ToString()) %>
                            </div>
                            <div style="clear: both">
                            </div>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
            </div>
        </div>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                       ProviderName="System.Data.SqlClient" SelectCommand="SELECT CustomerID, ContactName FROM [Customers] 
                       WHERE Country = 'Austria' OR Country = 'Belgium' OR 
                       Country = 'Canada'"></asp:SqlDataSource>
    <telerik:RadNotification RenderMode="Lightweight" ID="RadNotification1" runat="server" Width="326" Animation="Fade"
                             EnableRoundedCorners="true" EnableShadow="true" Style="z-index: 35000" LoadContentOn="EveryShow"
                             OffsetX="-20" OffsetY="-20" VisibleTitlebar="false" WcfRequestMethod="POST" WcfServicePath="XmlHttpPanelWcfService.svc"
                             WcfServiceMethod="GetCustomerByID" OnClientUpdating="OnClientUpdating">
        <ContentTemplate>
            <div style="margin: 10px 5px 5px 5px; float: left;">
                <div class="userImg">
                    <asp:Image ID="img" runat="server" alt=""></asp:Image>
                </div>
                <div class="userInfo">
                    <span id="lblName" runat="server" class="userName"></span>
                    <br />
                    <span class="userOffline">offline</span> <span id="notificationLbl" runat="server"
                                                                   class="userData"></span>
                </div>
            </div>
        </ContentTemplate>
    </telerik:RadNotification>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance