There are two commonly used techniques for working with data in Silverlight 2 and 3. One involves using a WCF Service and a LINQToSQL class and the second is by using ADO.NET Data Services.
This article discusses the first approach. A DataGrid will be used as the UI element to display data. The data in the grid is loaded from a LINQ model and displayed on the Silverlight client through a WCF service. Whenever the user makes any changes to the grid, the LINQ model on the service is asynchronously updated. This is the biggest advantage of the approach.
Creating a data source
It is assumed that you are using SQL Server 2005 or later. Create a database named Library. Create a table, Books, in it with the following data in it:
Figure 1: Books table
Creating the Silverlight application
Create a Silverlight 3 application named Datademo. It will create two projects in the same solution, Datademo and Datademo.Web.
Open MainPage.xaml and change its Canvas properties as shown:
Add controls to the UI
Drag and drop TextBlock and TextBox controls between the Canvas tags. Configure their properties as shown below:
Drag and drop a Button and a DataGrid control after the above added controls. Edit their properties so that Page.xaml now looks like below:
Add a Data connection and a LINQ to SQL class
Click on the View menu, select Database Explorer in the Visual Web Developer IDE and add a new data connection. Specify Library as the selected database.
Next, we will add a LINQ To SQL class. According to MSDN library, LINQ is “a set of extensions to the .NET Framework that encompass language-integrated query, set, and transform operations. It extends C# and Visual Basic with native language syntax for queries and provides class libraries to take advantage of these capabilities.” Wikipedia has a simpler definition: LINQ is “a Microsoft .NET Framework component that adds native data querying capabilities to .NET languages.”
One of the important implementations of LINQ, LINQ to SQL, gives you a runtime infrastructure for managing relational data as objects without losing the ability to perform query operations.
Let’s see how to use this. Select the second project in the Solution Explorer which is named Datademo.Web. Right click on the name and select Add New Item. In the Data tab, select LINQ To SQL Classes as shown in Figure 3.
Figure 2: Adding a LINQ to SQL Class
Rename the file to Book.dbml. In the LINQ designer window, drag the Books table from Library in Database Explorer pane to the designer area. Right click in the designer area and open the Properties window. Select the data context class and rename it to BookDataContext.
Add a WCF Service
WCF stands for Windows Communication Foundation and is a part of the .NET Framework architecture. It enables you to develop service oriented applications in a fast and efficient manner.
Right click again on Datademo.Web project name and open the New Item dialog box. Add a WCF Service.
Figure 3: Adding a WCF Service
This will create an interface as well as an implementation class. Rename the service interface and service class as IBookService and BookService respectively.
Change their code as shown below:
Listing 1: BookService.svc.cs
Listing 2: IBookService.cs
Save and build the Datademo.Web application.
Next, we will make use of the WCF service and access data in the Silverlight application, Datademo.
We begin with adding a service reference to BookService. To do this, right click on the project, Datademo and select Add Service Reference. Click Discover and then select BookService.svc after it is shown in the Add Service Reference dialog box. Rename the service reference to BookServiceReference. To generate a client class that can consume the service, use the SvcUtil tool as shown in Figure 5. This tool is typically found in the C:\Program Files\Microsoft SDKs\Windows version xx folder where xx may change based on your machine configuration. To use it in your current application directory, give the following:
path=%path%;C:\Program Files\Microsoft SDKs\Windows\v6.0A\Bin;
Then type the command similar to the one in Figure 4 in your application directory, that is, SvcUtil *.wsdl *.xsd /language:C#
Figure 4: Generating Client class for the WCF Service
This will generate client code from the local metadata service document.
You will see BookService.cs now in the BookServiceReference directory as a result of the above command.
Now, the final step. This involves invoking the service methods and retrieving data and associating the retrieved data with the DataGrid in the UI.
Edit MainPage.xaml.cs as follows:
Listing 3: MainPage.xaml.cs
The last two methods are the most important. One is an event handler for Button Click and one is the custom event handler method to assign the retrieved data to the data grid.
When you save, build and execute and specify any title (for example, Wars), you will get results similar to Figure 5.
Figure 5: Viewing the Output
Further, as per your requirements, you can tweak the code to make many changes and perform different kinds of data operations.
Also, if you wish, you can make use of Expression Blend 2 or 3 to add visual effects and animations to the data-enabled application.
Thus, in this article, you explored how to create a data connection, a LINQtoSQL class, a WCF service, a client class for the service, and finally consume the service in Silverlight 3 to access data.
Medusa loves experimenting with technology trends, especially that of Microsoft.
This author has published 14 articles on DotNetSlackers. View other articles or the complete profile here.
Please login to rate or to leave a comment.