Introduction

This article is a step-by-step tutorial on how to make a data centric Silverlight 2.0 web application. This tutorial will give you practical hands-on experience on all of the following:

Silverlight 2.0 DataGrid

LINQ

Web Services

If you go through this tutorial, I'll think you'll be amazed at how simple, powerful, and elegant these three technologies are. I've really started to feel that Microsoft is on a roll with some of these new technologies.

I will also give you instructions on how to deploy this application to a remote web server, which, in my experience, is probably the most difficult part. The instructions I give specifically apply to my host provider discountasp.net; however, no matter what your hosting provider, you'll probably need to do something similar.

Part 1: Building the application and testing it locally

For this tutorial, you will need access to a web accessible database. As mentioned in the introduction, I use a web hosting account from discountasp.net, with a SQL Server 2008 add-on, but there are many options of hosting providers to choose from. To establish a connection with your remote database, select View from the menu and then Server Explorer. Click on the Connect to Database option, and then fill in the SQL Server name and database login that you can get from your hosting provider. Click Test Connection to confirm that you're set up.

Create a new Silverlight Application called SilverlightClient. Call the solution WcfSqlDemo.

VS 2008 will ask you if you want to add a Web to the solution. Select "Web Application Project" instead of the default "Web Site". Name the web WcfSqlDemoWeb.

Right click on WcfSqlDemoWeb and select Add New Item. Select Data, LINQ to SQL Classes, and leave the name DataClasses1.dbml.

What you should see next is:

If you set up your server at the beginning of the project, you will already have a database in the Server Explorer view as I do (in my case, it's named sql2k801.SQL2008_540970). If you haven't, click on the cylinder with a plus sign icon under Server Explorer to connect to the database.

Right click "Table" on your connected database and select Add New Table. Fill in the table as shown below. Under Properties, name the table DemoTable.

Drag the DataTable onto DataClasses1.dbml.

Set Key as the Primary Key.

View properties for DataClasses1.dml. Set the serialization mode to Unidirectional so that it is compatible with Web Services.

Okay, that takes care of your database. Now let's set up the Web Service. Right click on the WcfSqlDemoWeb project and add a new item. Select the Silverlight-enabled WCF Service template and name it DemoService.svc.

Delete the DoWork method and replace with the two methods below, plus the following using references. By the way, the "var selected_rows = from rows in db.DemoTables select rows" stuff, that's LINQ. It's fantastic. It's a very clean and sensible query language that is built into .NET 3.5 that can be used for querying databases, XML, and even collections. One of the easier ways to figure out what LINQ is, is to look at some examples. I recommend Microsoft's 101 LINQ Samples. The LINQ line that I use in the GetRows method loosely means "Take the table db.DemoTable and assign the elements of that table to the collection rows, then select all those rows and assign them to the collection selected rows".

Now we need to let our Silverlight client know about the Web Service we've just created. Right click SilverlightClient and select Add Service Reference. Click Discover. VS2008 should find the service from the project. Allow it to be saved in the namespace ServiceReference1.

Open page.xaml in Expression Blend. Make a form that looks something like what I've created below. Name the text boxes TestItem1TxtBox and TestItem2TxtBox.

Now let's add the DataGrid into which the data we retrieve from the Web Service will be placed. The DataGrid control is not a default control of your Silverlight project, so you'll have to add it. Right click on References in SilverlightClient and add a reference to System.Windows.Control.Data. Now go to page.xaml. Add the following attribute to the user control element so we can get access to the DataGrid:

Add a button and label it "Get". The end result should be something like this:

Add OnGetBtnClicked and OnSubmitBtnClicked to the clicked events of the respective buttons in Expression Blend. This will add the attributes to the XAML button tags and will wake up VS2008 and add the specified methods to the code-behind file.

Fill in OnSubmitBtnClick and OnGetBtnClick as shown below. Create a call back to handle the GetRowsCompleted event. (By the way, are you noticing how easy this is? Look at how much is getting done with a few lines of code, and look how clean and sensible these few lines are.)

Build and test. Try submitting a few items and then getting the results. You should see something like the following:

Easy, right? Notice how we didn't have to do anything to get the DataGrid to display our results other than assign our results to the DataGrid's ItemsSource. The only down side to this simplicity is that we're seeing everything returned, including the GUID representing the key. That's not very user friendly. Let's get rid of the auto-generation of columns and create custom ones. Also, it seems I needed to add an explicit size to the DataGrid, or I'd get a funny rendering of the grid when it's empty.

Build and Debug. The results should look exactly like before, except this time, there is no column for Key.

By now, you're probably collecting some garbage in your database, because we have no way to delete any items. Let's change that now. First, let's modify our Web Service to be able to delete items from our database. Add the following to DemoService. Note that we're using more LINQ. The line below written in LINQ loosely means "Take the table db.DemoTable and assign the elements of that table to the collection rows, then select those rows where the key is the passed GUID and assign those selected rows to the collection selectedrow".

// Delete the item specified by the passed key
[OperationContract]
publicvoid DeleteRow(Guid key)
{
DataClasses1DataContext db = new DataClasses1DataContext();
var selected_row = from rows in db.DemoTables where rows.Key==key select rows;
// Delete the selected "rows". There will actual be only one
// item in this collection because the Guid is unique and is the
// primary key for the table.
db.DemoTables.DeleteAllOnSubmit(selected_row);
// Submit the change to the database.
db.SubmitChanges();
}

Add a Delete button. When the Delete button is clicked, it will delete whatever item in our DataGrid that was selected.

Part 2: Deploying the web app to a remote server

Publishing the application to the web can be a little difficult. The instructions below have been tried out on my web hosting provider discountasp.net, but you're likely to need to do something similar for other host providers.

To see the difficulty, publish the website. Now, DemoService is located at your server, right? All you might think you would need to do is reconfigure your Silverlight client to reference the service at your website. Go ahead and try it. Right click on ServiceReference1 and select Configure Service Reference. Add the address of the service. In my case, it is http://uiprototype.web702.discountasp.net/DemoService.svc. You'll get the error below and you won't be able to proceed.

Here's the workaround. We're going to override the way the server creates the Service Host. Add the following class to DemoService.svc.cs:

Now Rebuild All and Publish. Go back to ServiceReference1, right click on ServiceReference1, and select Configure Service Reference. Add the address of the service. In my case, it is http://uiprototype.web702.discountasp.net/DemoService.svc. Now it should accept it.

Part 3: Configuring your application and your remote server so that you can debug in a variety of local and remote configurations

The only problem with the workaround described in Part 2 is that you can't debug your application locally anymore. If you now try to debug your Silverlight page and you click on either of your buttons (thereby attempting to access the Web Service), you'll get an exception saying the Web Service wasn't found. This is due to cross-domain security restrictions. When you debug, your client is hosted on localhost and the Web Service is hosted on your remote server (in my case, discountasp.net). When the localhost hosted Silverlight client reaches out and tries to talk to the DiscountAsp.net hosted Web Service, that's a cross-domain communication and you need to explicitly grant permission for that type of access to your Web Service. To grant this cross-domain access, you'll need to put a crossdomain.xml and clientaccesspolicy.xml on your remote server.

What if you want to go back to debugging both the client and the Web Service from localhost, like we were doing at the beginning of this tutorial? There may be a better way, but here's what I did. Go to your Web.config file and find your appSettings tag. Replace it with the following: