b

Wednesday, 2 January 2013

Calling Cross Domain WCF service in Javascript using VB.NET 4.5

 Calling Cross Domain WCF service in Javascript  using VB.NET 4.5

Step 1) Create a WCF Service Application using VB.NET 4.5
Calling Cross Domain WCF service in Javascript using VB.NET 4.5













Delete IService1.vb and IService1.svc

Step 2) Add WCF Service .name it as"ProfileService"

Calling Cross Domain WCF service in Javascript using VB.NET 4.5
  • IProfileService.vb(Service Contract file)
  • ProfileService.svc.vb(Service Implementation file)
  • ProfileService.svc(Link between above 2 , & Here we specify Hosting Factory  for creating ScriptEnabled WCF Service).

We need 2 operation contracts
  • GetAllProfilesAsXML
  • GetAllProfilesAsJSON
Interface file has 2 contracts

ProfileService.svc.vb Implementation file for above 2 contracts

 ProfileService.svc here we specify hosting Factory name. This is very important

<%@ ServiceHost
    Language="VB"
    Debug="true"
    Service="WcfService1.ProfileService"
    CodeBehind="ProfileService.svc.vb"
     Factory="System.ServiceModel.Activation.WebScriptServiceHostFactory"
    %>









Web.config file we need to enable crosssitescripting=true and help page.

<?xml version="1.0"?>
<configuration>

   <appSettings>
    <add key="aspnet:UseTaskFriendlySynchronizationContext" value="true" />
  </appSettings>
  <system.web>
    <compilation debug="true" targetFramework="4.5" />
    <httpRuntime targetFramework="4.5"/>
  </system.web>
  <system.serviceModel>
    <behaviors>
<!-- for help page -->
      <endpointBehaviors>
        <behavior name="myServiceEndPoint">
          <webHttp helpEnabled="true" defaultBodyStyle="Bare" faultExceptionEnabled="true"/>
          <enableWebScript/>
        </behavior>      </endpointBehaviors>
    </behaviors>
    <protocolMapping>
        <add binding="basicHttpsBinding" scheme="https" />
    </protocolMapping>   
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" />
    <services>
      <service name="WcfService1.ProfileService">
        <endpoint address="" contract="WcfService1.IProfileService" binding="webHttpBinding" behaviorConfiguration="myServiceEndPoint"></endpoint>
      </service>
    </services>
    <bindings>
      <webHttpBinding>
        <binding name="myrestBinding" crossDomainScriptAccessEnabled="true">
         
        </binding>
      </webHttpBinding>
    </bindings>
    <standardEndpoints>
      <webScriptEndpoint>
        <standardEndpoint crossDomainScriptAccessEnabled="True">
          <security mode="None"></security>
        </standardEndpoint>
      </webScriptEndpoint>
    </standardEndpoints>
  </system.serviceModel>
  <system.webServer>
    <modules runAllManagedModulesForAllRequests="true"/>
    <directoryBrowse enabled="true"/>
  </system.webServer>

 </configuration>



Help Page  located at http://localhost:26678/ProfileService.svc/help

Calling Cross Domain WCF service in Javascript using VB.NET 4.5








Click on GET   for GetAllProfilesAsJSON, u will get as shown below

Calling Cross Domain WCF service in Javascript using VB.NET 4.5

Click on GET   for GetAllProfilesAsXML, u will get as shown below





  for cross domain WCF service, Binding Should be WebHttpBinding. Hosting Factory must be System.ServiceModel.Activation.WebScriptServiceHostFactory.
Once WCF Service creation is done.

Create A  Empty Web Site using   ASP.NET VB.NET 4.5


Calling Cross Domain WCF service using Javascript in asp.net 4.5 C#


Calling Cross Domain WCF service in Javascript using VB.NET 4.5


 Select .NET 4.5 and Empty Web Site

Add new item -> select Web form name it as Default.aspx

