Calling WebMethod with parameters from jQuery ajax fails

Question

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?

Answer 1

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;

}