.Nettuce

Code Salad

  Home  |   Contact  |   Syndication    |   Login
  36 Posts | 0 Stories | 36 Comments | 0 Trackbacks

News

Twitter












Archives

I can't believe how long this took to figure out, I think I read every WCF tutorial out there, and now I look at it it's so mind bogglingly simple I don't know what I wasted my time doing! All I wanted was a WCF service that would accept a POST from jQuery with some JSON parameters and return some HTML, but it seems I repeatedly cocked up the JSON string format and the attributes for the contract. Anyway, here's a simple example so you don't have to endure my frustration. I used .NET 4.0 because it's .svc free.

web.config

<?xml version="1.0"?>
<configuration>
<system.web>
<compilation debug="true" targetFrameworkMoniker=".NETFramework,Version=v4.0" />
</system.web>
<system.serviceModel>
<serviceHostingEnvironment aspNetCompatibilityEnabled="true">
<serviceActivations>
<add relativeAddress="Service" service="Service" />
</serviceActivations>
</serviceHostingEnvironment>
<services>
<service name="Service">
<endpoint behaviorConfiguration="webHttpBehaviour" binding="webHttpBinding" contract="Service" />
</service>
</services>
<behaviors>
<endpointBehaviors>
<behavior name="webHttpBehaviour">
<webHttp/>
</behavior>
</endpointBehaviors>
</behaviors>
</system.serviceModel>
</configuration>

Service

using System.IO;
using System.ServiceModel.Web;
using System.Text;
using System.ServiceModel;
using System.ServiceModel.Activation;

[ServiceContract, AspNetCompatibilityRequirements(RequirementsMode
= AspNetCompatibilityRequirementsMode.Allowed)]
public class Service
{
[OperationContract, WebInvoke(BodyStyle
= WebMessageBodyStyle.Wrapped, RequestFormat = WebMessageFormat.Json)]
public Stream Post(string message, int x, int y)
{
return new MemoryStream(Encoding.UTF8.GetBytes("<b>" + message + (x + y) + "</b>"));
}
}

jQuery

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-nightly.min.js"></script>
<script type="text/javascript">
$.ajax({
url:
"service/post",
type:
"POST",
contentType:
"application/json",
data:
'{"x":"1","y":"2","message":"The answer is: "}',
dataType:
"html",
success:
function(data) { $('body').html(data); }
});
</script>
</head>
<body>
</body>
</html>
posted on Sunday, October 18, 2009 11:18 PM

Feedback

# re: WCF jQuery REST JSON Service 4/8/2010 2:58 PM parveen punia
Hi
I have followed the steps to resolving cross domain issue using jsonp on rest wcf service.
This is my function in wcf service
[OperationContract]
[WebInvoke(ResponseFormat = WebMessageFormat.Json)]
res[] GetBooth(res ss);

[DataContract]
public class res
{
[DataMember]
public string title { get; set; }

[DataMember]
public string desc { get; set; }

}
public res[] GetData(res val ) {
List<res> ress = new List<res>();
return ss.title;
return ress.ToArray();
}
Now I want to pass function parameter while calling from client as class objects.
function GetData() {

var reqParams = {
title: "hello"
};
var reqParams_Serialized = Sys.Serialization.JavaScriptSerializer.serialize(reqParams);
$.ajax({
type: "Post",
cache: false,
url: "http://localhost:50933/test.svc/jsonp/getdata ",
scriptCharset: "utf-8",
contentType: 'application/json;charset=utf-8',
dataType: "json",
data: reqParams,
success: function(data, textStatus) {
alert(data);

},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert('error');
}
});
}}


But when pass parameters like this it is not working.
Please suggest me something with example or modification in this code.

Thanks
Parveen Punia




# re: WCF jQuery REST JSON Service 6/6/2010 9:13 AM Tim
Thanks, after hours of searching this post has finally given me the answer I need.

# re: WCF jQuery REST JSON Service 8/31/2010 3:14 PM Yoav
Cool article,

I wrote a post which extends what you've shown in yours up on my blog:

http://yoavniran.wordpress.com/2009/08/02/creating-a-webservice-proxy-with-jquery/

# re: WCF jQuery REST JSON Service 10/22/2012 10:22 AM Lion from USSR
Thanks a lot!
It's really works!
I searched it so long.

Post A Comment
Title:
Name:
Email:
Comment:
Verification: