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

WebService Support

This example shows how to dynamically set and update the content of the RadNotification control via a WebService. This is an alternative of the callback mechanism.

The path to the web service and the name of the service method are specified in the WebMethodPath and WebMethodName properties.

In order to use the integrated support, the web service should have the following signature:

[ScriptService]
public class WebServiceName : WebService
{
     [WebMethod]
     public string WebServiceMethodName( object context)
     {
         // We cannot use a dictionary as a parameter,
         because it is only supported by script services.
         // The context object should be cast to a dictionary at runtime.
         IDictionary< string , object > contextDictionary = (IDictionary< string , object >) context;
         
         //...
     }
}

You can combine the VisibleOnPageLoad property and the WebService functionality of RadNotification to make a notification message visible when the page first loads and set its content using a WebService.

Notice the notification in the bottom right corner of the browser window. You can obtain the up-to-date information in the same manner by pressing the arrow button.

  • DefaultCS.aspx
  • NotificationWebService.cs
  • styles.css
<%@ Page Language="c#"  %>

<%@ 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">
        var CSSClasses = ["sunnyState", "cloudyState", "rainyState"];
        var current = 0;
        setInterval(function () {
            current = current == 2 ? 0 : current + 1;
            $get("backgroundDiv").className = "statesDiv " + CSSClasses[current];
        }, 1000);
    </script>
    <telerik:RadNotification RenderMode="Lightweight" ID="RadNotification1" Animation="Slide" runat="server" OffsetX="-20"
                             VisibleOnPageLoad="true" OffsetY="-20" Width="260px" Height="80px" LoadContentOn="EveryShow"
                             WebMethodName="GetWeatherForcast" WebMethodPath="NotificationWebService.asmx"
                             VisibleTitlebar="false" Value="rainyState" EnableRoundedCorners="true" Skin="Office2007">
    </telerik:RadNotification>
    <script type="text/javascript">
        
        function GetWeather() {
            var notification = $find("<%=RadNotification1.ClientID %>");
            notification.set_value(CSSClasses[current]);
            notification.show();
        }
    </script>
    <div class="demo-container no-bg">
        <div class="forecastBgr">
            <div class="statesDiv sunnyState" id="backgroundDiv"></div>
            <a onclick="GetWeather(); return false;" class="buttonWeather"></a>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance