What is RIA Services
With the invention of Silverlight 3 Microsoft introduces the RIA Services which have given a new dimension to the traditional n-tier application pattern. With this pattern you can write application logic that runs on the mid-tier and controls access to data for queries, changes and custom operations. You can also provide end to end support for common tasks such as data validation, authentication and roles by integrating with Silverlight components on the client and ASP.NET on the mid-tier. There’s a great walkthrough video on RIA Services by Tim Heuer. This article is based on Tim’s walkthrough with just a little bit of improvisation. Let’s delve into a practical demonstration of RIA Services.
Starting the Project
I assume you have already installed the RIA Services July Preview. Open Visual Studio and create a new project.
Figure 1: Creating New Project in Visual Studio
This will bring up the new project template dialog box and if you already installed RIA services, you’ll be able to see the template SilverlightBusineesApplication.
Figure 2: Project Templates in Visual Studio
Select SilverlightBusinessApplication and name the application anything you like. In this case I’m going with the default name BusinessApplication1. Selecting this template will bring up the navigation UI template. You’ll be able to see this in design view.
Figure 3: Application UI in Design View of Blend
By default we’ve added two applications: a Silverlight application and an ASP.NET web application using .NET RIA Services, though we don’t have any RIA Services yet. Let’s create one. We’ll have create, read, update, delete support with authentication in this application. Add a new ADO.NET Entity Data Model to the web application by right clicking over the Web application project template and select Add > New Item. This will bring up the following dialog box:
Figure 4: Adding ADO.NET Entity Data Model
We are going to use the Northwind database for data. Name the model NwdModel. Clicking over the Add button will bring up the Entity Data Model Wizard.
Figure 5: Entity Data Model Wizard
Select Generate from database and then click the Next Button. You’ll see the following screenshot.
Now set up your connection and name the Entities. For this application I have named it NorthwindEntities. Click over the Next button. It will retrieve all the database information and after this you’ll see a screenshot similar to the one below.
Now choose a table. For this sample I’ve choosen the
Click Finish. Now we have our Model. Build the application by pressing F6 so that we have an EntityModel we can build from. Now add a service to work with the data. If you look at the template of the web application you’ll see there’s a folder named services. Inside this folder there’s some authentication services automatically added. Add another one by right clicking over the Services folder and choosing Add>New Item. In the Add New Item dialog box choose Domain Service Class. This is a template that gets installed with RIA Services.
Figure 9: Adding Domain Services Class
Name it NwdDomainService and click Add. A new window will pop up in front of you.
Check the Employees CheckBox, the Enable Editing CheckBox and the “Generate associated classes for metadata” CheckBox. That means we’ll work with Employees entity and we want to edit it. We also want to generate the associated classes for metadata. Click on the OK button. Now you should see server queries like
DeleteEmployees() etc. Like the following:
You can add any logic inside the above methods. You can also put a different type of queries like this:
Then we can have employees by HireDate. We can define all the queries here and the context within them.
Now we have our Domain Service Class. Remember that this is the code that will be projected on to our Silverlight application. When we build our project it will compile our code on server side and also generate some code on client side. Now we have a model, and a service that references our model.
In the Silverlight application project right click the Views folder and select Add New Item. Select Silverlight Page and name the page EmployeeListing. This will open a Silverlight navigation page. Change the title of the page to Employees. Here’s the XAML:
This is a navigation page and it’s going to be fit with our navigation framework. We need to add a link of this page to our MainPage. Open MainPage.xaml. You’ll be able to see the following XAML:
There are two HyperlinkButtons inside the StackPanel named LinksStackPanel. One button is for the link to Home and the other for the link to the About page. There’s also a Rectangle which acts as a divider. We need to place a link to EmployeeListing between these two pages. So add the following XAML inside LinksStackPanel:
Right click over the EmployeeListing.Xaml page and select open in ExpressionBlend. If you already installed Expression Blend 3 with Sketch Flow support, you’ll be able to open this page in Expression Blend. In Blend select
LayoutRoot and change the
Background of the LinearGradientBrush. Choose any color you like. In this case the value for the
GradientStops of the LinearGradientBrush is something like the following:
Add a row to the
LayoutRoot and add a TextBlock. Here’s the XAML:
Now if you run the application and navigate to the EmployeeList page you should see something like the following screenshot:
Now switch to Visual Studio and add a reference to System.Windows.Controls.Data by right clicking over the References in you Silverlight application project.
Go to the XAML view of EmployeeListing page and add this namespace:
Now add a DataGrid in the second row of
LayoutRoot of EmployeeListing page. This will provide us with access to the DataGrid to add it in our page.
To populate our DataGrid we will use those services. Services are on our server side project and they have been projected on our Silverlight application. We need to add a reference to the domain service we created. Add a
Loaded event for the EmployeeList and swith to the code behind by right clicking over the event name:
This will add a
Loaded event in the code behind. Add this namespace in the EmployeeListing.Xaml.cs file:
Domain services get projected as something called DomainContext. Create a new instance of NwdDomainContext by placing the following code inside the
Loaded event of EmployeeListing:
Now to populate the DataGrid assign the empDataGrid’s
ItemsSource property to the employees entities from our model or from our Domain Service Class.
Then we can load those employees by query with code similar to the following:
This is the query or function we created in the NwdDomainService class. Run the application to see the populated Grid. You should see something like the following:
We didn’t add any service refernce or we didn’t have to do any asynchronous completed event or something like that. These three lines of code are just doing the trick for us.
First we created a new instance of NwdDomainContext. Then we bound it to the Employees entity and loaded the emDataGrid using the query
That’s it for now. In the next part we’ll see how to do this declaratively using XAML. I hope you’ve enjoyed this part of RIA Services with Silverlight 3.
Currently working as a freelance Silverlight/WPF UX Integrator. His passions revolve around creating the next generation desktop application and Rich Internet applications. His goals are to create applications which will serve the user in a friendly and traditional way, but will keep pace with nex...
This author has published 11 articles on DotNetSlackers. View other articles or the complete profile here.
Please login to rate or to leave a comment.