“The Silverlight Toolkit is a collection of Silverlight controls, components and utilities made available outside the normal Silverlight release cycle. It adds new functionality quickly for designers and developers, and provides the community an efficient way to help shape product development by contributing ideas and bug reports. It includes full source code, unit tests, samples and documentation for 26 new controls covering charting, styling, layout, and user input.”

One of the controls available is the AutoCompleteBox. This represents a control that provides a text box for user input and a drop-down that contains possible matches based on the input in the text box. When this is used in conjunction with RIA Services, you have a complex solution with minimum code. Before starting you must download the Silverlight Toolkit and RIA Services July 2009 preview.

To begin with open Visual Studio 2008 and choose File > New > Project > Silverlight > Silverlight Application. A New Silverlight Application dialog will appear asking about the web application tied to this project. At the bottom of the dialog is a new section called Enable .NET RIA Services. Tick this box to enable RIA Services for the Silverlight project:

Open the web application and add a new ADO.NET Entity Data Model file to your project and name it Northwind.edmx. This example will connect up to the Northwind database. You can download it from here.

Connect to the Northwind database and select the Customers table from the Choose Your Database Objects dialog:

Click Finish when you’re done. Now that you’ve added your Customer object you must build your project. This is a must because the next step we will be adding a Domain Service Class file to the project, and it needs to discover the Customers object you just added. The next step is to right click on the web application and choose Add > New Item > Domain Service Class.

The domain service class is a new file that is specifically for RIA Services. Name the file NorthwindService and click Add. The Add New Domain Service Class dialog appears. Select the Customer object and click OK:

The file is created. A default method called GetCustomers has been created for you:

C#

publicIQueryable<Customer> GetCustomers()

{

returnthis.Context.Customers;

}

VB.NET

PublicFunction GetCustomers() As IQueryable(Of Customer)

ReturnMe.Context.Customers

EndFunction

This is all that’s required for the web application. Open up the Silverlight application and add a reference to the System.Windows.Ria.Controls assembly:

This reference is required because I am going to use a new control that is part of the RIA services installation called the DomainDataSource control. This control is similar to the ObjectDataSource. It will be responsible for the connection to the database. Add the following xaml to the MainPage.xaml file:

<Grid x:Name="LayoutRoot">

<riaControls:DomainDataSource AutoLoad="True"

QueryName="GetCustomers"

x:Name="dds">

<riaControls:DomainDataSource.DomainContext>

<web:NorthwindContext />

</riaControls:DomainDataSource.DomainContext>

</riaControls:DomainDataSource>

<StackPanel Orientation="Vertical" x:Name="parent">

<StackPanel Orientation="Horizontal">

<TextBlock Text="Contact Name:" />

<input:AutoCompleteBox

x:Name="filter"

FilterMode="StartsWith"

MinimumPrefixLength="2"

MaxDropDownHeight="150"

ItemsSource="{Binding Data, ElementName=dds}"

ValueMemberBinding="{Binding ContactName}"

Width="150" Height="25" VerticalAlignment="Top"

SelectionChanged="filter_SelectionChanged"

Background="#FFC11E1E">

</input:AutoCompleteBox>

</StackPanel>

<StackPanel Orientation="Horizontal">

<TextBlock Text="Contact title: " FontWeight="Bold" />

<TextBlock Text="{Binding ContactTitle}" />

</StackPanel>

<StackPanel Orientation="Horizontal">

<TextBlock Text="Contact name: " FontWeight="Bold" />

<TextBlock Text="{Binding ContactName}" />

</StackPanel>

<StackPanel Orientation="Horizontal">

<TextBlock Text="Company Name: " FontWeight="Bold" />

<TextBlock Text="{Binding CompanyName}" />

</StackPanel>

<StackPanel Orientation="Horizontal">

<TextBlock Text="Address: " FontWeight="Bold" />

<TextBlock Text="{Binding Address}" />

</StackPanel>

<StackPanel Orientation="Horizontal">

<TextBlock Text="City: " FontWeight="Bold" />

<TextBlock Text="{Binding City}" />

</StackPanel>

<StackPanel Orientation="Horizontal">

<TextBlock Text="Region: " FontWeight="Bold" />

<TextBlock Text="{Binding Region}" />

</StackPanel>

<StackPanel Orientation="Horizontal">

<TextBlock Text="Postal code: " FontWeight="Bold" />

<TextBlock Text="{Binding PostalCode}" />

</StackPanel>

<StackPanel Orientation="Horizontal">

<TextBlock Text="Country: " FontWeight="Bold" />

<TextBlock Text="{Binding Country}" />

</StackPanel>

<StackPanel Orientation="Horizontal">

