How to call webmethod in Asp.net C#

Question

I want to call a web method in asp.net c# application using the following code

Jquery:

jQuery.ajax({
    url: 'AddToCart.aspx/AddTo_Cart',
    type: "POST",
    data: "{'quantity' : " + total_qty + ",'itemId':" + itemId + "}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    beforeSend: function () {
                  alert("Start!!! ");
               },
    success: function (data) {
                 alert("a");
              },
    failure: function (msg) { alert("Sorry!!! "); }
    });

C# Code:

[System.Web.Services.WebMethod]
public static string AddTo_Cart(int quantity, int itemId)
{
    SpiritsShared.ShoppingCart.AddItem(itemId, quantity);      
    return "Add";
}

But it always call page_load. How can i fix it?

From where are you making that ajax call? – nunespascal Oct 01 '13 at 07:37 — nunespascal, Oct 01 '13 at 07:37
very odd. whose page_load is called? AddToCart.aspx? – Renaissance Oct 01 '13 at 07:40 — Renaissance, Oct 01 '13 at 07:40
Yes,call AddToCart.aspx/Page_load – Balwant Chaudhary Oct 01 '13 at 07:52 — Balwant Chaudhary, Oct 01 '13 at 07:52

score 18 · Answer 1 · edited Jun 29 '16 at 08:04

18

There are quite a few elements of the $.Ajax() that can cause issues if they are not defined correctly. I would suggest rewritting your javascript in its most basic form, you will most likely find that it works fine.

Script example:

$.ajax({
    type: "POST",
    url: '/Default.aspx/TestMethod',
    data: '{message: "HAI" }',
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        console.log(data);
    },
    failure: function (response) {
        alert(response.d);
    }
});

WebMethod example:

[WebMethod]
public static string TestMethod(string message)
{
     return "The message" + message;
}

edited Jun 29 '16 at 08:04

garish

637
12
14

answered Aug 12 '14 at 10:36

JDandChips

9,780
3
30
46

3

This is an excellent starting point. Since this example works, you can then change it little by little to what you need and see at what point something goes wrong and then you know exactly what the issue is. – adinas Jan 28 '15 at 08:46

score 8 · Answer 2 · answered Nov 08 '14 at 21:55

This is a bit late, but I just stumbled on this problem, trying to resolve my own problem of this kind. I then realized that I had this line in the ajax post wrong:

data: "{'quantity' : " + total_qty + ",'itemId':" + itemId + "}",

It should be:

data: "{quantity : '" + total_qty + "',itemId: '" + itemId + "'}",

As well as the WebMethod to:

public static string AddTo_Cart(string quantity, string itemId)

And this resolved my problem.

Hope it may be of help to someone else as well.

score 2 · Answer 3 · answered Oct 12 '17 at 19:59

Necro'ing this Question ;)

You need to change the data being sent as Stringified JSON, that way you can modularize the Ajax call into a single supportable function.

First Step: Extract data construction

/***
 * This helper is used to call WebMethods from the page WebMethods.aspx
 * 
 * @method - String value; the name of the Web Method to execute
 * @data - JSON Object; the JSON structure data to pass, it will be Stringified
 *      before sending
 * @beforeSend - Function(xhr, sett)
 * @success - Function(data, status, xhr)
 * @error - Function(xhr, status, err)
 */
function AddToCartAjax(method, data, beforeSend, success, error) {
    $.ajax({
        url: 'AddToCart.aspx/', + method,
        data: JSON.stringify(data),
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        beforeSend: beforeSend,
        success: success,
        error: error
    })
}

Second Step: Generalize WebMethod

[WebMethod]
public static string AddTo_Cart ( object items ) {
    var js = new JavaScriptSerializer();
    var json = js.ConvertToType<Dictionary<string , int>>( items );

    SpiritsShared.ShoppingCart.AddItem(json["itemId"], json["quantity"]);      
    return "Add";
}

Third Step: Call it where you need it

This can be called just about anywhere, JS-file, HTML-file, or Server-side construction.

var items = { "quantity": total_qty, "itemId": itemId };

AddToCartAjax("AddTo_Cart", items,
    function (xhr, sett) {  // @beforeSend
        alert("Start!!!");
    }, function (data, status, xhr) {   // @success
        alert("a");
    }, function(xhr, status, err){  // @error
        alert("Sorry!!!");
    });

