Setting up a new Silverlight 4 Project with WCF RIA Services

Posted by Kevin Grossnicklaus on Geeks with Blogs See other posts from Geeks with Blogs or by Kevin Grossnicklaus
Published on Sun, 30 Jan 2011 16:10:11 GMT Indexed on 2011/01/30 23:26 UTC
Read the original article Hit count: 896

Filed under:

Many of my clients are actively using Silverlight 4 and RIA Services to build powerful line of business applications. Getting things set up correctly is critical to being to being able to take full advantage of the RIA services plumbing and when developers struggle with the setup they tend to shy away from the solution as a whole. I’m a big proponent of RIA services and wanted to take the opportunity to share some of my experiences in setting up these types of projects. In late 2010 I presented a RIA Services Master Class here in St. Louis, MO through my firm (ArchitectNow) and the information shared in this post was promised during that presentation.

One other thing I want to mention before diving in is the existence of a number of other great posts on this subject. I’ve learned a lot from many of them and wanted to call out a few of them. The purpose of my post is to point out some of the gotchas that people get caught up on in the process but I would still encourage you to do as much additional research as you can to find the perfect setup for your needs.

Here are a few additional blog posts and articles you should check out on the subject:

http://msdn.microsoft.com/en-us/library/ee707351(VS.91).aspx
http://adam-thompson.com/post/2010/07/03/Getting-Started-with-WCF-RIA-Services-for-Silverlight-4.aspx
I don’t intend for this post to turn into a full WCF RIA Services tutorial but I did want to point out what technologies we will be using:

Visual Studio.NET 2010
Silverlight 4.0
WCF RIA Services for Visual Studio 2010
Entity Framework 4.0

I also wanted to point out that the screenshots came from my personal development box which has a number of additional plug-ins and frameworks loaded so a few of the screenshots might not match 100% with what you see on your own machines.

http://www.microsoft.com/express

http://www.microsoft.com/web/download

Also, the examples given in this post are done in C#…sorry to you VB folks but the concepts are 100% identical.

Setting up anew RIA Services Project

This section will provide a step-by-step walkthrough of setting up a new RIA services project using a shared DLL for server side code and a simple Entity Framework model for data access. All projects are created with the consistent ArchitectNow.RIAServices filename prefix and default namespace. This would be modified to match your companies standards.

First, open Visual Studio and open the new project window via File->New->Project. In the New Project window, select the Silverlight folder in the Installed Templates section on the left and select “Silverlight Application” as your project type. Verify your solution name and location are set appropriately. Note that the project name we specified in the example below ends with .Client. This indicates the name which will be given to our Silverlight project. I consider Silverlight a client-side technology and thus use this name to reflect that. Click Ok to continue.

During the creation on a new Silverlight 4 project you will be prompted with the following dialog to create a new web ASP.NET web project to host your Silverlight content. As we are demonstrating the setup of a WCF RIA Services infrastructure, make sure the “Enable WCF RIA Services” option is checked and click OK. Obviously, there are some other options here which have an effect on your solution and you are welcome to look around. For our example we are going to leave the ASP.NET Web Application Project selected. If you are interested in having your Silverlight project hosted in an MVC 2 application or a Web Site project these options are available as well. Also, whichever web project type you select, the name can be modified here as well. Note that it defaults to the same name as your Silverlight project with the addition of a .Web suffix.

At this point, your full Silverlight 4 project and host ASP.NET Web Application should be created and will now display in your Visual Studio solution explorer as part of a single Visual Studio solution as follows:

Now we want to add our WCF RIA Services projects to this same solution. To do so, right-click on the Solution node in the solution explorer and select Add->New Project. In the New Project dialog again select the Silverlight folder under the Visual C# node on the left and, in the main area of the screen, select the WCF RIA Services Class Library project template as shown below. Make sure your project name is set appropriately as well. For the sample below, we will name the project “ArchitectNow.RIAServices.Server.Entities”. The .Server.Entities suffix we use is meant to simply indicate that this particular project will contain our WCF RIA Services entity classes (as you will see below). Click OK to continue.

Once you have created the WCF RIA Services Class Library specified above, Visual Studio will automatically add TWO projects to your solution. The first will be an project called .Server.Entities (using our naming conventions) and the other will have the same name with a .Web extension. The full solution (with all 4 projects) is shown in the image below. The .Entities project will essentially remain empty and is actually a Silverlight 4 class library that will contain generated RIA Services domain objects. It will be referenced by our front-end Silverlight project and thus allow for simplified sharing of code between the client and the server. The .Entities.Web project is a .NET 4.0 class library into which we will put our data access code (via Entity Framework). This is our server side code and business logic and the RIA Services plumbing will maintain a link between this project and the front end. Specific entities such as our domain objects and other code we set to be shared will be copied automatically into the .Entities project to be used in both the front end and the back end.

