Connecting database to your Silverlight 4 Business application

The second article in series of the Silverlight Business application will cover Entity Framework and WFC RIA service, the two components by which you can achieve manipulation of database from your Silverlight Application.  A lot of blogs, articles and books you can find to learn about Silverlight Entity Framework and WFC RIA services. The blogs and book I would like to stress at the moment are http://jesseliberty.com/ the Silverlight and Windows Phone 7 Blog, and The book about Silverlight “Silverlight 4 UNLEASHED” by Laurent Bugnion . He is writing blog also at http://blog.galasoft.ch .

So, for now I will present how you can create Silverlight project from scratch, so you don’t need to use Visual Studio Template for Silverlight Business application. The reason is simple, if you don’t want to use ASP.Net generated database for users and logins, and want to use your own way of login the following tutorial is for you.

The requirements for the demo are the same as in previous post

1. First of all, Run Visual Studio 2010 any version (Ultimate, Professional or Express ), and chose File->New Project. The following picture shows New Project dialog and Silverlight Template projects.

2. Chose Silverlight from the left list box of project types, and select Silverlight  Application from the Silverlight project templates. Name the project as SLDemoPart2, and the Solution name let it be LSDemoPart2Solution.

After you click on OK button, another dialog appears, and you need to set some addition options about our Silverlight application. Check all option as picture show below, and click OK  button again.

Now, we have Silverlight empty project created within Visual Studio 2010. Every Silverlight application have to be hosted in Web page, so we need to create ASP.NET Application and host out Silverlight application in it.When the Visual Studio finished its jobs we can see the two projects: The Silverlight project we created, and ASP.NET Web application project  Visual Studio created for hosting our application.

Now that we have starting projects, we can start mapped our NorthWind database. If you need NorthWind database, please see previous post, where you can find the way you need to download NorthWind database.

Lets create Entity Framework Model and map the two common tables from the NorthWInd database: Orders and OrdersDetails.

3. Right Click on SLDemoPArt2.Web asp.net project, select Add –>New Item and chose ADO.NET Entity Data Model, name it the NorthWindModel.admx and click OK.

4. Follow the EF Wizard and define connection to your SQL Server database, and import mentioned tables. At the end finish the wizard window. When the VS 2010 finish rebuild the solution.The picture below shows the result:

We define our database model, but in this stage we cannot use it in Silverlight application, cause it is server component not client. To resolve this, we need such a service which can expose our database model to the client and make call to the database. RIA Services is component that you can achieve this. So lets create Domain data class one of the  component of the RIA Services.

5. Right Click on SLDemoPArt2.Web ASP.NETt project, select Add –>New Item and chose Domain Service Class . Type DDSNorthWindClient.cs in name edit box and click Add button.

Previously, if you rebuild your project now you can see the following dialog with Order and OrderDetails mapped tables. If you don’t see the tables, you have to rebuild the project.

Check the tables as well as check Enable Editing column, cause we want to read and modify the  data from the database as well. Click OK button. Now we are ready to use the NorthWind database from our Silverlight application.

Some of you may wonder, we didn’t touch Silverlight project, but how can we get our tables. The generated classes of the Domain Data Class, Visual Studio is exported to our Silverlight project in to Generated_Code folder, which is not included in to Silverlight project.

To prove that, click on Silverlight project, click on Show All Files toolbar of the the Solution Explorer Window, and we can see it. Try to open folder as well and generated file. You can see domain data class implementation in to Silverlight project.

Now that we convinced in to Domain Data Class implementation, we can use it in our Silverlight project.

6. Open MainPage.xaml in to XAML designer of the Silverlight project.

7. Chose main menu  Data->Show Data Sources, and we can see our tables within Data Sources Windows.

8. Drag  Orders table from Data Source Window in to MainPage XAML designer and what we can see?

We see completely the same technique like in WinForms application. Its Amassing !

Run the project and you can see Orders from your database in to your browser!

Source code for the tutorial can be downloaded from here.

CodeProject