Silverlight RIA Services and AutoCompleteBox

Posted by: Malcolm Sheridan , on 9/12/2009, in Category Silverlight 2, 3, 4 and 5
Views: 38859
Abstract: In the following article I’ll demonstrate how to use the AutoCompleteBox control in conjunction with RIA Services.
Silverlight RIA Services and AutoCompleteBox
 
The Silverlight Toolkit is a project that’s available from CodePlex. The description from from the website is:
“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:
 
NewSilverlightApplication
 
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.
 
AddNewItem
 
Connect to the Northwind database and select the Customers table from the Choose Your Database Objects dialog:
 
EntityDataModel
 
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. 
 
AddNewItem 
 
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:
 
AddNewDomain
 
The file is created. A default method called GetCustomers has been created for you:
 
C#
 
public IQueryable<Customer> GetCustomers()
{
return this.Context.Customers;
}
 
VB.NET
 
Public Function GetCustomers() As IQueryable(Of Customer)
Return Me.Context.Customers
End Function
 
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:
 
AddReference
 
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:
 
xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Ria.Controls"
 
The AutoCompleteBox needs an XML namespace to the System.Windows.Controls.Input assembly:
 
xmlns:input="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input"
 
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.
 
Search
 
Selecting any customer displays related information about them:
 
SearchResult
 
This is an easy way to get extra functionality in your project without adding tonnes of code. I hope you enjoyed reading it.

The entire source code of this article can be downloaded over here

If you liked the article,  Subscribe to the RSS Feed or Subscribe Via Email

Malcolm Sheridan is an independent contractor who has been working with Microsoft technologies since VB4. Malcolm has worked with .NET since its inception and thoroughly enjoys ASP.NET.
 
 
Give me a +1 if you think it was a good article. Thanks!
Recommended Articles
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


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by Mike on Thursday, June 17, 2010 3:56 PM
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:

<sdk:AutoCompleteBox Height="28" HorizontalAlignment="Left" Margin="183,195,0,0" Name="AutoMaterialTradeName" VerticalAlignment="Top" Width="250" IsTextCompletionEnabled="False" AllowDrop="True" ValueMemberBinding="{Binding tradeName}" ItemsSource="{Binding Data, ElementName=ChemicalDomainDataSource}" MinimumPrefixLength="3">
            <sdk:AutoCompleteBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding tradeName}" />
                </DataTemplate>
            </sdk:AutoCompleteBox.ItemTemplate>
        </sdk:AutoCompleteBox>
Comment posted by Mrunal Buch on Sunday, February 6, 2011 10:59 PM
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.

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel