Jquery – Calling WebMethod with parameters from jQuery ajax fails

ajaxjquerywebformswebmethod

I'm baffled by the following problem.

I have a 'WebForm1.aspx' and a 'WebService1.asmx'.
When I call a WebMethod in the WebService WITHOUT parameters ('HelloWorld') it works fine. When I call a Method WITH parameters ('SayHello') it fails.

It doesn't even hit the method (breakpoint I set in the method is not reached). The xmlHttpRequest error is 'Internal Server Error'

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[System.Web.Script.Services.ScriptService]
public class WebService1 : System.Web.Services.WebService
{
    [WebMethod]
    public string HelloWorld()
    {
        return "Hello World";
    }

    [WebMethod]
    public string SayHello(string firstName, string lastName)
    {
        return "Hello " + firstName + " " + lastName;
    }
}

my WebForms1.aspx:

    <div><br />No Parameters </div>
<div id="NoParameters"></div>
<div><br />With Parameters</div>
<div id="WithParameters"></div>


<script type="text/javascript">
    $(document).ready(function () {
        // SayHello returns a string we want to display.  Examples A, B and C show how you get the data in native
        // format (xml wrapped) as well as in JSON format.  Also how to send the parameters in form-encoded format,
        // JSON format and also JSON objects.  To get JSON back you need to send the params in JSON format.

        // Test - call a function that returns a string.
        // No Parameters
        $.ajax({
            type: "POST",
            url: "WebService1.asmx/HelloWorld",
            data: "{}",
            dataType: "text",
            success: function (data) {
                $("#NoParameters").html(data); // show the string that was returned, this will be the data inside the xml wrapper
            }
        });

        // Example A - call a function that returns a string.
        // Params are sent as form-encoded, data that comes back is text
        $.ajax({
            type: "POST",
            url: "WebService1.asmx/SayHello",

            //data: "firstName=Aidy&lastName=F", // the data in form-encoded format, ie as it would appear on a querystring
            //contentType: "application/x-www-form-urlencoded; charset=UTF-8", // if you are using form encoding, this is default so you don't need to supply it

            data: "{firstName:'Aidy', lastName:'F'}", // the data in JSON format.  Note it is *not* a JSON object, is is a literal string in JSON format
            contentType: "application/json; charset=utf-8", // we are sending in JSON format so we need to specify this

            dataType: "text", // the data type we want back, so text.  The data will come wrapped in xml
            success: function (data) {
                $("#WithParameters").html(data); // show the string that was returned, this will be the data inside the xml wrapper
            }
            , error: function(xmlHttpRequest, status, err) {alert(err);}
        });
    });

The code I'm using is coming from examples from the internet. I tried passing the parameters both as form encoded (conmmented out) and JSON. Nothing seems to work.

What to do?

  • Could it be the version of jQuery 1.8.2?
  • Should I be using 'Fiddler'? (haven't used it yet, learning curve)
  • Would F12 developer tools in IE11 help?
  • Is it IIS Express running locally on my dev PC?

Any help would be greatly appreciated.

Could there be anything wrong with my browser? There are a lot of 'A's with a tilde above it showing up on googled pages and I had problems submitting this question from IE on my developer machine. On my normal PC the submitting was fine.Some sort of encoding problem?

Best Answer

Change You "data" parameter in ajax call like data: JSON.stringify({ Msg: 'Hello Client'}), and define your web method like:- [WebMethod] public static string GetArray(string Msg) {

return Msg;

}

You must same the method parameter name as you pass in your data parameter in ajax call.

You can See this example below:-

        $(document).ready(function() {
    debugger;
    $.ajax({
        type: "POST",
        url: "flight-result-online.aspx/GetArray",
        data: JSON.stringify({ title: 'MP3', songname: 'Gulabi Ankhe' }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            alert(msg.d);
        },
        error: function(msg) {
            alert(msg.d);
        }
    });

});

and your Web Method define like as:-

[WebMethod]
public static string GetArray(string title, string songname)
{

return title+" "+songname;

}
Related Topic