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:
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):
<!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!
1 kommentar:
Great!
It really worked!
Thanks!
Skicka en kommentar