Consuming WCF service with JavaScript in .NET 4.0 application

I got a solution from protonic.com.  The code for a working solution is below:

TestLibrary:

app.config:

<?xml version="1.0"?>
<configuration>
  <system.web>
    <compilation debug="true"/>
  </system.web>
  <system.serviceModel>
    <services>
      <service name="TestLibrary.Hello">
        <endpoint address=""
                                                      binding="wsHttpBinding"
                                                      contract="TestLibrary.IHello">
          <identity>
            <dns value="localhost"/>
          </identity>
        </endpoint>
        <endpoint address="mex"
                                                      binding="mexHttpBinding"
                                                      contract="IMetadataExchange"/>
        <host>
          <baseAddresses>
            <add baseAddress="http://localhost:8732/Design_Time_Addresses/TestLibrary/Service1/"/>
          </baseAddresses>
        </host>
      </service>
    </services>
    <behaviors>
                  <serviceBehaviors>
        <behavior>
          <serviceMetadata httpGetEnabled="True"/>
          <serviceDebug includeExceptionDetailInFaults="False"/>
        </behavior>
      </serviceBehaviors>
    </behaviors>
  </system.serviceModel>
</configuration>

IHello.vb

mports System.ServiceModel.Web

<ServiceContract(Namespace:="http://localhost/HelloHost2B/Hello.svc")> _
Public Interface IHello

      <OperationContract()> _
      <WebGet(ResponseFormat:=WebMessageFormat.Json)> _
      Function SayHello(ByVal value As String) As String

End Interface

Hello.vb:

Imports System.ServiceModel.Activation

<AspNetCompatibilityRequirements(RequirementsMode:=AspNetCompatibilityRequirementsMode.Allowed)> _
Public Class Hello
      Implements IHello

      Public Function SayHello(ByVal value As String) As String Implements IHello.SayHello
            Return String.Format("Hello {0}", value)
      End Function

End Class


HelloHost:

Web.config:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
                  <system.web>
                  <compilation debug="true" strict="false" explicit="true" targetFramework="4.0" />
      <identity impersonate="false" />
            </system.web>  
            <system.serviceModel>
                  
            <bindings>
      <webHttpBinding>
        <binding name="customWebHttpBinding">
        </binding>
      </webHttpBinding>
    </bindings>
                  
    <behaviors>
      <serviceBehaviors>
        <behavior name="ServiceBehaviour">
          <serviceMetadata httpGetEnabled="true" />
          <serviceDebug includeExceptionDetailInFaults="true" />
        </behavior>
      </serviceBehaviors>
      <endpointBehaviors>
        <behavior name="webScriptBehavior">
          <enableWebScript />
        </behavior>
      </endpointBehaviors>
    </behaviors>
                  
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" />
                  
    <services>
      <service behaviorConfiguration="ServiceBehaviour" name="TestLibrary.Hello">
        <endpoint address="/javascript" binding="webHttpBinding" behaviorConfiguration="webScriptBehavior" contract="TestLibrary.IHello" bindingConfiguration="customWebHttpBinding" />
      </service>
    </services>
                  
  </system.serviceModel>
  <system.webServer>
    <modules runAllManagedModulesForAllRequests="true" />
  </system.webServer>

</configuration>

Hello.svc:

<%@ ServiceHost Language="VB" Debug="true" Service="TestLibrary.Hello" %>


Hello Client:

Web.config

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
      
  <system.web>
    <compilation debug="true" strict="false" explicit="true" targetFramework="4.0" />
        <identity impersonate="false" />
  </system.web>

  <system.webServer>
     <modules runAllManagedModulesForAllRequests="true" />
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
      
  <system.serviceModel>
    <behaviors>
      <endpointBehaviors>
        <behavior name="TestLibrary.Hello">
          <enableWebScript />
        </behavior>
      </endpointBehaviors>
      <serviceBehaviors>
        <behavior name="">
          <serviceMetadata httpGetEnabled="true" />
          <serviceDebug includeExceptionDetailInFaults="true" />
        </behavior>
      </serviceBehaviors>
    </behaviors>
            <services>
                  <service name="TestLibrary.Hello">
                        <endpoint address="" binding="wsHttpBinding" contract="TestLibrary.IHello" behaviorConfiguration="TestLibrary.Hello">
                              <identity>
                                    <dns value="localhost" />
                              </identity>
                        </endpoint>
                        <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange" behaviorConfiguration="TestLibrary.Hello" />
                        <host>
                              <baseAddresses>
                                    <add baseAddress="http://localhost:8732/Design_Time_Addresses/TestLibrary/Service1/" />
                              </baseAddresses>
                        </host>
                  </service>
            </services>
            <bindings />
    <client />
  </system.serviceModel>
            
</configuration>

TestHello.aspx

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestHello.aspx.vb" Inherits="Hello_Client.TestHello" %>

<!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 runat="server">
    <script src="<%=ResolveUrl("~/Scripts/Hello.js")%>" type="text/javascript"></script>
    <script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <title></title>
</head>
<body>
   <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="http://localhost/HelloHost2B/Hello.svc/javascript"/>
           </Services>
        </asp:ScriptManager>
        <div>
            <label id="lblName">Name:</label>
            <input id="txtName" name="tName" type="text" /><br />
            <input id="btnHello" type="button" value="Hello?" onclick="fnHello(document.getElementById('txtName').value)" />
        </div>
    </form>
</body>
</html>

Hello.js

function fnHello(Name) {
    jQuery.ajax({
        type: "GET",
        url: "http://localhost/HelloHost2B/Hello.svc/javascript/SayHello",
        data: "value=" + Name,
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data)
        {
            alert(data.d);
        },
        error: function (xhr, textStatus, errorMessage)
        {
            alert("error");
        }
    });
    var svc = new localhost.HelloHost2B.Hello.svc.IHello();
   svc.SayHello(Name, function (result, context, functionName)
    {
        window.alert('success 2nd function: ' + result);
    }, function (error, context, methodName)
    {
        window.alert('error from 2nd function: ' + error._message);
    }, null);
}

In Hello.js two different methods are used.  It should be noted that before deploying to a production server if using the jQuery method localhost needs to be replaced with the name of the server in the line url: "http://localhost/HelloHost2B/Hello.svc/javascript/SayHello"

For the other method the same needs to be done in TestHello.aspx for the line <asp:ServiceReference Path="http://localhost/HelloHost2B/Hello.svc/javascript"/>