Add  ScriptManager  and reference the Service Path in that

        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
            <Services>
                <asp:ServiceReference Path="http://localhost:26678/ProfileService.svc" />
            </Services>
        </asp:ScriptManager>

 Add 2 button controls(1 for xml another one for json)
Add 2 div/table elements for display xml and json data.

as shown below
 
for XML DATA
        <asp:Button CssClass="buttonStyle" ID="Button1" runat="server" Text="Call Cross Domain  WCF Service XML"  title="Call Cross Domain  WCF Service XML returning complex object"
            OnClientClick="javascript:calling_WCF_in_JavascriptXML()" />

         <asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Block" UpdateMode="Conditional">
            <ContentTemplate>
                 <div style="color:green;font-size:1.6em;border-width:thick;border-color:red;"
                     id="wcf_ajax_response"
                     runat="server">
                         (POX) Plain Old XML Response from WCF Service

          <table  border="1">
        <thead style="font-weight: bold;">
            <tr>
                <td>Age</td>
                <td>Contry</td>
                <td>EmailID</td>
                <td>FirstName</td>
                <td>LastName</td>
                <td>ProfileID</td>
                <td>ZIPCode</td>
                <td>JoinedDate</td>
               
            </tr>
        </thead>
        <tbody id="resTable"></tbody>
    </table>
                  </div>
               
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>

for JSON Data

     <asp:Button CssClass="buttonStyle" ID="Button2" runat="server" Text="Call Cross Domain  WCF Service  JSON"  title="Call Cross Domain  WCF Service JSON returning complex object"
            OnClientClick="javascript:calling_WCF_in_JavascriptJSON()" />

          <asp:UpdatePanel ID="UpdatePanel2" runat="server" RenderMode="Block" UpdateMode="Conditional">
            <ContentTemplate>
                JSON Response from WCF Service
                         <table border="1px">
        <thead style="color:green;font-size:1.6em;border-width:thick;border-color:red;">
            <tr>
                <td>ProfileID</td>
                <td>FirstName</td>
                <td>LastName</td>
                <td>Age</td>
                <td>JoinedDate</td>
                <td>EmailID</td>
                <td>ZIPCode</td>
                <td>Contry</td>
            </tr>
        </thead>
        <tbody id="x"></tbody>
    </table>

                  <div style="color:green;font-size:1.6em;border-width:thick;border-color:red;"
                     id="resTableJSON"
                     runat="server">
                         No JSON Response

                   </div>
               
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>

 Now we need to  creating WCF Rest Service in javascript. Note. ScriptManager will generate proxy class in OnPrerender itself.
Here we need to create ServiceContract in javascript.

Calling cross domain WCF service for XML Response

        function calling_WCF_in_JavascriptXML() {
            try {
                //Create a WCF Service in javascript
                var proxy = new SP.IProfileService();
                //note NameSpace is Empty.
                //Calling WCF methods in javascript.
               
               
                proxy.GetAllProfilesAsXML(onSuccessXML, OnFailedXML, null);
            }
            catch (error) {
                alert(error.message);
            }
        }

         function onSuccessXML(result) {
          
            var dom = new DOMParser();
            var xmldoc=dom.parseFromString(result,'text/xml');
            var childNodes = xmldoc.childNodes[0];
            var ProfileNodes = childNodes.childNodes;
            for (i = 0; i < ProfileNodes.length; i++)
               
                if (ProfileNodes[i].tagName == "Profile") {
                    var j = 0;
                    var resTable = document.getElementById("resTable");
                    resTable.insertRow(i);

                     resTable.rows[i].insertCell(j);
                    resTable.rows[i].cells[j++].innerHTML = xmldoc.getElementsByTagName("Age")[i].childNodes[0].nodeValue;
                       resTable.rows[i].insertCell(j);
                       resTable.rows[i].cells[j++].innerHTML = xmldoc.getElementsByTagName("Country")[i].childNodes[0].nodeValue;
                       resTable.rows[i].insertCell(j);
                       resTable.rows[i].cells[j++].innerHTML = xmldoc.getElementsByTagName("EmailID")[i].childNodes[0].nodeValue;
                       resTable.rows[i].insertCell(j);
                      
                       resTable.rows[i].cells[j++].innerHTML = xmldoc.getElementsByTagName("FirstName")[i].childNodes[0].nodeValue;
                       resTable.rows[i].insertCell(j);
                       resTable.rows[i].cells[j++].innerHTML = xmldoc.getElementsByTagName("LastName")[i].childNodes[0].nodeValue;
                       resTable.rows[i].insertCell(j);
                       resTable.rows[i].cells[j++].innerHTML = xmldoc.getElementsByTagName("ProfileID")[i].childNodes[0].nodeValue;
                       resTable.rows[i].insertCell(j);
                       resTable.rows[i].cells[j++].innerHTML = xmldoc.getElementsByTagName("ZIPCode")[i].childNodes[0].nodeValue;
                       resTable.rows[i].insertCell(j);
                       resTable.rows[i].cells[j++].innerHTML = xmldoc.getElementsByTagName("JoinedDate")[i].childNodes[0].nodeValue;
       
                }
           
           
            return;

         }

         function OnFailedXML(result) {
            alert(result+'Failed');
        }
Calling cross domain WCF service for JSON Response

        function calling_WCF_in_JavascriptJSON() {
            try {
                //Create a WCF Service in javascript
                var proxy = new SP.IProfileService();
                //note NameSpace is Empty.

                //Calling WCF methods in javascript.
               // proxy.s
                proxy.GetAllProfilesAsJSON(onSuccessJSON, OnFailedJSON, null);
            }
            catch (error) {
                alert(error.message);
            }
        }

        function onSuccessJSON(result) {
            var str = "<table border='2'>";
            if (Array.isArray(result)) {
                for (var i = 0; i < result.length; i++) {
                    var dt = new Date(result[i].JoinedDate.toString());
                    str += "<tr>";
                    str += "<td>" + result[i].ProfileID + "</td>";
                    str += "<td>" + result[i].FirstName + "</td>";
                    str += "<td>" + result[i].LastName + "</td>";
                    str += "<td>" + result[i].Age + "</td>";
                    str += "<td>" + dt.getFullYear() + "/" + dt.getDate() + "/" + dt.getDay() + "</td>";
                    str += "<td>" + result[i].EmailID + "</td>";
                    str += "<td>" + result[i].ZIPCode + "</td>";
                    str += "<td>" + result[i].Country + "</td>";


                }
                str += "</tr>";
                str += "</table>";

                document.getElementById('resTableJSON').innerHTML = str;
            }

        }

        function OnFailedJSON(result) {
            alert(result+'failed');
        }
 


Run the Application.

OUTPUT

Calling Cross Domain WCF service using Javascript in asp.net 4.5 C#

 Click on "Call Cross Domain WCF Service XML"
Calling Cross Domain WCF service in Javascript using VB.NET 4.5


 Click on "Call Cross Domain WCF Service JSON"

Calling Cross Domain WCF service in Javascript using VB.NET 4.5




This example explains how to consume complex object returned by WCF Rest Service as XML and JSON, and also How to parse XML in javascript & How to parse JSON object in javascript. and display as formatted HTML content.
 

               Complete Source Code

Cross Domain WCF service

IProfileService.vb

 Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Runtime.Serialization
Imports System.ServiceModel
Imports System.Text
Imports System.ServiceModel.Web
Imports System.ServiceModel.Channels
Namespace WcfService1

    <ServiceContract(Namespace="SP")> _
    Public Interface IProfileService
        <OperationContract> _
        <WebGet(ResponseFormat=WebMessageFormat.Xml)> _
        Dim GetAllProfilesAsXML() As List<Profile>

        <OperationContract> _
        <WebGet(ResponseFormat = WebMessageFormat.Json)> _
        Dim GetAllProfilesAsJSON() As List<Profile>
    End Interface
