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.

clip_image001

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.

clip_image003

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.

clip_image004

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.

clip_image006

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.

clip_image007

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.

clip_image009

Call WCF Service

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

clip_image011

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

clip_image012

2. Set the Binding, ValueMemberPath and FilterMode.

clip_image014

3. Set the DataTemplate and bind the TextBlock where user will type the text.

clip_image015

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

Advertisements

3 thoughts on “AutoCompleteBox in Silverlight 4.0 with DataSource from SQL Server

  1. Dear Dhananjay
    Can’t i do the same by using domain service class means the whole procedure you explained in the Tutorials on WCF RIA services.
    Do i have to create a service class along with Domainservice class?
    i mean i am confused that what is the role of domain data class.
    can i do the same Autocomplete box binding by using domain service class?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s