<TextBlock Text="Phone: " FontWeight="Bold" />

<TextBlock Text="{Binding Phone}" />

</StackPanel>

<StackPanel Orientation="Horizontal">

<TextBlock Text="Fax: " FontWeight="Bold" />

<TextBlock Text="{Binding Fax}" />

</StackPanel>

</StackPanel>

</Grid>

The first step is to tell Silverlight that you’re using a control in the System.Windows.Ria.Controls assembly by creating adding an XML namespace:

These two XML namespaces are added automatically when you drag and drop the control from your toolbox. Now add the DomainDataSource control and set the QueryName property to the name of the method, GetCustomers, in the domain service class. AutoLoad must be set to True for the data to be loaded automatically. Lastly you need to assign the DomainContext to the NorthwindContext:

<riaControls:DomainDataSource.DomainContext>

<web:NorthwindContext />

</riaControls:DomainDataSource.DomainContext>

The AutoCompleteBox is bound to the DomainDataSource through element binding:

ItemsSource="{Binding Data, ElementName=dds}"

ValueMemberBinding="{Binding ContactName}"

The ValueMemberBinding property is bound to the ContactName. This means that when the user starts typing, it will be searching the customers table for matching contact names. If matches are found, the user will be able to select the record from the list provided. Run the project and type in MI to see two customers in the AutoCompleteBox.

Selecting any customer displays related information about them:

This is an easy way to get extra functionality in your project without adding tonnes of code. I hope you enjoyed reading it.

Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET, a Telerik Insider and a regular presenter at conferences and user groups throughout Australia and New Zealand. Being an ASP.NET guy, his focus is on web technologies and has been for the past 10 years. He loves working with ASP.NET MVC these days and also loves getting his hands dirty with jQuery and JavaScript. He also writes technical articles on ASP.NET for SitePoint and other various websites. Follow him on twitter @malcolmsheridan

Feedback - Leave us some adulation, criticism and everything in between!

Finally!! an article that helped me with the autocompletebox... with all the steps a newbie as me needed.

Comment posted by
Cyberg
on Thursday, November 4, 2010 3:51 PM

It's just that the list dosnt display the name but the ID. I think that this is not the desired result ?
I get to the same point when googling...
If you have any idea...
Thanks

Comment posted by
bliss19
on Tuesday, November 16, 2010 11:18 PM

How to get password to source?

Comment posted by
yasser
on Monday, December 20, 2010 6:06 AM

thanks alot but i want to know something why the attacjed code has password and where can i get it?????

Comment posted by
Carol
on Tuesday, December 21, 2010 3:28 AM

We have removed all passwords, however try dotnetcurry123#

Comment posted by
Mrunal Buch
on Saturday, January 8, 2011 9:42 AM

I am getting an error when the data size grows. Can you please help me with this. I have around 10000 records in one of the table and as soon as i open the page due to AutoLoad=true it crashes. I tried giving the LoadSize and PageSize but in that case the search is not working properly.

Comment posted by
Gavin Coates
on Thursday, January 20, 2011 3:39 AM

Cyberg - I had the same problem, and after much trial and error managed to get it to work by creating a DataTemplate and binding the ItemSource properties. Heres my code for the AutoCompleteBox:

When the data is huge say 10K to 20K, some times the WCF RIA service crashes. Also, Due to the fact that we have an autoload=true, as soon as we open a form it starts downloading the data. Is there a better way to handle.

Comment posted by
Gavin Coates
on Monday, February 21, 2011 6:03 AM

Mrunal - I would suggest turning autoload off, also set a minimumprefixlength of say 3 characters, that way the database will not be queried until at least 3 characters have been entered. this will give a much smaller record set that is returned.

Comment posted by
Husso
on Thursday, April 28, 2011 6:26 AM

Hi Malcolm Sheridan,

I have problem in using AutoCompleteBox with 2 radiobuttons
it's posted on Silverlight forums.

http://forums.silverlight.net/forums/p/226514/548647.aspx

i hope you can come up with a better workaround

Thanks
Husso

Comment posted by
Husso
on Thursday, April 28, 2011 6:33 AM

Hi Malcolm Sheridan,

I have problem in using AutoCompleteBox with 2 radiobuttons
it's posted on Silverlight forums.

http://forums.silverlight.net/forums/p/226514/548647.aspx

i hope you can come up with a better workaround

Thanks
Husso

Comment posted by
Chris
on Wednesday, November 2, 2011 4:01 PM

password on zip... to stop plagarism? Lame and annoying to say the least.
required newsletter signup to get password? Here's my password: FU

Comment posted by
Admin
on Thursday, November 3, 2011 10:12 PM

Please see the previous comment where the password has been published by Carol.