First we have to create a webapplication and add to it Ajax enabled WCF service.
Change default DoWork method to accept parameter
[OperationContract]
public string DoWork(string userName)
{
// Add your operation implementation here
return "Hello " + userName;
}
First add on the page input text control and two buttons.
<input type="text" name="txtName" id="txtName" />
<input type="button" value="jQuery call" onclick="cityClickJQuery();" />
<input type="button" value="ASP.NET AJAX Call" onclick="cityClick();" />
First we will call this method with jQuery. So reference jQuery library and add this javascript function for calling WCF service
function cityClickJQuery()
{
$.ajax({
type: "POST",
url: "http://localhost:65424/CityService.svc/DoWork",
data: '{"userName":"'+$get("txtName").value+'"}',
processData:false,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data)
{
alert(data.d);
}
});
}
It’s very easy, you have to pass url with method, parameter (value from textbox) specify data type and callback function.
Now you can run webapplication, put some text in input box and press button “jQuery call”
Calling WCF service with Microsoft Ajax is much more easy. You do not to provide most of the properties like jQuery call.
function cityClick()
{
CityService.DoWork($get("txtName").value, onSuccess);
}
function onSuccess(data)
{
if (data)
alert(data);
}
After pressing button, you will have the same result.
All source code can bi found below. I did not change web.config, so you can use default data generated by VisualStudio.
ASPX page:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
Inherits="WebApplication1._Default" %>
<!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">
<title></title>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
function cityClickJQuery()
{
$.ajax({
type: "POST",
url: "http://localhost:65424/CityService.svc/DoWork",
data: '{"userName":"'+$get("txtName").value+'"}',
processData:false,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data)
{
alert(data.d);
}
});
}
function cityClick()
{
CityService.DoWork($get("txtName").value, onSuccess);
}
function onSuccess(data)
{
if (data)
alert(data);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server">
<Services>
<asp:ServiceReference Path="~/CityService.svc" />
</Services>
</asp:ScriptManager>
<div style="background-color:#eee;">
<input type="text" name="txtName" id="txtName" />
<input type="button" value="jQuery call" onclick="cityClickJQuery();" />
<input type="button" value="ASP.NET AJAX Call" onclick="cityClick();" />
</div>
</div>
</form>
</body>
</html>
C# code:
namespace WebApplication1
{
using System.ServiceModel;
using System.ServiceModel.Activation;
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class CityService
{
// Add [WebGet] attribute to use HTTP GET
[OperationContract]
public string DoWork(string userName)
{
// Add your operation implementation here
return "Hello " + userName;
}
// Add more operations here and mark them with [OperationContract]
}
}