Calling WCF services from Javascript with UriTemplate and POST data - json

Question

I've got a WCF 4.0 service that's currently set up for HTTP GET requests. I'm trying to modify it so that it uses POST, but keep backwards compatibility with the existing GET URIs. The web service is being called with jQuery and JSON data. Therefore, my requirements are the following:
Match the existing GET URI, presumably by using the UriTemplate parameter of the WebInvoke attribute.
Get the existing parameters from JSON data in the POST body, presumably by using WebMessageBodyStyle.Wrapped and WebMessageFormat.Json with the WebInvoke attribute.
Preferably have a way to pull large blobs of a data out of the POST body, probably also wrapped in a JSON object.
Alright, with that out of the way, here's what I've got so far. My little test service is called AjaxService and it's got one method called ToUpper. First, my web.config:
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.0" />
</system.web>
<system.serviceModel>
<behaviors>
<endpointBehaviors>
<behavior name="WebApplication2.AjaxServiceAspNetAjaxBehavior">
<!--<enableWebScript />-->
<webHttp helpEnabled="true" />
</behavior>
</endpointBehaviors>
</behaviors>
<protocolMapping>
<remove scheme="http" />
<add scheme="http" binding="webHttpBinding" />
</protocolMapping>
<serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" />
<services>
<service name="WebApplication2.AjaxService">
<endpoint address=""
behaviorConfiguration="WebApplication2.AjaxServiceAspNetAjaxBehavior"
binding="webHttpBinding"
contract="WebApplication2.AjaxService" />
</service>
</services>
</system.serviceModel>
</configuration>
The following version of my ToUpper function allows me to pass its argument in the URI just like an HTTP GET.
[OperationContract]
[WebInvoke( UriTemplate="ToUpper?str={str}",
Method = "POST",
BodyStyle = WebMessageBodyStyle.WrappedRequest,
RequestFormat=WebMessageFormat.Json,
ResponseFormat=WebMessageFormat.Json)]
public string ToUpper(string str)
{
return str.ToUpper();
}
It's used in Javascript as follows and correctly returns "THIS IS FROM THE URI".
$(document).ready(function () {
$.ajax({
type: "POST",
url: "AjaxService.svc/ToUpper?str=this%20is%20from%20the%20uri",
contentType: "application/json; charset=utf-8",
success: function (data) {
console.log("result: " + JSON.stringify(data));
},
error: function (jqXHR, textStatus, errorThrown) {
console.log("error", jqXHR, textStatus, errorThrown);
}
});
});
I can put the parameter in the POST data instead of the URI by removing UriTemplate="ToUpper?str={str}" from the WebInvoke parameters and using this javascript instead. It correctly returns "THIS IS FROM THE POST".
$(document).ready(function () {
$.ajax({
type: "POST",
url: "AjaxService.svc/ToUpper",
data: JSON.stringify({str:"This is from the POST"}),
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
console.log("result: " + JSON.stringify(data));
},
error: function (jqXHR, textStatus, errorThrown) {
console.log("error", jqXHR, textStatus, errorThrown);
}
});
});
I was hoping that if I left the UriTemplate="ToUpper?str={str}" in place and use the above javascript, it would be smart enough to pull the str parameter out of the POST data instead of the URI. Unfortunately, it just gives me an error 400. Is there a way to make that work?
One other thing I tried is using the optional Stream parameter to get at the raw contents of the POST data. But as this blog post points out, you can only get that stream if you set the content type to plain text instead of JSON. I could do that and manually parse the stream, but I think I'd also need to manually examine the URL to figure out if I got real values or defaults. Yuck.
If there's no way to make this work with the system bindings/settings, I was thinking about trying to write a custom binding that would be smart about pulling parameters out of the POST and URI, and also give you that raw stream even when you're using JSON. I spent a few hours trying to figure out how to do that but I'm stumped!
Has anyone else tackled this one or have any ideas on how to make it work? I can't imagine I'm the first one to have tried doing this, but I've come up empty handed after doing lots of searching.