Walkthrough on WCF 4.0 Service in Silver Light 4 · Walkthrough on WCF 4.0 Service in Silver Light 4.0 In this article we will see, 1. How to create a WCF 4.0 Service 2. How to host

http://dhananjaykumar.net/

Dhananjay Kumar Microsoft-MVP-Connected System

Walkthrough on WCF 4.0 Service in Silver Light 4.0

In this article we will see,

1. How to create a WCF 4.0 Service

2. How to host service in IIS 7.5

3. How to consume that in Silver Light 4.0 client

4. How to avoid cross domain problem.

For our walkthrough, I am going to create a simple Addition Calculator. User will interact with the Silver

Light UI and on the user input WCF Service hosted in IIS will get called.

Expected Output

When user will click on + button a WCF service hosted on IIS will get called. As an input parameter to

service value from two text box will be passed and result from the service will get display in result text

box.



Create WCF Service

Create WCF service. Open visual studio select new project and then from WCF tab select WCF Service

application to create a new WCF service.



Delete the default code created by WCF from IService1 and Service1.svc.cs

a. So delete the data contract

b. Modify the service contract as below. Just make one operation contract to return a string.

IService1.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Runtime.Serialization;

using System.ServiceModel;

using System.ServiceModel.Web;

using System.Text;

namespace WcfService5

{

[ServiceContract]

public interface IService1

{

[OperationContract]

string GetMessage(string number1 , string number2);

}

}

Now implement the service as below,



Service1.svc.cs

using System;


using System.Linq;

using System.Runtime.Serialization;

using System.ServiceModel;

using System.ServiceModel.Web;

using System.Text;

namespace WcfService5

{

public class Service1 : IService1

{

public string GetMessage(string number1, string number2)

{

return (Convert.ToInt32(number1) + Convert.ToInt32(number2)).ToString();

}

}

}

Since, we are creating WCF Service for SilverLight client, so we need to modify the endpoint of the

service with basicHttpBinding.

As we know SilverLight supports either basicHttpBinding or webHttpBinding. webHttpBinding is

essentially for REST based service . We are going to use basicHttpBinding to enable SOAP based WCF

service for SilverLight client.

<services>

<service name ="WcfService3.Service1" behaviorConfiguration ="svcbh" >

<host>

<baseAddresses>

<add baseAddress = "http//localhost:9000/Service1/" />

</baseAddresses>

</host>

<endpoint name ="duplexendpoint"

address =""

binding ="basicHttpBinding"

contract ="WcfService3.IService1"/>

<endpoint name ="MetaDataTcpEndpoint"

address="mex"

binding="mexHttpBinding"

contract="IMetadataExchange"/>

</service>

</services>

1. Declare the end point with basicHttpBinding.



2. Declare the Meta data exchange end point.

3. Define the service behavior

So the service will look like



Web.Config

<?xml version="1.0"?>

<configuration>

<system.web>

<compilation debug="true" targetFramework="4.0" />

</system.web>

<system.serviceModel>

<behaviors>

<serviceBehaviors>

<behavior name ="svcbh">

<serviceMetadata httpGetEnabled="true"/>

<serviceDebug includeExceptionDetailInFaults="false"/>

</behavior>

</serviceBehaviors>

</behaviors>

<services>

<service name ="WcfService5.Service1" behaviorConfiguration ="svcbh">

<endpoint name ="SilverLightendpoint"

address =""

binding ="basicHttpBinding"

contract ="WcfService5.IService1"/>

<endpoint name ="MetaDataSilverlightEndpoint"

address="mex"

binding="mexHttpBinding"

contract="IMetadataExchange"/>

</service>

</services>



</system.serviceModel>

<system.webServer>

<modules runAllManagedModulesForAllRequests="true"/>

</system.webServer>

</configuration>

Hosting in IIS and solving the cross domain problem

Host WCF Service in IIS 4.0

Open IIS

a. Open the command prompt in administrator mode. To do click on Start button then type RUN

in search and then in Run window type inetmgr to open IIS .



Now you will have IIS open like below

b. Right click on Sites and then click Add Web Site



c. Now a window will open.

Give any name of your choice as the site name. I am giving name here HostedWcfService



Now click on select and choose ASP.Net v4.0 from the drop down.

Now in the physical path section, we need to give physical path of the service. So to get the physical

path of the service, right click on the WCF Service project in visual studio and click open project in

windows explorer. Open the project in windows explorer and from address bar copy the path and paste

that below. Or you can browse also. Just click on browse button and navigate to project folder of the

WCF Service.

Now at the Binding section select HTTP. Give any port number. I am selecting the port as 4567

Do not give any name as host name. Leave it blank



