Telerik blogs

How To: Use WCF services with ASP.NET AJAX databound controls

by Iana Tsolova
April 08, 2009 Web, ASP.NET AJAX 0 Comments


As you know RadControls for ASP.NET AJAX controls fully leverage .NET 3.5 and come with built-in support for LINQ, LinqToSQL, EntityDataSource, ADO.NET DataServices, and WCF Web Service. With Q1 2009 our online examples feature .NET 3.5 examples for all databound controls (Grid, Scheduler, ComboBox, Menu, TreeView, PanelBar).

In this post I will guide you through the process of creating a RadComboBox which loads its items on demand using WCF services. This will be a step by step tutorial, but if you are familiar with the process you can jump directly to the online demo.

The steps below show how to load the items of RadComboBox from WCF service but they are also applicable for RadMenu and RadTreeView.

1. Create a new Web Site in Visual Studio 2008. Make sure the target framework is set to 3.5

2. Drag RadComboBox from your toolbox. From the SmartTag click on the Add RadScriptManager link. It will automatically register the handler in the web.config file.

combo-smart-tag

handler-added

 

3. Add the WCF service – right click on your project in the Solution Explorer and select Add New Item. This is important: select the Ajax-enabled WCF service option (do not mix it with WCF Service):

adding-wcf-service 

Clicking the Add button will create the .svc file as well as the code behind file placed in the App_Code folder. The web.config file is also automatically updated with the appropriate system.serviceModel node:

<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>

 

4. Open the Service.cs file and add the method which will return the combobox items.

[OperationContract]
public RadComboBoxData LoadData(RadComboBoxContext context)
{
    //The RadComboBoxData object contains all required information for load on demand: // - the items // - are there more items in case of paging // - status message to be displayed (which is optional)
    RadComboBoxData result = new RadComboBoxData();
    NorthwindDataContext northwind = new NorthwindDataContext();
 
    //Get all items from the Customers table. This query will not be executed untill the ToArray method is called.
    var allCustomers = from customer in northwind.Customers
                       orderby customer.ContactName
                       select new RadComboBoxItemData
                       {
                           Text = customer.ContactName
                       };
 
    //In case the user typed something - filter the result set string text = context.Text;
    if (!String.IsNullOrEmpty(text))
    {
        allCustomers = allCustomers.Where(item => item.Text.StartsWith(text));
    }
     
    //This will execute the database query and return the data as an array of RadComboBoxItemData objects
    result.Items = allCustomers.ToArray();
             
    return result;
}

Note that the method returns an object of type RadComboBoxData. One of the properties of this class is the Items property of type array of RadComboBoxItemData objects.

[Serializable]
[DataContract]
public class RadComboBoxData
{
    public RadComboBoxData();
 
    [DataMember]
    public Dictionary<string, object> Context { get; set; }
    [DataMember]
    public bool EndOfItems { get; set; }
    [DataMember]
    public RadComboBoxItemData[] Items { get; set; }
    [DataMember]
    public string Message { get; set; }
    [DataMember]
    public int NumberOfItems { get; set; }
    [DataMember]
    public string Text { get; set; }
    [DataMember]
    public string Value { get; set; }
}

We are adding the items from the database to that array.

5. Finally, add the WebService settings to the RadComboBox – just specify the Path and the Method:

<telerik:RadComboBox ID="RadComboBox1" EnableLoadOnDemand="True" Height="150px" Runat="server"> <WebServiceSettings Path="Service.svc" Method="LoadData" /> </telerik:RadComboBox>

 

Download the sample project.

P.S. The content of this blog will be included in the online help of the respective RadControls for ASP.NET AJAX.


ASP.NET, Web Forms
About the Author

Iana Tsolova

is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.

Comments

Comments are disabled in preview mode.