This is a simple example of an Ajax-Enabled WCF Service (hosted in IIS) that can be consumed using both client-side and server-side code.

1. Add a WCF Service Application project to the solution called FooService

2. Delete everything in the service project’s web.config file.

 

a. Create a class file called FooServiceOne.cs
b. Replace the code with this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;

namespace GooberFoo.FooServices
{

    [ServiceContract(Namespace = "GooberFoo.FooServices")]
    public interface IFooServiceOne
    {
        [OperationContract]
        double Add(double n1, double n2);
    }

    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class FooServiceOne : IFooServiceOne
    {
        public double Add(double n1, double n2)
        {
            return n1 + n2;
        }
    }
}

c. Create another file called FooServiceOne.svc and past the following code into the file.

<%@ServiceHost
         language="C#"
         Debug="true"
         Service="GooberFoo.FooServices.FooServiceOne"
         Factory="System.ServiceModel.Activation.WebScriptServiceHostFactory"
 %>

d. Save and Compile

3. Host in IIS

a. Make sure "Enable anonymous access" is checked.
b. Make sure "Integrated Windows authentication" is unchecked.
c. Test the service by navigating to http://*******:90/FooServiceOne.svc
d. The service will be displayed with the message "Metadata publishing for this service is currently disabled."

4. Access the service from the client-side code

a. Create an Empty ASP.NET Web Application in your solution.
b. Drag and drop an AJAX Extensions ScriptManager control into your web page.
c. In the ServiceReference Collection Editor, set the path to http://********:90/FooServiceOne.svc
d. Drag and Drop an ASP.NET button and Label control on the page.

 <asp:Button ID="Button1" runat="server" OnClientClick="return Button1_Click();" Text="Add 5 and 7" />
 <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

e. Add client-side script. 

<script language="javascript" type="text/javascript">
     function onSuccess(result) {
       document.getElementById('<%=Label1.ClientID %>').innerHTML = result;
     }
     function Button1_Click() {
       var proxy = new GooberFoo.FooServices.IFooServiceOne();
       proxy.Add(parseFloat(5), parseFloat(7), onSuccess, null, null);
       return false;
     }
 </script>

f. Compile and test.

5. Modify the service project to allow server-side code to consume the service

Change the service project's web.config file to look like this.

<?xml version="1.0"?>
        <configuration>
          <system.serviceModel>

            <bindings>
              <basicHttpBinding>
                <binding name="basicHttpBinding" closeTimeout="00:01:00"
                    openTimeout="00:01:00" receiveTimeout="00:10:00" sendTimeout="00:01:00"
                    allowCookies="false" bypassProxyOnLocal="false" hostNameComparisonMode="StrongWildcard"
                    maxBufferSize="65536" maxBufferPoolSize="524288" maxReceivedMessageSize="65536"
                    messageEncoding="Text" textEncoding="utf-8" transferMode="Buffered"
                    useDefaultWebProxy="true">
                  <readerQuotas maxDepth="32" maxStringContentLength="8192" maxArrayLength="16384"
                      maxBytesPerRead="4096" maxNameTableCharCount="16384" />
                  <security mode="None">
                    <transport clientCredentialType="None" proxyCredentialType="None"
                        realm="" />
                    <message clientCredentialType="UserName" algorithmSuite="Default" />
                  </security>
                </binding>
              </basicHttpBinding>
            </bindings>

            <behaviors>
              <serviceBehaviors>
                <behavior name="AspNetAjaxBehavior" >
                  <serviceMetadata httpGetEnabled="true" />
                </behavior>
              </serviceBehaviors>

              <endpointBehaviors>
                <behavior name="AspNetSOAPBehavior">
                </behavior>
              </endpointBehaviors>
            </behaviors>

            <services>
              <service name="GooberFoo.FooServices.FooServiceOne" behaviorConfiguration="AspNetAjaxBehavior" >
                <endpoint contract="IMetadataExchange" binding="mexHttpBinding" address="mex" />
                <endpoint address="soapreq" behaviorConfiguration="AspNetSOAPBehavior" bindingConfiguration="basicHttpBinding"
                          binding="basicHttpBinding" contract="GooberFoo.FooServices.IFooServiceOne" name="GooberFoo.FooServices.IFooServiceOne" />
              </service>
            </services>
          </system.serviceModel>
        </configuration>

6. Test the Service

a. In IE, open the URL http://*******:90/FooServiceOne.svc.
b. You will see the FooServiceOne Service page along with instructions to use svcutil.exe http://*******:90/FooServiceOne.svc?wsdl

7. Add the Web Reference to your asp.net web application

a. In your web application, "Add Service Reference".
b. Use http://GooberServer:90/FooServiceOne.svc?wsdl
c. Click Go.
d. Use FooServiceOneRef as the namespace.
e. Click OK.
f. View web application’s web.config file.

8. Use server-side C# code to consume the service in your web application

a. Add Button control to the page along with a button click event.

 <asp:Button ID="Button2" runat="server" Text="Add 10 and 13" onclick="Button2_Click" />

b. The button click event will look like this:

protected void Button2_Click(object sender, EventArgs e)
 {
   FooServiceOneRef.FooServiceOneClient mySvc = new FooServiceOneRef.FooServiceOneClient();
   Label1.Text = Convert.ToString(mySvc.Add(10, 13));
 }

c. Compile and test.