Enable loading of CMS pages through an AJAX Web Service

Enable loading of CMS pages through an AJAX Web Service

Posted on November 06, 2009 0 Comments

The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.

Hello Sitefinity Community. My name is Radoslav and I am part of the Sitefinity team here at Telerik. I think it is about time I too had a blog where I would share my tips on developing with Sitefinity. As a starter I would like to introduce you to the idea of creating a navigation control that loads pages on demand through a web service.

 

The idea came from a community member request for a way to optimize the loading of navigation control, since the standard navigation controls load all relevant pages at once. The concept that I have used is similar to the one used on the RadControls for ASP.NET AJAX demos. We will load the first level of the site map using a SiteMapDataSource control and then each subsequent level will be loaded through a call to a WCF Web Service. The steps to achieve this are listed bellow:

 

1) Create a new AJAX-enabled WCF Service in ~/Sitefinity/Admin/Services/ as in screen shot bellow:
Create AJAX-Enabled WCF Service

2) Make sure that the service has been appropriately registered in the web.config service model section (this should is done automatically by VS):

 

<system.serviceModel> 
  <behaviors> 
   <endpointBehaviors> 
    <behavior name="ServiceAspNetAjaxBehavior"
     <enableWebScript /> 
    </behavior> 
   </endpointBehaviors> 
  </behaviors> 
  <serviceHostingEnvironment aspNetCompatibilityEnabled="true" /> 
  <services> 
   <service name="Service"
    <endpoint address="" behaviorConfiguration="ServiceAspNetAjaxBehavior" 
     binding="webHttpBinding" contract="Service" /> 
   </service> 
  </services> 
 </system.serviceModel> 
 

 

3) Create the web method that will get Site Map pages based on parent IDs and populate them in a RadMenu. This is added in the code file for your WCF service that gets created by VS in your ~/App_Code/ directory:

 

using System; 
using System.Collections.Generic; 
using System.ServiceModel; 
using System.ServiceModel.Activation; 
using Telerik.Cms; 
using Telerik.Web.UI; 
using System.Web; 
using Telerik.Cms.Web; 
using Telerik.Cms.Security; 
 
[ServiceContract(Namespace = "")] 
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] 
public class Service 
    // Add [WebGet] attribute to use HTTP GET 
    [OperationContract] 
    public RadMenuItemData[] LoadData(RadMenuItemData item, object context) 
    { 
        List<RadMenuItemData> items = new List<RadMenuItemData>();   
        Telerik.Cms.CmsManager manager = new Telerik.Cms.CmsManager(); 
        foreach (ICmsPage page in manager.GetPages(new Guid(item.Value.ToString()))) 
        { 
            RadMenuItemData newItem = new RadMenuItemData(); 
            PagePermission pagePermission = new PagePermission(page, PageRights.View); 
            //if page should appear in navigation 
            if (page.Navigable) 
            { 
                //check if it should deny anonymous access and user is not authenticated 
                if (!HttpContext.Current.User.Identity.IsAuthenticated && page.DenyAnonymous) 
                { continue; } 
                //check view permissions for the page 
                else if (pagePermission.CheckDemand()) 
                { 
                    //if user has view permissions for the page add it to the navigation 
                    newItem.Text = page.MenuName; 
                    newItem.Value = page.ID.ToString(); 
                    if (page.PageType == Telerik.Cms.CmsPageType.Group) 
                        newItem.NavigateUrl = ""
                    else newItem.NavigateUrl = "http://localhost:7401/Blankk37SP1/en" + page.DefaultUrl.Url.Substring(1); 
                    if (manager.GetPages(page.ID).Count > 0) 
                        newItem.ExpandMode = MenuItemExpandMode.WebService; 
                    items.Add(newItem); 
                } 
            } 
        } 
        return items.ToArray(); 
    } 
 
    // Add more operations here and mark them with [OperationContract] 

 

4) Create a Web User Control that will wrap in a RadMenu bound to a SiteMapDataSource. Sample markup bellow:

 

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebServiceMenu.ascx.cs" Inherits="WebServiceMenu" %> 
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" /> 
<telerik:RadAjaxManagerProxy ID="RadAjaxManager1" runat="server"
        <AjaxSettings> 
            <telerik:AjaxSetting AjaxControlID="RadMenu1"
                <UpdatedControls> 
                    <telerik:AjaxUpdatedControl ControlID="RadMenu1" /> 
                </UpdatedControls> 
            </telerik:AjaxSetting> 
        </AjaxSettings> 
    </telerik:RadAjaxManagerProxy> 
<telerik:RadMenu ID="RadMenu1" runat="server" skin="Black" 
    DataSourceID="SiteMapDataSource1"  
    MaxDataBindDepth="1" 
    DataTextField="Title" 
    DataValueField="Key" 
    DataNavigateUrlField="Url"
    <WebServiceSettings Path="~/Sitefinity/Admin/Services/Service.svc" Method="LoadData"/> 
            <DataBindings> 
                <telerik:RadMenuItemBinding Depth="0" ExpandMode="WebService" /> 
            </DataBindings> 
</telerik:RadMenu> 

 

5) Save the control and add it to your controls toolbox in Sitefinity. Note that you should enable .svc support for your IIS.

You can download sample source code and markup from here - Load on Demand Menu.
progress-logo

The Progress Team

View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.

Comments

Comments are disabled in preview mode.
Topics

Sitefinity Training and Certification Now Available.

Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.

Learn More
Latest Stories
in Your Inbox

Subscribe to get all the news, info and tutorials you need to build better business apps and sites

Loading animation