Reputation: 23763

Sending String Data to MVC Controller using jQuery $.ajax() and $.post()

There's got to be something I'm missing. I've tried using $.ajax() and $.post() to send a string to my ASP.NET MVC Controller, and while the Controller is being reached, the string is null when it gets there. So here is the post method I tried:

$.post("/Journal/SaveEntry", JSONstring);

And here is the ajax method I tried:

$.ajax({
    url: "/Journal/SaveEntry",
    type: "POST",
    data: JSONstring
});

Here is my Controller:

public void SaveEntry(string data)
{
    string somethingElse = data;
}

For background, I serialized a JSON object using JSON.stringify(), and this has been successful. I'm trying to send it to my Controller to Deserialize() it. But as I said, the string is arriving as null each time. Any ideas?

Thanks very much.

UPDATE: It was answered that my problem was that I was not using a key/value pair as a parameter to $.post(). So I tried this, but the string still arrived at the Controller as null:

$.post("/Journal/SaveEntry", { "jsonData": JSONstring });

Upvotes: 19

Answers (7)

Hassan Fneish

Reputation: 1

In this approach, on the controller’s action parameter, I was receiving a null:

document.addEventListener("DOMContentLoaded", function () {
            
        submitBtn.addEventListener("click",function(){
                var JSONstring = JSON.stringify(toSend);
                   
            $.ajax({
                url: "/Sales/Create",
                method:"POST",
                   
                dataType:"json",
                    contentType: 'application/json;charset=utf-8',
                    data: { "jsonData": JSONstring }
                   
                success: function (response) {
                    console.log(JSONstring);
                    window.location.href = '/Sales/Index';
                },
                error: function (error) {
                    console.error(error);
                }
            });
        })
});

But after I switch to this approach, my problem is solved and I started received my JSON. (Take this as a sample to solve your problem.)

        document.addEventListener("DOMContentLoaded", function () {
                // Assuming submitBtn is properly defined
                submitBtn.addEventListener("click", function () {
                  // Make sure to define toSend with appropriate data
                    var JSONstring = JSON.stringify(toSend);
        
                    $.post("/Sales/Create", { "jsonData": JSONstring }, function (response) {
                        console.log(JSONstring); // Fix variable name
                        window.location.href = '/Sales/Index';
                    }, 'json')
                        .fail(function (error) {
                            console.error(error.responseText); // Log the specific error message
                        });
                });
            });

In your controller:

/*[ValidateAntiForgeryToken]*/
[HttpPost]
public JsonResult Create(string jsonData)  
{  
    //write your own code here
}

Notes: 1. If you didn't send a token and the [ValidateAntiForgeryToken] attribute exists, comment it out or erase it or learn how to send a validation token. 2. The parameter name in the action controller should match the key in my JSON—in my case jsonData.

Upvotes: 0

Jakub Loksa

Reputation: 577

If you still can't get it to work, try checking the page URL you are calling the $.post from.

In my case I was calling this method from localhost:61965/Example and my code was:

$.post('Api/Example/New', { jsonData: jsonData });

Firefox sent this request to localhost:61965/Example/Api/Example/New, which is why my request didn't work.

Upvotes: 0

Md. Nazrul Islam

Reputation: 3017

The Way is here.

If you want specify

dataType: 'json'

Then use,

