AJAX Post to ASP.NET MVC Controller action method - Null parameters

Question

I want to post with AJAX a string array with some data to my controller. It's just plain text, and my controller is always receiving a null parameter. I understand i shouldn't stringify since i don't use a model or viewmodel.

I searched other questions but most refer to forms and use viewmodel properties.

Here is my code:

Controller

[HttpPost]
public ActionResult FirstAjax(string[] listValues)
{
    //TODO
    return Json("Reached the controller", JsonRequestBehavior.AllowGet);
}

I added that JSON return to check if I was actually hitting the controller and I receive the message on my view.

AJAX POST

var listValues = [];
listElements.each(function (index, element) {
    listValues.push(element.innerText);
});

var serviceURL = '/Products/FirstAjax';

$.ajax({
    type: "POST",
    url: serviceURL,
    data: listValues,
    success: successFunc,
    error: errorFunc
});

function successFunc(data, status) {
    alert(data);
}

function errorFunc() {
    alert('error');
}

Since my list is sortable with drag & drop, the listValues is filled with the text value of the <li> items in the order when the button is clicked.

View

<div class="demo">

  <ul id="sortable">
    <li class="ui-state-default">Cat</li>
    <li class="ui-state-default">Dog</li>
    <li class="ui-state-default">Tiger</li>
  </ul>
  <button type="button" onclick="display_array();">Ajax Post!</button>

</div><!-- End demo -->

In your ajax, for your data, try this - "data : {listValues: listValues}". The first parameter in the curly brackets being the parameter in controller and second one being your javascript array. — Daniaal
– Daniaal, Commented Aug 20, 2018 at 16:30
dam i should have gave it as an answer! Oh well glad it worked amigo. — Daniaal
– Daniaal, Commented Aug 21, 2018 at 8:04

TanvirArjel · Accepted Answer · 2018-08-20 17:44:06Z

0

Write your Ajax POST method as follows:

$(document).ready(function(){

    var listValues = [];
    listElements.each(function (index, element) {
          listValues.push(element.innerText);
    });

    var serviceURL = '/Products/FirstAjax';

    $.ajax({
       type: "POST",
       url: serviceURL,
       data: {listValues: listValues},
       contentType: 'application/json'
       success: successFunc,
       error: errorFunc
    });

    function successFunc(data, status) {
       alert(data);
    }

    function errorFunc() {
       alert('error');
    }
});

Hope this will solve your problem.

edited Aug 20, 2018 at 17:44

answered Aug 20, 2018 at 17:19

TanvirArjel

32.5k14 gold badges89 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dongdong · Accepted Answer · 2018-08-20 17:12:54Z

0

Change your ajax options to:

$.ajax({
    ...
    data: {listValues: listValues},
    ...
});

the reason is: server is expecting a posted object/query string that's same naming with parameters. the data is converted to listValues=...&otherParams=... in query string. if you post an array without specifying parameter name, JQuery cannot map them correctly

answered Aug 20, 2018 at 17:12

Dongdong

2,53824 silver badges34 bronze badges

Comments

Win · Accepted Answer · 2018-08-20 17:41:59Z

0

You need contentType as application/json and use JSON.stringify to convert JavaScript object to JSON string.

$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: serviceURL,
    data: JSON.stringify({ listValues: listValues}),
    success: successFunc,
    error: errorFunc
});

answered Aug 20, 2018 at 17:41

Win

62.4k13 gold badges106 silver badges190 bronze badges

Collectives™ on Stack Overflow

AJAX Post to ASP.NET MVC Controller action method - Null parameters

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related