End Namespace
 
ProfileService.svc.vb
 
 Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Runtime.Serialization
Imports System.ServiceModel
Imports System.Text
Imports System.ServiceModel.Web
Imports System.ServiceModel.Channels
Namespace WcfService1
    ' NOTE: You can use the "Rename" command on the "Refactor" menu to change the class name "ProfileService" in code, svc and config file together.
    ' NOTE: In order to launch WCF Test Client for testing this service, please select ProfileService.svc or ProfileService.svc.cs at the Solution Explorer and start debugging.
    Public Class ProfileService
     Implements IProfileService
        Private profiles As List<Profile> =  New List<Profile>()
        Public Function GetAllProfilesAsXML() As List<Profile>
            BuildProfile()
            Return profiles
        End Function

        Public Function GetAllProfilesAsJSON() As List<Profile>
            BuildProfile()            Return profiles
        End Function
        Private  Sub BuildProfile()
            If profiles.Count = 0 Then
                profiles.Add(New Profile
                {
                     Age = 21, CounTry = "USA", EmailID = "jhon@gmail.com", FirstName = "jhon", LastName = "Peter", ProfileID = 1, ZIPCode = "94086-2422", JoinedDate = New System.DateTime(1998, 1, 12)
                }
)
                profiles.Add(New Profile
                {
                     Age = 18, CounTry = "USA", EmailID = "macy@yahoo.com", FirstName = "macy", LastName = "William", ProfileID = 2, ZIPCode = "67897-2422", JoinedDate = New System.DateTime(2000, 11, 1)
                }
)
                profiles.Add(New Profile
                {
                     Age = 28, CounTry = "UK", EmailID = "alex@gmail.com", FirstName = "alex", LastName = "Samuel", ProfileID = 3, ZIPCode = "STHL 1ZZ", JoinedDate = New System.DateTime(2002, 10, 9)
                }
)
                profiles.Add(New Profile
                {
                     Age = 35, CounTry = "UK", EmailID = "bearns@gmail.com", FirstName = "beans", LastName = "Jessica", ProfileID = 4, ZIPCode = "AA9A 9AA", JoinedDate = New System.DateTime(2004, 10, 12)
                }
)
                profiles.Add(New Profile
                {
                     Age = 36, CounTry = "INDIA", EmailID = "prasad@gmail.com", FirstName = "prasad", LastName = "kanuturi", ProfileID = 5, ZIPCode = "110011", JoinedDate = New System.DateTime(1990, 1, 2)
                }
)
            End If

        End Sub


    End Class
    <DataContract> _
    Public Class Profile
        <DataMember> _
        Public Property ProfileID() As Integer
        End Property
        <DataMember> _
        Public Property FirstName() As String
        End Property
        <DataMember> _
        Public Property LastName() As String
        End Property
        <DataMember> _
        Public Property Age() As Integer
        End Property
        <DataMember> _
        Public Property JoinedDate() As DateTime
        End Property

        <DataMember> _
        Public Property EmailID() As String
        End Property
        <DataMember> _
        Public Property ZIPCode() As String
        End Property
        <DataMember> _
        Public Property CounTry() As String
        End Property
    End Class

End Namespace 

ProfileService.svc
<%@ ServiceHost
    Language="C#"
    Debug="true"
    Service="WcfService1.ProfileService"
    CodeBehind="ProfileService.svc.cs"
     Factory="System.ServiceModel.Activation.WebScriptServiceHostFactory"
    %> 
