Consuming ASP.NET web service with jQuery on remote web service

Posted on 2011-04-20
Last Modified: 2012-05-11
I'm new to jQuery, and I need to find out how to consume a web service using jQuery from an page. I'd appreciate any guidance on how to do this, and how to deal with the Same Origin Policy (which I understand is an issue).

The web method takes two complex objects (each with multiple properties) and multiple strings as parameters and returns a list of objects with multiple properties.

Thanks in advance.
Question by:Ast35
    LVL 20

    Expert Comment

    Have a look here:

    You can also google "ASP.NET AJAX jQuery call web service", which will give you good results.

    Author Comment

    OK, so what I would do in C# is to create the two proxy objects that I'm going to pass to the web method and then set their properties before dealing with the results.

                ComplexObjectTypeA complexObject1 = new ComplexObjectTypeA();
                complexObject1.value1 = "data";
                complexObject1.value2 = "data";
                complexObject1.value3 = "data";

                ComplexObjectTypeB complexObject2 = new ComplexObjectTypeB();
                complexObject2.value1 = "data";
                complexObject2.value2 = "data";
                complexObject2.value3 = "data";

    ResultList testResults = new ResultList();
               testResults = ws.getResults(stringA, stringB, ComplexObject1, ComplexObject2, StringC, StringD, StringE, StringF);

                foreach (Result est in testResults.lst)
                    LabelTestResults.Text +=  est.lsdResult + " " + est.lsdFirstName + " " + est.lsdLastName + "<br>";

    From that article and others I have read, I think I understand how to pass string values to the web method (kind of like below?), but not really how to deal with the creation of the proxy complex objects like (complexObject1 and complexObject2 above) and passing them in that way in jQuery.

      type: "POST",
      contentType: "application/json; charset=utf-8",
      url: "WebService.asmx/GetResults",
      data: "{'stringA':'data', 'stringB':'data'}",
      dataType: "json"

    LVL 20

    Accepted Solution

    Give it a try with only one and more simple object first. You should change this part: data: "{'stringA':'data', 'stringB':'data'}", with something like:

    data: "{'value1':'data', 'value2':'data'...},{...}"

    The {..} defines an object, the 'name':'value' defines a public property and its value.

    Author Comment


    So names of the types of complex object that I'm passing don't need to be given, all I need to do is pass the properties within the curly brackets in the order that they appear in the method description?

    Does a single string value get its own set of curly brackets separated from the previous object?

    Author Comment

    There is a real web service I am trying to consume by the way. I was using those names for illustrative purposes. :)
    LVL 20

    Expert Comment

    The order of the properties is not important, you can give them in any order you want.
    The curly brackets define an object. If you have just a string, you don't need to make it an object, just provide it as a string in quotation marks

    Author Comment

    I think I see, thanks.

    Just to make sure I understand correctly, the ScriptManager control gets around the Same Origin Policy by making sure the request is an HTTP POST request and that the content type is JSON, right?
    LVL 20

    Expert Comment

    I am not sure about that, you should try it and see if some errors appear and then google them.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
    I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
    This video is a brief demonstration on how to use security groups and Network Access Control Lists (ACLs) in Amazon Web Services.  Security groups and Network ACLs are mechanisms you can use in AWS to control network traffic.

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now