Check the check box Start Web Site Immediately.

And now click OK on the window.

d. Now open visual studio command prompt in administrator mode. Right click and select as

administrator



Type the below command

aspnet_regiis.exe /iru



You will get the message Finished Installing ASP.Net 4.0

e. Now go to inetmgr, you would able to see the site you just created in previous step.

Publishing the WCF Service

Go back to WCF Service. Right click and select Publish



On clicking of publish a window will come.



Give a Service URL. You are free to give any Service URL here. Just make sure host name is geeting

resolved. In stead of localhost you can give IP address or your machine name also.

Give the name of the site HostedWcfService. We created this site in previous step.



Leave the credential inactive.

Now click on Publish.



You will get the message in bottom publish succeeded

Browsing the service hosted in IIS

Open Inetmgr and right click on site HostedWcfService. Then from Manage Web Site select Browse

option.



When you click on browse site will get open in browser



You will get the above error. Just in address bar append Service1.svc with the address to open the

service in browser.

http://localhost:4567/Service1.svc

And in browser you will get the service up and running.

http://localhost:4567/Service1.svc



So now you successfully created and hosted the WCF 4.0 service in IIS 7.5

Solving cross domain problem

1. Right click on WCF Service project and add new item. Select XML file from Data tab.



2. Give the name of the XML file clientaccesspolicy.xml

3. Add the below markup in ClientAcccessPolicy.xml file



So, finally now you will have a ClientAccesspolicy.xml file in WCF project

ClientAccesspolicy.xml

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

<access-policy>

<cross-domain-access>

<policy>

<allow-from http-request-headers="SOAPAction,Content-Type">

<domain uri="*" />

</allow-from>

<grant-to>

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

</grant-to>

</policy>

</cross-domain-access>

</access-policy>

4. Now open WCF Service project in windows explorer. To do this right clicks on the project and

select open folder in Window explorer.



Copy clientaccesspolicy.xml file and paste it in C:\inetpub\wwwroot. Make sure in

wwwroot folder clientaccesspolicy.xml file exist.

Consuming in SilverLight 4.0

1. Create a Silver Light project by Project->new ->SilverLight -> SilverLight Application



And create a web site to host Silver light application.



2. Now design the page in XAML.

MainPage.xaml



<UserControl x:Class="SilverlightApplication3.MainPage"

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

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

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d">

<Grid x:Name="LayoutRoot" Background="Gray" Height="200" Width="300">

<Grid.RowDefinitions>

<RowDefinition Height="*" />

<RowDefinition Height="2*" />

</Grid.RowDefinitions>

<TextBox x:Name="txtResult" Height="40" Text="" Margin="12,14,22,14" />

<StackPanel Orientation="Horizontal" Grid.Row="1" >

<Canvas>

<TextBox x:Name="txtNumber1" Height="40" Width="99" Canvas.Left="20"

Canvas.Top="30"/>

<Button x:Name="btnAdd" Height="40" Width="50" Content="+"

Canvas.Left="120" Canvas.Top="30" />

<TextBox x:Name="txtNumber2" Height="40" Width="99" Canvas.Left="170"

Canvas.Top="30"/>

</Canvas>

</StackPanel>

</Grid>

</UserControl>

Explanation

1. Divided the main grid in two rows.

2. In first row put a textbox to display the result.

3. In second row put a stack panel with horizontal orientation.

4. Put a canvas inside stack panel

5. Put two text box and button in canvas.

3. Right click on SilverLight project and add Service Reference.



Give the URL of the WCF service hosted in IIS in Address text box. And then click GO.



4. Calling the Service

Add namespace

On click event of the button



Explanation

1. Silverlight calls WCF service asynchronously

2. So first completed event is getting called. If operation contract name is GetMessage then event

name will be GetMessageCompleted.

3. After event aysnc function is being called.

MainPage.Xaml.cs

using System;


using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using SilverlightApplication3.ServiceReference1;

namespace SilverlightApplication3

{

public partial class MainPage : UserControl

{

public MainPage()

{

InitializeComponent();

btnAdd.Click += new RoutedEventHandler(btnAdd_Click);

}

void btnAdd_Click(object sender, RoutedEventArgs e)

{

Service1Client proxy = new Service1Client();

proxy.GetMessageCompleted += delegate(object sender1,

GetMessageCompletedEventArgs e1) { txtResult.Text = e1.Result;};

proxy.GetMessageAsync(txtNumber1.Text ,txtNumber2.Text);

}

}

}



Output

Conclusion

In this article we saw how we can consume WCF Service in Silverlight application with cross domain. I

hope this article was useful. Thanks for reading. Happy Coding