At this point, we want to do a little cleanup of the projects in our solution and we will do so by deleting the “Class1.cs” class from both the .Entities project and the .Entities.Web project. (Has anyone ever intentionally named a class “Class1”?)
Next, we need to configure a few references to make RIA Services work. THIS IS A KEY STEP THAT CAUSES MANY HEADACHES FOR DEVELOPERS NEW TO THIS INFRASTRUCTURE! Using the Add References dialog in Visual Studio, add a project reference from the *.Client project (our Silverlight 4 client) to the *.Entities project (our RIA Services class library). Next, again using the Add References dialog in Visual Studio, add a project reference from the *.Client.Web project (our ASP.NET host project) to the *.Entities.Web project (our back-end data services DLL). To get to the Add References dialog, simply right-click on the project you with to add a reference to in the Visual Studio solution explorer and select “Add Reference” from the resulting context menu. You will want to make sure these references are added as “Project” references to simplify your future debugging. To reiterate the reference direction using the project names we have utilized in this example thus far: .Client references .Entities and .Client.Web reference .Entities.Web. If you have opted for a different naming convention, then the Silverlight project must reference the RIA Services Silverlight class library and the ASP.NET host project must reference the server-side class library.
Next, we are going to add a new Entity Framework data model to our data services project (.Entities.Web). We will do this by right clicking on this project (ArchitectNow.Server.Entities.Web in the above diagram) and selecting Add->New Project. In the New Project dialog we will select ADO.NET Entity Data Model as in the following diagram. For now we will call this simply SampleDataModel.edmx and click OK.

It is worth pointing out that WCF RIA Services is in no way tied to the Entity Framework as a means of accessing data and any data access technology is supported (as long as the server side implementation maps to the RIA Services pattern which is a topic beyond the scope of this post). We are using EF to quickly demonstrate the RIA Services concepts and setup infrastructure, as such, I am not providing a database schema with this post but am instead connecting to a small sample database on my local machine. The following diagram shows a simple EF Data Model with two tables that I reverse engineered from a local data store. If you are putting together your own solution, feel free to reverse engineer a few tables from any local database to which you have access.

At this point, once you have an EF data model generated as an EDMX into your .Entites.Web project YOU MUST BUILD YOUR SOLUTION. I know it seems strange to call that out but it important that the solution be built at this point for the next step to be successful. Obviously, if you have any build errors, these must be addressed at this point.
At this point we will add a RIA Services Domain Service to our .Entities.Web project (our server side code). We will need to right-click on the .Entities.Web project and select Add->New Item. In the Add New Item dialog, select Domain Service Class and verify the name of your new Domain Service is correct (ours is called SampleService.cs in the image below). Next, click "Add”.

After clicking “Add” to include the Domain Service Class in the selected project, you will be presented with the following dialog. In it, you can choose which entities from the selected EDMX to include in your services and if they should be allowed to be edited (i.e. inserted, updated, or deleted) via this service. If the “Available DataContext/ObjectContext classes” dropdown is empty, this indicates you have not yes successfully built your project after adding your EDMX. I would also recommend verifying that the “Generate associated classes for metadata” option is selected. Once you have selected the appropriate options, click “OK”.

Once you have added the domain service class to the .Entities.Web project, the resulting solution should look similar to the following:

Note that in the solution you now have a SampleDataModel.edmx which represents your EF data mapping to your database and a SampleService.cs which will contain a large amount of generated RIA Services code which RIA Services utilizes to access this data from the Silverlight front-end. You will put all your server side data access code and logic into the SampleService.cs class. The SampleService.metadata.cs class is for decorating the generated domain objects with attributes from the System.ComponentModel.DataAnnotations namespace for validation purposes.
FINAL AND KEY CONFIGURATION STEP! One key step that causes significant headache to developers configuring RIA Services for the first time is the fact that, when we added the EDMX to the .Entities.Web project for our EF data access, a connection string was generated and placed within a newly generated App.Context file within that project. While we didn’t point it out at the time you can see it in the image above. This connection string will be required for the EF data model to successfully locate it’s data. Also, when we added the Domain Service class to the .Entities.Web project, a number of RIA Services configuration options were added to the same App.Config file. Unfortunately, when we ultimately begin to utilize the RIA Services infrastructure, our Silverlight UI will be making RIA services calls through the ASP.NET host project (i.e. .Client.Web). This host project has a reference to the .Entities.Web project which actually contains the code so all will pass through correctly EXCEPT the fact that the host project will utilize it’s own Web.Config for any configuration settings. For this reason we must now merge all the sections of the App.Config file in the .Entities.Web project into the Web.Config file in the .Client.Web project. I know this is a bit tedious and I wish there were a simpler solution but it is required for our RIA Services Domain Service to be made available to the front end Silverlight project. Much of this manual merge can be achieved by simply cutting and pasting from App.Config into Web.Config. Unfortunately, the <system.webServer> section will exist in both and the contents of this section will need to be manually merged. Fortunately, this is a step that needs to be taken only once per solution. As you add additional data structures and Domain Services methods to the server no additional changes will be necessary to the Web.Config.

Next Steps

At this point, we have walked through the basic setup of a simple RIA services solution. Unfortunately, there is still a lot to know about RIA services and we have not even begun to take advantage of the plumbing which we just configured (meaning we haven’t even made a single RIA services call). I plan on posting a few more introductory posts over the next few weeks to take us to this step. If you have any questions on the content in this post feel free to reach out to me via this Blog and I’ll gladly point you in (hopefully) the right direction.

Resources

Prior to closing out this post, I wanted to share a number or resources to help you get started with RIA services. While I plan on posting more on the subject, I didn’t invent any of this stuff and wanted to give credit to the following areas for helping me put a lot of these pieces into place. The books and online resources below will go a long way to making you extremely productive with RIA services in the shortest time possible. The only thing required of you is the dedication to take advantage of the resources available.

Books

Developer IT