Learning by Failing

This continues our discoveries in the articles “Returning true JSON from WCF services“, “Return JSON from Ajax-enabled WCF Service” and “Using jQuery with JSon-enabled WCF Services“.

We will now add two parameters to our DoWork-method and supply them when we call them using jQuery.

Open up the “AjaxEnabled.svc.cs” and add two parameters, string name and int id:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Web;
namespace Alaz.DotNetDiscoveries.JSONWithWCF
{
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class AjaxEnabled
{
// Add [WebGet] attribute to use HTTP GET
[OperationContract]
[WebGet(ResponseFormat=WebMessageFormat.Json,BodyStyle = WebMessageBodyStyle.Bare)]
public MyClass DoWork(string name, int id)
{
var returnObject = new MyClass
{
//Use our fresh parameters:
Id = id,
Name = name,
//Added a call to HttpContext.Current:
NoPublicGet = HttpContext.Current.Request.RawUrl,
IHaveNoDataMemberAttribute = "Meaningless",
InternalProperty = 155
};
return returnObject;
}
// Add more operations here and mark them with [OperationContract]
}
}

Then try to run it with the url “AjaxEnabled.svc/DoWork?name=Zlatan&id=8″. Your answer should be:

{“Id”:8,”InternalProperty”:155,”Name”:”Zlatan”,”NoPublicGet”:”\/AjaxEnabled.svc\/DoWork?name=Zlatan&id=8″}

Make (or add to our previous example) a web page like this (note that in our example there is no check that the number-field only provides an integer):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<!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>
<title>Test jQuery, WCF and JSon</title>
<script src="script/jquery-1.2.2.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function()
{
$("#myButt").click(function()
{
$.getJSON("TrueJSON.svc/DoWork",function(data)
{
alert("Name=" + data.Name + "\nId=" + data.Id + "\nNoPublicGet="+data.NoPublicGet + "\nInternalProperty=" + data.InternalProperty );
});
});
$("#parameterButt").click(function()
{
var nameValue=$("#name").val();
var idValue=$("#id").val();
$.getJSON("AjaxEnabled.svc/DoWork",{name:nameValue,id:idValue},function(data)
{
alert("Name=" + data.Name + "\nId=" + data.Id + "\nNoPublicGet="+data.NoPublicGet + "\nInternalProperty=" + data.InternalProperty );
});
});
});
</script>
</head>
<body>
<input type="button" value="Get values from server" id="myButt" />
<p>
<input type="text" id="name" value="Zlatan" /><br />
<input type="text" id="id" value="8" /><br />
<input type="button" value="Get values from server, call with parameters" id="parameterButt" />
</p>
</body>
</html>

Nice, isn’t it?
That concludes this article-series about using WCF services with jQuery.
Good luck!

Be Sociable, Share!