You can see a working example of this finished data centric Silverlight 2.0 web application at my web site.
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".
using System.Collections.Generic;
using System.Text;
and also:
[OperationContract]
public List<demotable> GetRows()
{
DataClasses1DataContext db = new DataClasses1DataContext();
var selected_rows = from rows in db.DemoTables select rows;
return selected_rows.ToList();
}
[OperationContract]
public void InsertData(string testItem1,
string testItem2)
{
DataClasses1DataContext db = new DataClasses1DataContext();
DemoTable row = new DemoTable
{
Key = Guid.NewGuid(),
TestItem1 = testItem1,
TestItem2 = testItem2
};
db.DemoTables.InsertOnSubmit(row);
db.SubmitChanges();
}
- 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
:
xmlns:my="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
- Now you can go to the asset library and find DataGrid under Custom Controls.
- Add a
DataGrid
to the project and size it. Name the grid ResultsGrid
. If you look at the XAML, it should look similar to this:
<my:DataGrid Margin="8,283,51,87" AutoGenerateColumns="True" x:Name="ResultsGrid"/>
- 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.)
private void OnGetBtnClick(object sender, RoutedEventArgs e)
{
DemoServiceClient webService = new DemoServiceClient();
webService.GetRowsCompleted +=
new EventHandler<getrowscompletedeventargs>(webService_GetRowsCompleted);
webService.GetRowsAsync();
}
void webService_GetRowsCompleted(object sender, GetRowsCompletedEventArgs e)
{
ResultsGrid.ItemsSource = e.Result;
}
private void OnSubmitBtnClick(object sender, RoutedEventArgs e)
{
DemoServiceClient webService = new DemoServiceClient();
webService.InsertDataAsync(TestItem1TxtBox.Text, TestItem2TxtBox.Text);
}
- 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.
<my:datagrid margin="8,283,51,85"
autogeneratecolumns="False" x:name="ResultsGrid"
width="641" height="232">
<my:DataGrid.Columns>
<my:DataGridTextColumn
Header="Test Item 1"
DisplayMemberBinding="{Binding TestItem1}"/>
<my:DataGridTextColumn
Header="Test Item 2"
DisplayMemberBinding="{Binding TestItem2}"/>
</my:DataGrid.Columns>
</my:datagrid>
- 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".
[OperationContract]
public void DeleteRow(Guid key)
{
DataClasses1DataContext db = new DataClasses1DataContext();
var selected_row = from rows in db.DemoTables where rows.Key==key select rows;
db.DemoTables.DeleteAllOnSubmit(selected_row);
db.SubmitChanges();
}
- Add a Delete button. When the Delete button is clicked, it will delete whatever item in our
DataGrid
that was selected.
private void OnDeleteClick(object sender, RoutedEventArgs e)
{
DemoTable selectedRow = ResultsGrid.SelectedItem as DemoTable;
DemoServiceClient webService = new DemoServiceClient();
webService.DeleteRowAsync(selectedRow.Key);
webService.GetRowsCompleted +=
new EventHandler<getrowscompletedeventargs>(webService_GetRowsCompleted);
webService.GetRowsAsync();
}
- Rebuild and Debug. Now you can select items and delete them.
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:
public class MyServiceHostFactory : ServiceHostFactory
{
protected override ServiceHost CreateServiceHost(Type serviceType,
Uri[] baseAddresses)
{
Uri webServiceAddress =
new Uri("http://uiprototype.web702.discountasp.net/DemoService.svc");
ServiceHost webServiceHost = new ServiceHost(serviceType, webServiceAddress);
return webServiceHost;
}
}
- Go to DemoService.svc, right click to view markup, and you'll see this:
<%@ ServiceHost Language="C#" Debug="true"
Service="WcfSqlDemoWeb.DemoService" CodeBehind="DemoService.svc.cs" %>
Add the following attribute:
Factory="WcfSqlDemoWeb.MyServiceHostFactory"
- 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.
Here's the crossdomain.xml file you'll need to add to your web project:
="1.0" ="utf-8"
<access-policy>
<cross-domain-access>
<policy>
<allow-from http-request-headers="*">
<domain uri="*"/>
</allow-from>
<grant-to>
<resource path="/" include-subpaths="true"/>
</grant-to>
</policy>
</cross-domain-access>
</access-policy>
Here's the clientaccesspolicy.xml file you'll need to add to your web project:
="1.0" ="utf-8"
<access-policy>
<cross-domain-access>
<policy>
<allow-from http-request-headers="*" >
<domain uri="*"/>
</allow-from>
<grant-to>
<resource path="/" include-subpaths="true"/>
</grant-to>
</policy>
</cross-domain-access>
</access-policy>
- 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:
<appSettings>
-->
<add key="ServiceUri_WcfSqlDemo" value="http://localhost:49797/DemoService.svc"/>
</appSettings>
- Now go back to DemoService.svc.cs. Add the following
using
statement:
using System.Configuration;
Change the URI as follows in your CreateServiceHost
method to look up the address in the Web.config file:
Uri webServiceAddress =
new Uri(ConfigurationManager.AppSettings["ServiceUri_WcfSqlDemo"]);
- Right click on ServiceReference1 and click on Configure Service Reference. Set the address to http://localhost:49797/DemoService.svc.
- Now Rebuild All and Debug. Things should be working as before, except now the Web Service is back to being hosted locally. If you don't believe it, go and delete everything from the server.
- Now you can go back and forth by changing the address in ServiceReference1 and Web.config.
- That's all!