CODEWITHSUNDEEP
c#jqueryasp.net-mvc
user5032790
user5032790

Reputation:

Why I can't send parameter to action method with ajax?

This code works without sending parameter:

$(function () {
        $('#Fee').on('focus', function () {
            $.ajax({
                url: '@Url.Action("GetFee")', 
                dataType: "json", 
                type: "POST",
                contentType: 'application/json; charset=utf-8', 
                cache: false, 
                data: { }, 
                success: function (data) {
                    if (data.success) {
                        $('#Fee').val(data.message);
                    }
                }
            });
        });
    });

However if I want to send a parameter to the GetFee action method it doesn't work anymore:

data: { bookname : 'book1' }

And I changed my action method to accept parameter:

[HttpPost]
public ActionResult GetFee(string bookname)

Upvotes: 1

Views: 2224

Answers (3)

nmbrphi
nmbrphi

Reputation: 681

As Darin Dimitrov had previously replied, you don't send your data in the format where you declare in the contentType. In my opinion you can choose these two ways:

1.Send your parameter like a JSON string (look at Darin Dimitrov's answer) and add a [FromBody] before the input parameter, to clarify where you want to read this value. 

[HttpPost]
 public ActionResult GetFee([FromBody] string bookname)

2.Avoid specifying the contentType, and dataType in your ajax call, like this

$(function () {
    $('#Fee').on('focus', function () {
        $.ajax({
            url: '@Url.Action("GetFee")',                 
            type: "POST",                
            cache: false, 
            data: { bookname : 'book1' },
            success: function (data) {
                if (data.success) {
                    $('#Fee').val(data.message);
                }
            }
        });
    });
});

Upvotes: 1

Vaibhav Kumar
Vaibhav Kumar

Reputation: 544

Since you are specifying the datatype 'json'. So you can send only json object in request. So you need to convert data in json format.

You can do by using the JSON.stringify() method. The JSON.stringify() method converts a JavaScript value to a JSON string.

JSON.stringify(value[, replacer[, space]])

If you don't want to use JSON datatype, you don't need to convert it. Simply use:

$(function () {
    $('#Fee').on('focus', function () {
        $.ajax({
            url: '@Url.Action("GetFee")', 
            type: "POST",
            cache: false, 
            data: { 
               'bookname' : 'book1'
            }, 
            success: function (data) {
                if (data.success) {
                    $('#Fee').val(data.message);
                }
            }
        });
    });
});

Upvotes: 1

Darin Dimitrov
Darin Dimitrov

Reputation: 1038720

You indicated:

contentType: 'application/json; charset=utf-8',

so make sure that you respect what you claimed to be sending to the server:

data: JSON.stringify({ bookname : 'book1' })

On the other hand, if you get rid of this application/json content type in your request, jQuery will use application/x-www-form-urlencoded by default and then you can simply use this:

data: { bookname : 'book1' }

Upvotes: 8

Related Questions