by September 3, 2009 0 comments

Last month, we looked at how you can create a business application using
Silverlight 3 and a WCF service to talk to and from a database hosted on the
server. This method is quite okay when creating a simple business application
that needs to talk to the database to retrieve or modify the data in it.
However, real world business applications would require to scale up much higher
and this is where an n-tier scalable architecture comes in handy. The n-tier
architecture allows you to put different parts of the system on different pieces
of hardware to be able to quickly scale up to meet business requirements. You
can quite easily create a Silverlight 3 business application using the .NET RIA
Services SDK from Microsoft.

Direct Hit!

Applies To: Developers
USP: Create real world business apps
using .NET RIA Services
Primary Link:
Keywords: Silverlight 3, .NET RIA

To create an n-tier Silverlight 3 application, you need to have the .NET RIA
Services SDK downloaded and installed alongside the Silverlight 3 SDK. Once this
is done, open VS2008 or VWD2008 and create a new Silverlight project. When the
dialog box to create a Web project comes up, you will see a new option saying
‘Enable .NET RIA Services’. Turn this on to get the
new features for scaling up your application.

Starting with .NET RIA Services
When the project comes in, it will look exactly like a normal Silverlight 3
project. Let’s now create a service layer that will allow the Silverlight
application in the browser to communicate with the server. First you create a
new LINQ to SQL class that connects to the tables in the database you wish to
work with. Here, I’m using the standard Northwind database and the Products,
Suppliers & Categories table. Compile the Web project once to build the
DataContext for the LINQ and then add a new item of the type Domain Service
Class. When you create the class, you will be presented with a configuration
dialog. Make sure you enable client access for all the entities. Also check the
add, edit and delete features turn on for each entity. Finally, also turn on the
metadata generation option (we’ll use this a little later). This adds a new
class (and a metadata class) that exposes the entities.

Open up the domain service class that you just created. You will see that the
class has four methods for each entity that you have selected in the previous
step — Get, Insert, Update and Delete. The last 3 are available only if you
choose to enable data editing in the dialog box. Here, we’ll go ahead and use
these methods itself. However, in most real world cases, you would want to
modify or add new methods for different scenarios. We will do a minor
modification to the GetProducts to see the effect. Simply change the line to

return this.Context.Products.OrderBy(e => e.ProductName);

Turn on the option ( as shown
above) to enable RIA Services when creating a Silverlight project.
When creating a DomainService
class you must enable the entities, their editing and metadata generation.

This will ensure that the list of products is always returned sorted by the
name. Now go to the Silverlight project and open the MainPage.xaml file. Drop in
a DataGrid control on the page and configure it like this: <data:DataGrid x:Name="dgData"></data:DataGrid>.
Open the code-behind file and add the following, using statements as well as the
code that comes next:

Using statements:

using SLRIA.Web;using System.Windows.Ria.Linq;

Main Code:
NWDomainContext nw = new NWDomainContext();
public MainPage(){ InitializeComponent(); dgData.ItemsSource = nw.Products;

Run the page to see the data in the Products table being displayed in the
Silverlight DataGrid control. Note that you can sort (on multiple columns using
the Shift key), re-order and resize columns without requiring any changes.

Displaying data from related tables
Now, let’s make some changes to the code to not only display the products,
but also the name of the supplier (from the Suppliers table) and category (from
the Categories table). For this, first open the metadata file in the Web project
and add a new directive ‘[Include]’ above the members that point to the
respective objects like this:

[Include]public Category Category;…[Include]public
Supplier Supplier;

Now open the main domain service class and change the GetProducts method as

public IQueryable<Product> GetProducts(){
DataLoadOptions loadOpts = new DataLoadOptions(); loadOpts.LoadWith<Product>(p
=> p.Category); loadOpts.LoadWith<Product>(p => p.Supplier);
this.Context.LoadOptions = loadOpts; return this.Context.Products;}

The LoadWith statements return the category and supplier data, along with the
product data to the client and can be accessed in the Silverlight XAML using
standard .NET dot-notations to show the name of the product, category and
supplier company in the DataGrid like this:

<data:DataGrid x:Name="dgData" AutoGenerateColumns="False">
<data:DataGrid.Columns> <data:DataGridTextColumn Header="Product Name"
Binding="{Binding ProductName}" /> <data:DataGridTextColumn Header="Supplier"
Binding="{Binding Supplier.CompanyName}" /> <data:DataGridTextColumn
Header="Category" Binding="{Binding Category.CategoryName}" /> … </data:DataGrid.Columns></data:DataGrid>

The grid is now enhanced with an
auto-type filter and a pager.
A simple Silverlight-based
application that shows data from 3 related tables.

Using the DomainDataSource Control
The great part about RIA services is that you don’t need to write much
backend code to get a number of cool features — all that you need to do is
adding some controls to the XAML and configuring them. The main such control is
the DomainDataSource control that you add to the page. First, remove all the
code that was added to the MainPage.xaml.cs file above. Next, in the toolbox of
VS/VWD add a new item and select the DomainDataSource control, and then once, it
appears in the toolbox, drag and drop it above the DataGrid control. Also add
the following namespaces to the top of the page:


Change the DomainDataSource control you added earlier to look like this:

<riaControls:DomainDataSource x:Name="prodDataSource"
AutoLoad="True" QueryName="GetProducts"> <riaControls:DomainDataSource.DomainContext>
<ds:NWDomainContext /> </riaControls:DomainDataSource.DomainContext></riaControls:DomainDataSource>

And add the ItemSource attribute to the DataGrid to point to this data

<data:DataGrid x:Name="dgData" AutoGenerateColumns="False"
ItemsSource="{Binding Data, ElementName=prodDataSource}">

Running the page now will display same data as before, but without any
backend code. The DomainDataSource control also allows you to add filters,
sorting and paging capabilities into it. For this, first add a new TextBox
control named ‘txtNameFilter’ before the grid and then add the following inside

<riaControls:DomainDataSource.FilterDescriptors> <riaData:FilterDescriptorCollection
LogicalOperator="And"> <riaData:FilterDescriptor PropertyPath="ProductName"
Operator="Contains"> <riaData:ControlParameter ControlName="txtNameFilter"
PropertyName="Text" RefreshEventName="TextChanged" /> </riaData:FilterDescriptor>

You can also add a DataPager control below the grid to add paging
capabilities like this:

<data:DataPager PageSize="10" Source="{Binding Data,
ElementName=prodDataSource}" />

Running the application now will allow you to see the data from different
tables in the grid. The records shown are only 10 per page and you can use the
pager at the bottom of the grid to navigate the records.

Finally, you can even filter the records by typing in a few characters of the
name in the text box and as you type, the rows will be automatically filtered.
As you can see, the RIA Services allows you to perform a large number of
business / data related work very easily. Next month, we’ll take a look at how
you can add, modify and delete data from this table as easily as this.

No Comments so far

Jump into a conversation

No Comments Yet!

You can be the one to start a conversation.