CODEWITHSUNDEEP
javascriptvb.netwcfweb-services
default_noob_network
default_noob_network

Reputation: 1315

Consume WCF Service using Html/Javascript

FILE WebService.svc.vb

Public Class WebService
    Implements IWebService
    Public Function HelloThere(ByVal name As String) As String Implements IWebService.HelloThere
        Return "Hello there " & name
    End Function
End Class

FILE IWebService.vb

Imports System
Imports System.ServiceModel

<ServiceContract()>
Public Interface IWebService

    <OperationContract()>
    Function InsertReport(ByVal name As String) As String
End Interface

FILE Web.config

<?xml version="1.0"?>
<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.0"/>
  </system.web>
  <system.serviceModel>
    <behaviors>
      <serviceBehaviors>
        <behavior>
          <!-- To avoid disclosing metadata information, set the value below to false 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="false"/>
        </behavior>
      </serviceBehaviors>
    </behaviors>
    <services>
      <service name="WebService">
        <endpoint address="WebService" binding="basicHttpBinding" contract="IWebService" />
        <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange" />

      </service>
    </services>

    <serviceHostingEnvironment multipleSiteBindingsEnabled="true" />
  </system.serviceModel>
  <system.webServer>
    <modules runAllManagedModulesForAllRequests="true"/>
    <!--
        To browse web app root directory during debugging, set the value below to true.
        Set to false before deployment to avoid disclosing web app folder information.
      -->
    <directoryBrowse enabled="true"/>
  </system.webServer>

</configuration>

FILE WebService.svc 

<%@ ServiceHost Language="VB" Debug="true" Service="WebService.WebService" CodeBehind="WebService.svc.vb" %>

My question is this: This service is hosted remotely in IIS 7(.5 I think) and I would like to consume it in a web application. This web app uses jquery and is just a standard HTML5 document. I have seen plenty of examples where people called a WCF Service with some javascript or AJAX, etc... I am looking for some code that will do that as well as the additional required web.config (and/or general changes to my service) modifications to allow this type of consumption.

Upvotes: 0

Views: 3881

Answers (1)

Pantelis Natsiavas
Pantelis Natsiavas

Reputation: 5369

If your service works fine, then you need no change on the server side. Your web service functions independent of the calling client. You could test your service using some tool like SoapUI.

The next HTML snippet should work fine as a client to your service, having the post URL adapted to yours. As you can see, it posts json data, 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $("a#CallService").click(function (e) {
          e.preventDefault();

          $.ajax({
            type: 'POST',
            data: '{"name": "' + $("input#name").val() + '"}',
            url: 'http://targetURL/Hello',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success:
              function (data, textStatus, XMLHttpRequest) {
                alert(data.d);
              },
            error:
              function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
              }
          });
        });
      });    
    </script>
</head>
<body>
  <input id="button" /><a id="CallService" href="#">Test</a>  
</body>
</html>

Hope I helped!

Upvotes: 1

Related Questions