Silverlight 2.0 Application Development with LINQ to SQL and a WCF Service

This article assumes that you have a minimum knowledge of technologies like “LINQ to SQL,” “WCF,” “Silverlight,” etc. If you don’t, and you need step-by-step walkthroughs for the above technologies, please go through the following links.

If you are new to Silverlight 2.0 development, please refer to the following articles that I have written before going ahead (available at http://www.aspfree.com/cp/bio/Jagadish-Chatarji/):

• Beginning Silverlight 2.0 Development Using Visual Studio 2008

• Developing a Silverlight 2.0 Application that Consumes a WCF Service using Visual Studio 2008 (HIGHLY RECOMMENDED)

If you are new to LINQ to SQL, please refer to the following articles that I have written:

http://www.aspfree.com/c/a/.NET/Beginning-LINQ-to-SQL-Using-Visual-Studio-2008/

http://www.aspfree.com/c/a/.NET/Introducing-LINQ-to-SQL-Designer-using-Visual-Studio-2008/

If you want to learn more about WCF Service and WCF Service Library, consider reading the following WCF articles that I have written:

http://www.aspfree.com/c/a/ASP.NET/Developing-a-WCF-Service-Library-and-Hosting-it-as-WCF-Web-Service-Using-VS2K8/

http://www.aspfree.com/c/a/BrainDump/Developing-an-Object-Oriented-Business-Component-Using-WCF-and-Visual-Studio-2008/ 

For this article, I upgraded my development machine from “Silverlight 2.0 tools beta 2” to “Silverlight 2.0 tools RC 1.” My machine is now equipped with the following environment:

• Windows Server 2003 with SP2

• IIS

• SQL Server 2008

• Visual Studio 2008 (comes with .NET 3.5) with SP1

• Microsoft Silverlight 2.0 Tools (RC 1) for Visual Studio 2008 (includes Silverlight, Silverlight SDK and Tools for VS 2008).

To make this article simple, I created a table structure as seen at http://cid-41050f68f010a662.skydrive.live.com/self.aspx/Public/images/DeptEmp.gif

The entire source code for this article is available in the form of a free downloadable zip file. The solution was developed using Microsoft Visual Studio 2008 Team Edition (with SP1) with Microsoft SQL Server 2008 Developer Edition on Microsoft Windows Server 2003 Standard Edition (with SP3) with Silverlight 2.0 RC 1. I didn’t really test it in any other environment. I request that you post in the discussion area if you have any problems in execution.

Creating a Visual Studio 2008 solution to work with “LINQ to SQL”, WCF and Silverlight 2.0

As I mentioned earlier, if you are quite new to these technologies and need complete walkthroughs, consider reading my earlier articles (listed in the previous section).

The following are the steps you need to take to create the environment:

• Create a blank solution (DemoSln).

• Add “WCF Service Application” Project (DemoEmpService) to the solution.

• Add “LINQ to SQL classes” item (DemoEmp.dbml) to the WCF project.

• Add the new table “emp” to your database as given at http://cid-41050f68f010a662.skydrive.live.com/self.aspx/Public/images/DeptEmp.gif

• Using “Server Explorer,” drag and drop the “Emp” table onto the “LINQ to SQL” designer (of DemoEmp.dbml)

• Go to properties of the current data context, and change “Serialization Mode” to “Unidirectional” (Fig 01). This automatically adds each “LINQ to SQL” entity (named “Emp”) with the necessary attributes (like Table, DataContract, Column, DataMember etc.) to be serialized (with respect to WCF standards).

• Make sure the connection string is added to “web.config” file automatically.

The steps are continued in the next section.

WCF development

This is a continuation from the previous section.

• Open “DemoEmpService” project and rename “Service1.svc” and “IService1.vb” to “EmpService.svc” and “IEmpService.vb” respectively (together with all of their associations). The steps are clearly explained in my previous article.

• Configure the virtual path (using Project properties) to point to the local IIS and add ClientAccessPolicy.xml to IIS root (ex: c:inetpubwwwroot). The file is included in the attached source code and the steps are well explained in my previous article.

Open “IEmpService.vb” and modify the code so that it looks like the following:

<ServiceContract()> _

Public Interface IEmpService

<OperationContract()> _

Function GetEmployeeList() As List(Of Emp)

End Interface

Open “EmpService.svc” and modify the code as follows:

Imports System.Data.Linq

Public Class EmpService

Implements IEmpService

Public Sub New()

End Sub

Public Function GetEmployeeList() As System.Collections.Generic.List(Of Emp) Implements IEmpService.GetEmployeeList

Using ctxt As New DemoEmpDataContext

ctxt.ObjectTrackingEnabled = False

Return ctxt.Emps.ToList

End Using

End Function

End Class

Build your solution and test “EmpService.svc” using “WCF Test client” (explained in my previous article). You can also test the service using a WinForm application with the following code (the Win Form project is included in the attached source code):

Public Class Form1

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

Dim obj As New EmpService.EmpServiceClient

Me.DataGridView1.DataSource = obj.GetEmployeeList

End Sub

End Class

Silverlight development

Now we need to develop a Silverlight 2 application which consumes the previously mentioned WCF Service. You need to take the following steps.

• Add a new “Silverlight Application” project to the existing solution and name it “DemoSL.” You should get two projects, “DemoSL” and “DemoSL.Web” (as explained in my previous article).

• Configure the virtual path of “DemoSL.Web” to point to your local IIS (just as you did in the previous section).

• Add “Service Reference” to the “WCF Service” project available within your solution.

• Go to File || Add || New Project (to the existing solution).

• Configure “ServiceReferences.ClientConfig” in “DemoSL” accordingly (explained in previous article). Rebuild the solution.

• Modify your code in Page.xaml, so that it looks like the following:

<UserControl x:Class="DemoSL.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data">

 <Grid x:Name="LayoutRoot" Background="White">

 <Grid.RowDefinitions>

 <RowDefinition Height="0.15*"/>

 <RowDefinition Height="0.25*"/>

 <RowDefinition Height="0.60*"/>

 </Grid.RowDefinitions>

 <Button HorizontalAlignment="Left" Margin="5,5,0,0" VerticalAlignment="Stretch" Width="76" Content="Show" x:Name="btnShow" Height="30" />

 <TextBlock Margin="5,5,0,0" VerticalAlignment="Stretch" Text="" TextWrapping="Wrap" x:Name="lblMsg" Height="22" Grid.Row="1" />

 <data:DataGrid x:Name="dgEmployees" AutoGenerateColumns="True" Grid.Row="2"></data:DataGrid>

 </Grid>

</UserControl>

Once the datagrid control is added to the Silverlight application, you should have an assembly named “System.Windows.Controls.Data” added to your reference list (if not, you should add it manually). You should also observe the namespace “my” added to the “UserControl” tag.

Go to the code-behind of “Page.xaml” and modify the code to look like the following:

Partial Public Class Page

Inherits UserControl

Public Sub New()

InitializeComponent()

End Sub

Private Sub btnShow_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnShow.Click

Me.lblMsg.Text = "Fetching..."

Dim objService As New EmpService.EmpServiceClient

AddHandler objService.GetEmployeeListCompleted, AddressOf EmployeeListFetched

objService.GetEmployeeListAsync()

End Sub

Private Sub EmployeeListFetched(ByVal sender As Object, ByVal e As EmpService.GetEmployeeListCompletedEventArgs)

Me.dgEmployees.ItemsSource = e.Result

Me.lblMsg.Text = "Fetched!"

End Sub

End Class

Once you execute your Silverlight application, you should see the output as follows:

Troubleshooting configurations

The following are the important configurations which you need to remember for troubleshooting errors during execution. All of the following are customized according to the current application (and are different from the default configurations added by Visual Studio).

“LINQ to SQL” configuration to work with WCF Service:

• The “Serialization mode” property of “DataContext” should be changed to “Unidirectional” (using "LINQ to SQL Designer”).

• the “ObjectTrackingEnabled” property of the “DataContext” object (in your programming) must always be set to “false.”

WCF configurations:

• Configure the WCF service to the local IIS (with both Integrated Security and Anonymous access options in security) using the IIS snap-in. Make sure that it is configured with ASP.NET 2.0 runtime.

• Make sure that connection string information is properly included in your web.config.

• Make sure that the debug is set to true in web.config as shown below:

<compilation debug="true" strict="false" explicit="true">

• The ServiceModel configuration needs to be customized according to the following:

<system.serviceModel>

<services>

<service behaviorConfiguration="DemoEmpService.EmpServiceBehavior"

name="DemoEmpService.EmpService">

<endpoint address="" binding="basicHttpBinding" contract="DemoEmpService.IEmpService">

<identity>

<dns value="localhost" />

</identity>

</endpoint>

<endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange" />

</service>

</services>

<behaviors>

<serviceBehaviors>

<behavior name="DemoEmpService.EmpServiceBehavior">

<!-- To avoid disclosing metadata information, set the value below to false and remove the metadata endpoint above before deployment -->

<serviceMetadata httpGetEnabled="true"/>

<!-- To receive exception details in faults for debugging purposes, set the value below to true. Set to false before deployment to avoid disclosing exception information -->

<serviceDebug includeExceptionDetailInFaults="true"/>

</behavior>

</serviceBehaviors>

</behaviors>

</system.serviceModel>

• The endpoint with “basicHTTPBinding” is very important in the above configuration.

• It is better to have “includeExceptionDetailInFaults” set to “true” during development (shown above).

• The “Dns” value should be properly provided (shown above).

Troubleshooting configurations are continued in the next section.

Troubleshooting configurations: continued

These troubleshooting configurations are continued from the previous section.

Silverlight application configurations:

• Configure the Silverlight application (DemoSL.Web) to the same IIS root as the WCF service discussed above (and also with the same options). This is just to minimize errors during development. However, it could be totally different during deployment.

• Make sure that MIME types are added as shown below

• Make sure that you add “Service reference” to the WCF project in the current solution for better debugging capabilities.

• Make sure that “ClientAccessPolicy.xml” is added to IIS root (usually, c:inetpubwwwroot) as follows:

<?xml version="1.0" encoding="utf-8" ?>

<access-policy>

<cross-domain-access>

<policy>

<allow-from http-request-headers="*">

<domain uri="*" />

</allow-from>

<grant-to>

<resource include-subpaths="true" path="/" />

</grant-to>

</policy>

</cross-domain-access>

</access-policy>

• Make sure that “ServiceReferences.ClientConfig” is provided as shown below:

<configuration>

<system.serviceModel>

<bindings>

<basicHttpBinding>

<binding name="BasicHttpBinding_IEmpService" maxBufferSize="65536"

maxReceivedMessageSize="65536">

<security mode="None" />

</binding>

<binding name="BasicHttpBinding_IEmpService1" maxBufferSize="65536"

maxReceivedMessageSize="65536">

<security mode="None" />

</binding>

<binding name="BasicHttpBinding_IEmpService2" maxBufferSize="2147483647"

maxReceivedMessageSize="2147483647">

<security mode="None" />

</binding>

</basicHttpBinding>

</bindings>

<client>

<endpoint address="http://localhost/DemoEmpService/EmpService.svc"

binding="basicHttpBinding" bindingConfiguration="BasicHttpBinding_IEmpService"

contract="DemoSL.EmpService.IEmpService" name="BasicHttpBinding_IEmpService" />

<endpoint address="http://vwin2k3/DemoEmpService/EmpService.svc"

binding="basicHttpBinding" bindingConfiguration="BasicHttpBinding_IEmpService2"

contract="EmpService.IEmpService" name="BasicHttpBinding_IEmpService1" />

</client>

</system.serviceModel>

</configuration>

• “vwin2k3” is my machine name. You need to replace to yours.

• Make sure that the debug is set to true in web.config (in DemoSl.Web)

In my upcoming articles, we will see more and more examples of Silverlight 2.0 development together with LINQ to SQL and WCF. I hope you enjoyed the article and any suggestions, bugs, errors, enhancements etc. are highly appreciated at http://jagchat.spaces.live.com