Using Data in Silverlight 2 Applications - I

Introduction:

In VS 2005 and VS 2008 applications that were Windows Forms based or Web based, data handling is quite simple. At least basic data handling like retrieving or querying data. But in Silverlight, the process is more complex. There are two commonly used approaches for working with data in Silverlight 2. One is by using a WCF Service and a LINQToSQL class and the second is by using ADO.NET Data Services.

We shall see the first approach in this article.

This article assumes that you are using SQL Server 2005. Create a database named MovieDatabase. Create a table, Movies, in it with the following data in it:



Figure 1: Movies table

Create a Silverlight 2 application named DBDemo. It will create 2 projects in the same solution, DBDemo and DBDemo.Web.

Open Page.xaml and change its Canvas properties as shown:

<UserControl xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" x:Class="DBDemo.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="800" Height="300">
    <Canvas x:Name="LayoutRoot" Background="Beige" Width="800" Height="300">
    </Canvas>
</UserControl>

Drag and drop TextBlock and TextBox controls between the Canvas tags. Configure their properties as shown below:

<UserControl xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" x:Class="DBDemo.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="800" Height="300">
    <Canvas x:Name="LayoutRoot" Background="Beige" Width="800" Height="300">
        <TextBlock Name="txtblkLang" Canvas.Left="10" Canvas.Top="10" Width="100"> Enter Language:</TextBlock>
        <TextBox Name="txtLang" Canvas.Left="10" Canvas.Top="30" Width="100"></TextBox>
    </Canvas>
</UserControl>

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:

<UserControl xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" x:Class="DBDemo.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="800" Height="300">
    <Canvas x:Name="LayoutRoot" Background="Beige" Width="800" Height="300">
        <TextBlock Name="txtblkLang" Canvas.Left="10" Canvas.Top="10" Width="100"> Enter Language:</TextBlock>
        <TextBox Name="txtLang" Canvas.Left="10" Canvas.Top="30" Width="100"></TextBox>
        <Button Name="btnOK" Content="OK" Click="Button_Click" Canvas.Top="90" Canvas.Left="10" ></Button>
        <data:DataGrid Name="dgMovieData" Canvas.Left="10" Canvas.Top="130" ItemsSource="" Visibility="Collapsed">
        </data:DataGrid>
    </Canvas>
</UserControl>

Click on the Server Explorer and add a new data connection. Specify MovieDatabase as the selected database.



Figure 2: Adding a new Data connection

Select the second project in the Solution Explorer which is named DBDemo.Web. Right Click and select Add New Item. Select LinqToSQL Classes as shown in Figure 3.



Figure 3: Adding a LINQ to SQL Class

Rename the file to Movie.dbml. In the LINQ designer window, drag the Movies table from the MovieDatabase in Server 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 MovieDataContext.

Next, open the New Item dialog box again and add a WCF Service.



Figure 4: Adding a WCF Service

This will create an interface as well as an implementation class. Rename the service interface and service class as IMovieService and MovieService respectively.

Change their code as shown below:

IMovieService.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;

namespace DBDemo.Web
{
[ServiceContract]
public interface IMovieService
{
[OperationContract]
List<Movie> GetMovies(string movieNamePrefix);

MovieService.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;

namespace DBDemo.Web
{

    public class MovieService : IMovieService
    {
        public List<Movie> GetMovies(string language)
        {
            MovieDataContext db = new MovieDataContext();
            var q = from p in db.Movies
                    where p.Language.Equals(language)
                    select p;
            return q.ToList();
        }
    }
}

In the above code, we have used LINQ to retrieve movie data based on language entered. We have also made use of the Linq to SQL data context class to invoke the LINQ code.
The result will be returned as a generic list.

Open Web.config file and edit the entry for MovieService. Change "wsbinding" to "basicHttpbinding". This is done because Silerlight supports only basic http binding.

Save and build the project.

All this has been done in DBDemo.Web project.

In the next part of this article, we will make use of this WCF service and access data in the Silverlight application, DBDemo.


Conclusion: Thus, in the first part of this article series, you explored how to create a data connection, a LINQtoSQL class and a WCF service.