AutoCompleteBox in Silverlight 4.0 with DataSource from SQL Server

In my last article AutoCompleteBox in Silverlight 4.0, the Data Source for the Autocomplete Box was an IEnumerable list. In this article we will work with a column value of table from SQL Server as Data Source for Autocomplete Box.

Our approach would be

1. Create WCF Service
2. Exposed data
3. Consume in Silverlight
4. Put data exposed by service as data source of Autocomplete Box.

I have a table called Course in School database. I am going to bind the value of the Title columnof Course table as source for AutoCompletebox.

Create WCF Service

Right click on the web project hosting the Silverlight application and add a new item by selecting WCF Service application from the Web tab.

1. The very first thing to do is to create a Service Contract returning titles as a list of strings.
   
   
   

Create Data Access layer

Now let us create a Data Access layer using LINQ to SQL class.

A. Right click on web application project and add a new item. Select LINQ to SQL class from Data tab.



Note: I have written many posts on LINQ. You can refer to them for a better and detailed understanding of LINQ. In this article I am going a bit faster.

B. Select server explorer option.

C. Either create a new data connection or choose one [if listed for your Database server] from the server explorer.



D. Drag and drop the Course table on dbml file.

Now our Data access layer is in place.

Implement Service

The service contract and data access layer is in place. Now let us implement the service.



I have done very simple stuff in the code above. I created an instance of a Data class context and fetching all the titles from courses table.

Test WCF Service

Right click on .SVC class and select show in browser.

Consume WCF Service in Silverlight

Right click on Silverlight application and add a service reference. Since the WCF Service is in the same solution with Silverlight click on Discover to select service.



Now the service is added. We need to make a client side class to bind as the data source of the Autocomplete box. Add the following class into the Silverlight project.



Call WCF Service

We know we need to make an asynchronous call to WCF from Silverlight. In the completed event we can bind the Autocompletebox as shown below.



In the above snippet, atcTextBox is the name of the Autocompletebox.

Drag and Drop AutoCompleteBox on XAML

1. From the tool box select AutoCompleteBox and drop on the XAML page:
   
   
    
2. Set the Binding, ValueMemberPath and FilterMode.
   
   
    
3. Set the DataTemplate and bind the TextBlock where user will type the text.
   
   
   

For reference,

MainPage.Xaml

<UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"  x:Class="SilverlightApplication4.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <sdk:AutoCompleteBox x:Name="atcTextBox" ItemsSource="{Binding}"
                             ValueMemberPath="CourseName" 
                             FilterMode="Contains" 
                             IsTextCompletionEnabled="True"                            
                             Height="30" Margin="62,22,54,248">
            <sdk:AutoCompleteBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding CourseName}" />
                </DataTemplate>
            </sdk:AutoCompleteBox.ItemTemplate>
            
        </sdk:AutoCompleteBox>

    </Grid>
</UserControl>

MainPage.Xaml.cs

using System;
using System.Collections.Generic;
using System.Windows.Controls;
using SilverlightApplication4.ServiceReference1;

namespace SilverlightApplication4
{
    public partial class MainPage : UserControl
    {
        List<Courses> lstCourses = null;
        public MainPage()
        {
            InitializeComponent();
            Service1Client proxy = new Service1Client();
            proxy.GetTitleToBindCompleted += new EventHandler<GetTitleToBindCompletedEventArgs>(proxy_GetTitleToBindCompleted);
            proxy.GetTitleToBindAsync();          

        }

        void proxy_GetTitleToBindCompleted(object sender, GetTitleToBindCompletedEventArgs e)
        {
           
            lstCourses = new List<Courses>();
            var res = e.Result;
            foreach (var r in res)
            {
                lstCourses.Add(new Courses { CourseName = r.ToString() });
                
            }

            atcTextBox.DataContext = lstCourses;
        }

      
    }  

}