How to consumed WCF 4.0 service in Silverlight 4.0 with cross domain

No.of Views6121
Bookmarked0 times
Downloads 
Votes0
By  Dhananjay Kumar   On  11 Sep 2010 10:09:45
Tag : WCF , Miscellaneous
When a SilverLight application is ruuning on different server than the server where WCF Service is hosted then cross domain problem come into action. This article will explain how WCF 4.0 Service can be consumed in SilverLight 4.0 application. How to avoid cross domain problem is also explain in this article.
emailbookmarkadd commentsprint

Images in this article missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at info@codegain.com

 

Objective

This article will explain how to call WCF 4.0 service hosted in IIS 7.5 in a Silverlight application.  This article will explain the way to avoid cross domain problem also.

Expected Output

Image Loading

When user will click on + button a WCF service hosted on IIS will get called. As a input parameter to service value from two text box will be passed and result from the service will get display in result text box.

Image Loading

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.

Image Loading

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.Collections.Generic;
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 webHttpBindingwebHttpBinding 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 ="wsDualHttpBinding" 
                  contract ="WcfService3.IService1"/>
        <endpoint name ="MetaDataTcpEndpoint"
                  address="mex" 
                  binding="mexHttpBinding" 
                  contract="IMetadataExchange"/>
      </service>
    </services>

1.    Declare the end point with basicHttpBinding.

Image Loading

2.     Declare the Meta data exchange end point.

Image Loading

3.    Define the service behavior

Image Loading

So the service will look like

Image Loading

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>
    <!--<serviceHostingEnvironment multipleSiteBindingsEnabled="true" />-->
  </system.serviceModel>
 <system.webServer>
    <modules runAllManagedModulesForAllRequests="true"/>
  </system.webServer>  
</configuration>

Hosting in IIS and solving the cross domain problem

Host the service in IIS.    Please read here step by step to host 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.

Image Loading

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

 

Image Loading

3.    Add the below markup in ClientAcccessPolicy.xml  file

Image Loading

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.

Image Loading

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

Image Loading

And create a web site to host Silver light application.

Image Loading

2.    Now design the page in XAML.

Image Loading

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.

Image Loading

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

Image Loading

4.    Calling the Service

Add namespace

Image Loading

On click event of the button

Image Loading

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.Collections.Generic;
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

Image Loading

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 

 
Sign Up to vote for this article
 
About Author
 
Dhananjay Kumar
Occupation-Software Engineer
Company-Infosys Technolgies,Pune
Member Type-Gold
Location-India
Joined date-20 Jul 2009
Home Page-http://dhananjaykumar.net/
Blog Page-http://dhananjaykumar.net/
Dhananjay Kumar is Microsoft MVP on connected system. He blogs at http://dhananjaykumar.net/ . You can follow him http://twitter.com/debugmode_/ and reach him at dhananjay.25july@gmail.com
 
 
Other popularSectionarticles
Comments
There is no comments for this articles.
Leave a Reply
Title:
Display Name:
Email:
(not display in page for the security purphase)
Website:
Message:
Please refresh your screen using Ctrl+F5
If you can't read this number refresh your screen
Please input the anti-spam code that you can read in the image.
^ Scroll to Top