Dhananjay Kumar

In my last article AutoCompleteBox in Silverlight 4.0 , Data Source for Autocomplete Box was an IEnumerable list. In this post 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 value of the Title column of Course table as source for AutoCompletebox.

Create WCF Service

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

1. Very first let us create a Service Contract returning titles as list of string.

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 them for better and detail understanding of LINQ. In this post I am going bit faster J

b. Select server explorer option.

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

d. Drag and drop Course table on dbml file.

Now our Data access layer is in place.

Implement Service

Service contract and Data access layer is in place. Now let us implement the service.

I have done a very simple stuff in above code. I created instance of 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 service reference. Since WCF Service is in same solution with Silverlight click on Discover to select service.

Now Service is added. We need to make a client side class to bind as data source of Autocomplete box. Add below class in Silverlight project.

Call WCF Service

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

In above snippet atcTextBox is 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

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

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