How to call WCF methods from Silverlight controls ?

This tutorial and the attached sample project demonstrates how to access server side data from Silverlight controls using WCF.

Silverlight controls get executed on the client browser. It does not have direct access to the data on the serverside. So, if your Silverlight controls need to retrieve data from database or other data sources on the server, we have to use various approaches like WCF calls or depend on the InitParameters property of the Silverlight controls.

The recommended approach to get server side data to Silverlight controls is using WCF method calls. The most important benefit is the type safety.

The following sample demonstrates how to use WCF to retrieve data from Server side to Silverlight controls on the client side.

In this sample, we will create a Silverlight project and another web project to host the Silverlight control. Also, we will add a WCF Service to the web project.

Silverlight with WCF sample

Create a new Silverlight project with a web project to host the Silverlight control.

Open Visual Studio and select the menu "File" > "New" > "Project"
Select the Project Type as "Silverlight" under your favorite language and choose the template "Silverlight Application". I have selected Visual C# as the tutorials here.

I have named my project as "MySilverlightApp" and have selected the option "Create directory for solution" so that all my project files are organized within a folder structure.

In the next screen, choose the option "Add a new web to the solution for hosting the control".

Right click on the web project in the Solution Explorer and select "Add New Item".

Select the category "Silverlight" from the left panel in the dialog box.

From the right panel, select the template "Silverlight-enabled WCF Service"

Choose the default name "Service1.svc" and press the "Add" button.

(The current beta version of Visual Studio may show you an error object reference not set to an instance .... Ignore this error and proceed.)

You can see the below code:

[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service1
{
[OperationContract]
public void DoWork()
{
return;
}
}

Explaining the concepts of WCF is beyond the scope of this tutorial. However, I just want to point out 2 things here:

[ServiceContract(Namespace = "")]

- This attribute above the class name indicates that this class is a WCF service.

[OperationContract]

- This attribute above the method name indicates that this method can be called from a WCF client.

Let us add a new method to our WCF service class, decorated with the [OperationContract] attribute. Add a method as shown below:

[OperationContract]
public string GetName()
{
return "John";
}

As you can see, it is a simple method which returns a hard coded name.

Open your solution explorer. Right click on the file "Service1.svc" and select "Set as Startup Page".

Now run the application by pressing Ctrl + F5 (or, using the menu "Debug" > "Start Without Debugging")

The browser will be opened and Service1 meta data will be displayed. Ignore the content in the page, but copy the URL from the browser. The URL will look something like this:

http://localhost:1873/Service1.svc

The port number may be different in your case, but that is OK.

Return to your Solution Explorer in Visual Studio. Right click on your Silverlight project (not web project) and select "Add Service Reference".

In the field for Address, specify the URL you copied from the browser and press "GO".

In the bottom left, change the namespace to "MySampleService".

You should see a screen like this:

Press "OK" to add the service reference.

Now you can call our WCF service from the Silverlight client.

To test this, follow these steps:

1. Open the Page1.xaml file and add a textblock to display the string returned from the WCF method call.

2. Add an event handler for the "Loaded" event of the UserControl.

Complete code from Page1.xaml is given below:

Now go to the code behind file (Page1.xaml.cs) and add the WCF service call as shown below:

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
MySampleService.Service1Client client = new MySampleService.Service1Client();
client.GetNameCompleted += new EventHandler(client_GetNameCompleted);
client.GetNameAsync();
}
void client_GetNameCompleted(object sender, MySampleService.GetNameCompletedEventArgs e)
{
textblock1.Text = (string)e.Result;
}

Open the web project in Solution Explorer and set the Silverlight test page as the startup page. Now run the project. You can see that the WCF service is called from Silverlight client and the result is displayed in the browser. (In our sample, the result from the WCF call is the name "John" and this name will be displayed in the screen).

You can download a sample project for this tutorial.

nOVAme

Thursday, November 6, 2008

Creating a Silverlight 2.0 Application that Consumes a WCF Service

About Me

Blog Archive