Zaki · Answer 4 · 2013-10-01T08:51:40.687

0

One problem here is that your method expects int values while you are passing string from ajax call. Try to change it to string and parse inside the webmethod if necessary :

[System.Web.Services.WebMethod]
public static string AddTo_Cart(string quantity, string itemId)
{
    //parse parameters here
    SpiritsShared.ShoppingCart.AddItem(itemId, quantity);      
    return "Add";
}

Edit : or Pass int parameters from ajax call.

edited Oct 01 '13 at 08:51

answered Oct 01 '13 at 08:31

Zaki

5,540
7
54
91

it should be possible to pass directly int values from the ajax call? – Alessio Oct 01 '13 at 08:41
@AlessioCavaleri unless you explicitly convert to int before passing then yes, otherwise it would expect string values... – Zaki Oct 01 '13 at 08:42

score 0 · Answer 5 · answered Oct 01 '13 at 19:45

I'm not sure why that isn't working, It works fine on my test. But here is an alternative technique that might help.

Instead of calling the method in the AJAX url, just use the page .aspx url, and add the method as a parameter in the data object. Then when it calls page_load, your data will be in the Request.Form variable.

jQuery

jQuery.ajax({
    url: 'AddToCart.aspx',
    type: "POST",
    data: {
        method: 'AddTo_Cart', quantity: total_qty, itemId: itemId
    },
    dataType: "json",
    beforeSend: function () {
        alert("Start!!! ");
    },
    success: function (data) {
        alert("a");
    },
    failure: function (msg) { alert("Sorry!!! "); }
});

C# Page Load:

if (!Page.IsPostBack)
{
    if (Request.Form["method"] == "AddTo_Cart")
    {
        int q, id;
        int.TryParse(Request.Form["quantity"], out q);
        int.TryParse(Request.Form["itemId"], out id);
        AddTo_Cart(q,id);
    }
}

Although this work around will allow your code to work, it is terrible practice and your future self will no doubt be disappointed in you when you have to maintain this tragic mess — JDandChips, Aug 12 '14 at 10:40
I added a downvote as this is a hacky work around that I don't think will help people in the same situation as the OP. — Morvael, Nov 04 '16 at 15:07

score 0 · Answer 6 · edited Aug 15 '14 at 14:54

0

The problem is at [System.Web.Services.WebMethod], add [WebMethod(EnableSession = false)] and you could get rid of page life cycle, by default EnableSession is true in Page and making page to come in life though life cycle events..

Please refer below page for more details http://msdn.microsoft.com/en-us/library/system.web.configuration.pagessection.enablesessionstate.aspx

edited Aug 15 '14 at 14:54

Isaac G Sivaa

1,289
4
15
32

answered Aug 15 '14 at 14:47

user3411833

1

score 0 · Answer 7 · edited Jan 08 '19 at 09:48

0

you need to JSON.stringify the data parameter before sending it.

edited Jan 08 '19 at 09:48

ArunPratap

4,816
7
25
43

answered Oct 21 '14 at 23:26

Karlth

3,267
2
27
28

Chandan Kumar · Answer 8 · 2017-03-07T03:49:18.667

Here is your answer. use

                   jquery.json-2.2.min.js 
                      and
                   jquery-1.8.3.min.js

Javascript :

function CallAddToCart(eitemId, equantity) {
   var itemId = Number(eitemId);
   var quantity = equantity;
   var dataValue = "{itemId:'" + itemId+ "', quantity :'"+ quantity "'}" ;
    $.ajax({
           url: "AddToCart.aspx/AddTo_Cart",
           type: "POST",
           dataType: "json",
           data: dataValue,
           contentType: "application/json; charset=utf-8",
           success: function (msg) {
                alert("Success");
           },
           error: function () { alert(arguments[2]); }      
        });
 }

and your C# web method should be

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string AddTo_Cart(int itemId, string quantity)
{
   SpiritsShared.ShoppingCart.AddItem(itemId, quantity);      
  return "Item Added Successfully";
}

From any of the button click or any other html control event you can call to the javascript method with the parameter which in turn calls to the webmethod to get the value in json format.

How to call webmethod in Asp.net C#

8 Answers8

First Step: Extract data construction

Second Step: Generalize WebMethod

Third Step: Call it where you need it

Linked