Consume WCF Service using Html/Javascript

Question

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.

Pantelis Natsiavas · Accepted Answer · 2014-02-13 17:22:10Z

1

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!

answered Feb 13, 2014 at 17:22

Pantelis Natsiavas

5,3875 gold badges24 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

default_noob_network Over a year ago

Well, the service seems to be working just fine when I send a request in SoapUI. I cannot get your code to work just yet, however. I've replaced the URL, I've changed the contentType to what I see in SoapUI after a successful request. I've also changed dataType to xml, which is what I want. Can SoapUI tell me more about what I need to do to form a proper request? (I'm also already using jquery 1.10.1 as well as jquery mobile 1.4.0 if it matters)

default_noob_network Over a year ago

I've gotten many different ones... 400 Bad Request seems to be my rock at the moment. I've tried things like adding SOAPAction ..but just still no dice. For the record here is the (fake ;) ) URL I've been using: somehost/service/WebService.svc --is that right? I've also tried URLs with the "?wsdl" appended at the end. I've also tried with the "/MethodName" appended as well.

Pantelis Natsiavas Over a year ago

Have you tried changing the data that the client sends to a simple string or an XML? As it is now in my code, it is json...

default_noob_network Over a year ago

I have tried that. So lemmie ask you this... using the client code you provided.. do you have a working version yourself? If so, could you provide your service/interface/web.config code so we could compare?

Collectives™ on Stack Overflow

Consume WCF Service using Html/Javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related