$('#ddlIssueType').change(function () {


            var dataResponse = { itemTypeId: $('#ddlItemType').val(), transactionType: this.value };

            $.ajax({
                type: 'POST',
                url: '@Url.Action("StoreLocationList", "../InventoryDailyTransaction")',
                data: { 'itemTypeId': $('#ddlItemType').val(), 'transactionType': this.value },
                dataType: 'json',
                cache: false,
                success: function (data) {
                    $('#ddlStoreLocation').get(0).options.length = 0;
                    $('#ddlStoreLocation').get(0).options[0] = new Option('--Select--', '');

                    $.map(data, function (item) {
                        $('#ddlStoreLocation').get(0).options[$('#ddlStoreLocation').get(0).options.length] = new Option(item.Display, item.Value);
                    });
                },
                error: function () {
                    alert("Connection Failed. Please Try Again");
                }
            });

If you do not specify

dataType: 'json'

Then use

$('#ddlItemType').change(function () {

        $.ajax({
            type: 'POST',
            url: '@Url.Action("IssueTypeList", "SalesDept")',
            data: { itemTypeId: this.value },
            cache: false,
            success: function (data) {
                $('#ddlIssueType').get(0).options.length = 0;
                $('#ddlIssueType').get(0).options[0] = new Option('--Select--', '');

                $.map(data, function (item) {
                    $('#ddlIssueType').get(0).options[$('#ddlIssueType').get(0).options.length] = new Option(item.Display, item.Value);
                });
            },
            error: function () {
                alert("Connection Failed. Please Try Again");
            }
        });

If you want specify

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

Then Use

$.ajax({
            type: 'POST',
            url: '@Url.Action("LoadAvailableSerialForItem", "../InventoryDailyTransaction")',
            data: "{'itemCode':'" + itemCode + "','storeLocation':'" + storeLocation + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            cache: false,
            success: function (data) {

                $('#ddlAvailAbleItemSerials').get(0).options.length = 0;
                $('#ddlAvailAbleItemSerials').get(0).options[0] = new Option('--Select--', '');

                $.map(data, function (item) {
                    $('#ddlAvailAbleItemSerials').get(0).options[$('#ddlAvailAbleItemSerials').get(0).options.length] = new Option(item.Display, item.Value);
                });
            },
            error: function () {
                alert("Connection Failed. Please Try Again.");
            }
        });

Upvotes: 0

ngwanevic

Reputation: 13

Thanks for answer this solve my nightmare.

My grid

..
.Selectable()
.ClientEvents(events => events.OnRowSelected("onRowSelected"))
.Render();

<script type="text/javascript">
function onRowSelected(e) {
        id = e.row.cells[0].innerHTML;
        $.post("/<b>MyController</b>/GridSelectionCommand", { "id": id});
    }
</script>

my controller

public ActionResult GridSelectionCommand(string id)
{
     //Here i do what ever i need to do
}

Upvotes: 1

MegaMatt

Reputation: 23763

Answered. I did not have the variable names set correctly after my first Update. I changed the variable name in the Controller to jsonData, so my new Controller header looks like:

public void SaveEntry(string jsonData)

and my post action in JS looks like:

$.post("/Journal/SaveEntry", { jsonData: JSONstring });

JSONstring is a "stringified" (or "serialized") JSON object that I serialized by using the JSON plugin offered at json.org. So:

JSONstring = JSON.stringify(journalEntry);  // journalEntry is my JSON object

So the variable names in the $.post, and in the Controller method need to be the same name, or nothing will work. Good to know. Thanks for the answers.

Upvotes: 26

prodigitalson

Reputation: 60413

Final Answer:

It seems that the variable names were not lining up in his post as i suggested in a comment after sorting out the data formatting issues (assuming that was also an issue.

Actually, make sure youre using the right key name that your serverside code is looking for as well as per Olek's example - ie. if youre code is looking for the variable data then you need to use data as your key. – prodigitalson 6 hours ago

@prodigitalson, that worked. The variable names weren't lining up. Will you post a second answer so I can accept it? Thanks. – Mega Matt 6 hours ago

So he needed to use a key/value pair, and make sure he was grabbing the right variable from the request on the server side.

the data argument has to be key value pair

$.post("/Journal/SaveEntry", {"JSONString": JSONstring});

Upvotes: 5

user186994

Reputation:

It seems dataType is missed. You may also set contentType just in case. Would you try this version?

$.ajax({
    url: '/Journal/SaveEntry',
    type: 'POST',
    data: JSONstring,
    dataType: 'json',
    contentType: 'application/json; charset=utf-8'
});

Cheers.

Upvotes: 2

Sending String Data to MVC Controller using jQuery $.ajax() and $.post()

Answers (7)

Related Questions