24/10/2013
Consuming AJAX-Enabled WCF Services from both Client and Server
Step 1 - Create a solution and service project
a. Add a WCF Service Application project to the solution called FooService
b. Delete everything in the service project’s web.config file.
c. Create a class file called FooServiceOne.cs
d. 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;
}
}
}
e. Create another file called FooServiceOne.svc and past the following code into the file.
f.Save and Compile
Step 2.Host the service is 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://GooberServer:90/FooServiceOne.svc
d. The service will be displayed with the message "Metadata publishing for this service is currently disabled."
Step 3 - 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://GooberServer:90/FooServiceOne.svc
d. Drag and Drop an ASP.NET button and Label control on the page.
e.
Add client-side script.
Collapse | Copy Code
function onSuccess(result) {
document.getElementById('').innerHTML = result;
}
function Button1_Click() {
var proxy = new GooberFoo.FooServices.IFooServiceOne();
proxy.Add(parseFloat(5), parseFloat(7), onSuccess, null, null);
return false;
}
f. Compile and test.
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"?>
Step 5: Test the Service.
1. In IE, open the URL http://GooberServer:90/FooServiceOne.svc.
2. You will see the FooServiceOne Service page along with instructions to use svcutil.exe http://GooberServer:90/FooServiceOne.svc?wsdl
Step 6 - 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.
i.It’s changed quite a bit.
ii.You will see the system.serviceModel node that includes the bindings and client nodes.
iii. You will not need to change anything.
Step 7. 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.
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.
