none
Call WCF service with jQuery get(): ways to pass a parameter?

    Question

  • Hi there,

    I'm experimenting with a WCF service which I'm calling from jQuery's get() method. I've looked at this great tutorial:

    http://www.codeproject.com/Articles/59551/Consuming-a-WCF-ASMX-REST-Service-using-jQuery

    And it has very interesting examples. I'd like to understand if I can (and should) use the "data" parameter for passing in a parameter. That works fine for POST examples, but I've never seen it working with a GET example. The way that they show getting a parameter in for "GET" is:

    function CountryProvinceWCFJSONGet() {
        varType    = "GET";
        varUrl     = "service/CountryProvinceWCFService.svc/" + 
                     "GetProvinceGET?Country=" +$('#ddlCountry').val();

    And on the WCF side:

        [OperationContract]
        [WebGet(ResponseFormat=WebMessageFormat.Json)]
        string[] GetProvinceGET(string Country);

    Basically they append the value on the end of the query string, and WCF will auto map the parameters. Pretty cool. But, I can't seem to get the parameters to map when I use the jquery "data" parameter. In that case, this is what Fiddler shows is actually happening:

                varUrl = "service/CountryProvinceWCFService.svc/GetProvinceGET
                varContentType = "application/json; charset=utf-8";
                varData = '{"Country": "' + $('#ddlCountry').val() + '"}';

    http://localhost:49790/HTTPServiceJquery/service/CountryProvinceWCFService.svc/GetProvinceGET?{"Country":%20"USA"}

    So it takes the contents of that variable and appends it on. But it doesn't auto map the parameters on the WCF side.

    To summarize the question: Is there any way to call a WCF service from jQuery, using GET, and pass a parameter in via the data variable?

    And if the answer is "yes", is there anything that should guide me (beyond preference) between that and the automapping I showed above in this thread?

    Thanks!

    -Ben


    • Edited by Benji22 Monday, February 27, 2012 4:44 PM Added WCF OperationContract
    Monday, February 27, 2012 4:26 PM

Answers

  • You can use the "data" parameter too, but instead of using a string as the parameter, try using the object itself which maps the inputs to their values:

    var url = "service/CountryProvinceWCFService.svc/GetProvinceGET";
    var data = { Country: $('#ddlCountry').val() };
    $.get(url, data, function(result) { ... });
    
    Notice that you don't need to specify the content-type when issuing a GET request (GET requests do not have content, since the parameter is passed in the query string of the request URI).

    Carlos Figueira

    • Marked as answer by Benji22 Monday, February 27, 2012 7:59 PM
    Monday, February 27, 2012 7:42 PM
    Moderator

All replies

  • You can use the "data" parameter too, but instead of using a string as the parameter, try using the object itself which maps the inputs to their values:

    var url = "service/CountryProvinceWCFService.svc/GetProvinceGET";
    var data = { Country: $('#ddlCountry').val() };
    $.get(url, data, function(result) { ... });
    
    Notice that you don't need to specify the content-type when issuing a GET request (GET requests do not have content, since the parameter is passed in the query string of the request URI).

    Carlos Figueira

    • Marked as answer by Benji22 Monday, February 27, 2012 7:59 PM
    Monday, February 27, 2012 7:42 PM
    Moderator
  • Thank you, Carlos! That worked like a charm. The GET request looked afterward like:

    http://localhost:49790/HTTPServiceJquery/service/CountryProvinceWCFService.svc/GetProvinceGET?Country=USA

    Which is the exact same as part 5 of the tutorial originally, where they manually set up the request URL to look like what I printed above, via string concatination.

    I still don't have a full understanding of when / why to place the actual object, but I'm really happy to understand how to do this at this point.

    Do you have any suggestions about best practices with the data parameter versus other techniques like a URITemplate or string contatination in the URL?

    Thanks again...

    -Ben

    Monday, February 27, 2012 8:02 PM
  • I don't think there is any recommendation. I prefer using the data parameter because it takes me out of the string concatenation business.

    One thing to point out is that by default only simple types (strings, numbers, a few others) can be passed as parameters. If you want to pass complex types as parameters you'll need a new query string converter which knows how to do that - you can find more information at http://blogs.msdn.com/b/carlosfigueira/archive/2011/08/09/wcf-extensibility-querystringconverter.aspx.


    Carlos Figueira

    Monday, February 27, 2012 8:09 PM
    Moderator