WCF web.config
<?xml version="1.0"?>
<configuration>

  <appSettings>
    <add key="aspnet:UseTaskFriendlySynchronizationContext" value="true" />
  </appSettings>
  <system.web>
    <compilation debug="true" targetFramework="4.5" />
    <httpRuntime targetFramework="4.5"/>
  </system.web>
  <system.serviceModel>
    <behaviors>
   
      <endpointBehaviors>
        <behavior name="myServiceEndPoint">
          <webHttp helpEnabled="true" defaultBodyStyle="Bare" faultExceptionEnabled="true"/>
          <enableWebScript/>
        </behavior>
      </endpointBehaviors>
    </behaviors>
    <protocolMapping>
        <add binding="basicHttpsBinding" scheme="https" />
    </protocolMapping>   
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" />
    <services>
      <service name="WcfService1.ProfileService">
        <endpoint address="" contract="WcfService1.IProfileService" 
binding="webHttpBinding" behaviorConfiguration="myServiceEndPoint"></endpoint>
      </service>
    </services>
    <bindings>
      <webHttpBinding>
        <binding name="myrestBinding" crossDomainScriptAccessEnabled="true">
         
        </binding>
      </webHttpBinding>
    </bindings>
    <standardEndpoints>
      <webScriptEndpoint>
        <standardEndpoint crossDomainScriptAccessEnabled="True">
          <security mode="None"></security>
        </standardEndpoint>
      </webScriptEndpoint>
    </standardEndpoints>
  </system.serviceModel>
  <system.webServer>
    <modules runAllManagedModulesForAllRequests="true"/>
    <directoryBrowse enabled="true"/>
  </system.webServer>

</configuration>

ASP.NET  WEBSITE

DEFAULT.ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">

    <title>Calling Cross Domain WCF service using Javascript Example</title>
    <style type="text/css">
        .buttonStyle
        {
            color:white;
            background-color:darkblue;
            border-radius:10px;
            font-size:1.6em;
        }
    </style>
    <script type="text/javascript">

        function calling_WCF_in_JavascriptJSON() {
            try {
                //Create a WCF Service in javascript
                var proxy = new SP.IProfileService();
                //note NameSpace is Empty.

                //Calling WCF methods in javascript.
               // proxy.s
                proxy.GetAllProfilesAsJSON(onSuccessJSON, OnFailedJSON, null);
            }
            catch (error) {
                alert(error.message);
            }
        }

        function onSuccessJSON(result) {
            var str = "<table border='2'>";
            if (Array.isArray(result)) {
                for (var i = 0; i < result.length; i++) {
                    var dt = new Date(result[i].JoinedDate.toString());
                    str += "<tr>";
                    str += "<td>" + result[i].ProfileID + "</td>";
                    str += "<td>" + result[i].FirstName + "</td>";
                    str += "<td>" + result[i].LastName + "</td>";
                    str += "<td>" + result[i].Age + "</td>";
                    str += "<td>" + dt.getFullYear() + "/" + dt.getDate() + "/" + dt.getDay() + "</td>";
                    str += "<td>" + result[i].EmailID + "</td>";
                    str += "<td>" + result[i].ZIPCode + "</td>";
                    str += "<td>" + result[i].Country + "</td>";


                }
                str += "</tr>";
                str += "</table>";

                document.getElementById('resTableJSON').innerHTML = str;
            }

        }

        function OnFailedJSON(result) {
            alert(result+'failed');
        }

        function calling_WCF_in_JavascriptXML() {
            try {
                //Create a WCF Service in javascript
                var proxy = new SP.IProfileService();
                //note NameSpace is Empty.
                //Calling WCF methods in javascript.
               
               
                proxy.GetAllProfilesAsXML(onSuccessXML, OnFailedXML, null);
            }
            catch (error) {
                alert(error.message);
            }
        }

        function onSuccessXML(result) {
          
            var dom = new DOMParser();
            var xmldoc=dom.parseFromString(result,'text/xml');
            var childNodes = xmldoc.childNodes[0];
            var ProfileNodes = childNodes.childNodes;
            for (i = 0; i < ProfileNodes.length; i++)
               
                if (ProfileNodes[i].tagName == "Profile") {
                    var j = 0;
                    var resTable = document.getElementById("resTable");
                    resTable.insertRow(i);

                    resTable.rows[i].insertCell(j);
                    resTable.rows[i].cells[j++].innerHTML = xmldoc.getElementsByTagName("Age")[i].childNodes[0].nodeValue;
                       resTable.rows[i].insertCell(j);
                       resTable.rows[i].cells[j++].innerHTML = xmldoc.getElementsByTagName("Country")[i].childNodes[0].nodeValue;
                       resTable.rows[i].insertCell(j);
                       resTable.rows[i].cells[j++].innerHTML = xmldoc.getElementsByTagName("EmailID")[i].childNodes[0].nodeValue;
                       resTable.rows[i].insertCell(j);
                      
                       resTable.rows[i].cells[j++].innerHTML = xmldoc.getElementsByTagName("FirstName")[i].childNodes[0].nodeValue;
                       resTable.rows[i].insertCell(j);
                       resTable.rows[i].cells[j++].innerHTML = xmldoc.getElementsByTagName("LastName")[i].childNodes[0].nodeValue;
                       resTable.rows[i].insertCell(j);
                       resTable.rows[i].cells[j++].innerHTML = xmldoc.getElementsByTagName("ProfileID")[i].childNodes[0].nodeValue;
                       resTable.rows[i].insertCell(j);
                       resTable.rows[i].cells[j++].innerHTML = xmldoc.getElementsByTagName("ZIPCode")[i].childNodes[0].nodeValue;
                       resTable.rows[i].insertCell(j);
                       resTable.rows[i].cells[j++].innerHTML = xmldoc.getElementsByTagName("JoinedDate")[i].childNodes[0].nodeValue;
       
                }
           
           
            return;

        }

        function OnFailedXML(result) {
            alert(result+'Failed');
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
    </div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
            <Services>
                <asp:ServiceReference Path="http://localhost:26678/ProfileService.svc" />
            </Services>
        </asp:ScriptManager>
        <asp:Button CssClass="buttonStyle" ID="Button1" runat="server" Text="Call Cross Domain  WCF Service XML"  title="Call Cross Domain  WCF Service XML returning complex object"
            OnClientClick="javascript:calling_WCF_in_JavascriptXML()" />

        <asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Block" UpdateMode="Conditional">
            <ContentTemplate>
                 <div style="color:green;font-size:1.6em;border-width:thick;border-color:red;"
                     id="wcf_ajax_response"
                     runat="server">
                         (POX) Plain Old XML Response from WCF Service

         <table  border="1">
        <thead style="font-weight: bold;">
            <tr>
                <td>Age</td>
                <td>Contry</td>
                <td>EmailID</td>
                <td>FirstName</td>
                <td>LastName</td>
                <td>ProfileID</td>
                <td>ZIPCode</td>
                <td>JoinedDate</td>
               
            </tr>
        </thead>
        <tbody id="resTable"></tbody>
    </table>
                  </div>
               
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>

     <asp:Button CssClass="buttonStyle" ID="Button2" runat="server" Text="Call Cross Domain  WCF Service  JSON"  title="Call Cross Domain  WCF Service JSON returning complex object"
            OnClientClick="javascript:calling_WCF_in_JavascriptJSON()" />

         <asp:UpdatePanel ID="UpdatePanel2" runat="server" RenderMode="Block" UpdateMode="Conditional">
            <ContentTemplate>
                JSON Response from WCF Service
                         <table border="1px">
        <thead style="color:green;font-size:1.6em;border-width:thick;border-color:red;">
            <tr>
                <td>ProfileID</td>
                <td>FirstName</td>
                <td>LastName</td>
                <td>Age</td>
                <td>JoinedDate</td>
                <td>EmailID</td>
                <td>ZIPCode</td>
                <td>Contry</td>
            </tr>
        </thead>
        <tbody id="x"></tbody>
    </table>

                 <div style="color:green;font-size:1.6em;border-width:thick;border-color:red;"
                     id="resTableJSON"
                     runat="server">
                         No JSON Response

                  </div>
               
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
    </form>
</body>
</html>
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)