Why is JQuery passing null array to MVC controller, instead of string array?

Question

Ok, so my question is two pronged. I am trying to retrieve specific string values from selected rows into a JQuery array:

<script>
var finalCSG=[]; 
$('.checkbox').change(function () {
        var csg = [];
        var checkedRows = $('.checkbox:checked'); 
        $.each(checkedRows, function (index, item) 
        { 
            var row = $(this).closest('tr');
            csg.push(row.find('.connote').text());
        })
        finalCsg = csg;
    });
</script>

My first question: The contents of array 'finalCsg' are supposed to be simple alphanumeric strings, but they contain lots of leading and trailing spaces (when I used console.log to check them out). How do I resolve this?

Now, the second and more pressing issue. I try to pass this array to my MVC controller (with a button click), with the following code:

var url = '@Url.Action("Assign", "TransactionHistory")';
    document.getElementById("AssignButton").onclick = function () { myFunction() };
    function myFunction() {

        $('#myDiv').load(url, { csgList: finalCsg })
    }

'TransactionHistory' is my controller name. Even here, the variable csgList contains the proper array elements (with those spaces I described earlier, though, when I check with console.log). But my controller only gets a null string. The controller is defined like this:

    [HttpPost]
    public ActionResult Assign(List<string> csgList)
    { 
        return Content("Hi");
    }

I initially tried using string[] csgList as the parameter, and then tried List but it always gets a null value (or empty string I guess) from JQuery (The return statement is just to test, does not really mean much now). Some posts mention the use of a 'traditional' keyword, but I am not primarily a front end developer (I am covering for someone at work, with strict deadlines) so I couldn't use that to proper effect.

Any inputs would be greatly beneficial.

Your parameter is an collection, so the data needs to be { [0].csgList: someValue, [1].csgList: anotherValue, .... } (i,e. indexed) or you need to stringify the data and set contentType: 'json' (or you can use traditional: true option. Its easier to do this using $.ajax(). — user3559349
– user3559349, Commented Jan 25, 2017 at 10:37
Either string[] or IEnumerable<string> or List<string>` are all fine. But you cannot pass csgList as it is. It needs to be as I noted in the first comment - e.g. stringified using JSON.stringify() and set the contentType option — user3559349
– user3559349, Commented Jan 25, 2017 at 11:16
But if I need to change JQuery code, where exactly do I make the changes you specified (like stringifying the data, using$.ajax(), setting traditional: true etc.)? — doodles
– doodles, Commented Jan 25, 2017 at 11:19
Ok, thanks a ton! I'll be waiting for that. The answer could save my job...for now, untl I seek a different one which matches my skillset. — doodles
– doodles, Commented Jan 25, 2017 at 11:27

user3559349 · Accepted Answer · 2017-01-25 11:42:45Z

3

Since you passing an array of simple values, then you can use the traditional: true ajax option to correctly bind to your List<string> csgList.

var url = '@Url.Action("Assign", "TransactionHistory")';
var element = $('#myDiv');
$.ajax({
    url: url,
    type: 'POST',
    traditional: true,
    data: { csgList: finalCsg },
    success: function (response) {
        element.html(response);
    }
});

An alternative is to stringify the data and set the contentType option (and this alternative is required if your array contains objects rather than simple values)

$.ajax({
    url: url,
    type: 'POST',
    data: JSON.stringify({ csgList: finalCsg }),
    contentType: "application/json; charset=utf-8",
    success: function (response) {
        element.html(response);
    }
});

answered Jan 25, 2017 at 11:42

user3559349

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

2 Comments

doodles Over a year ago

Thanks a lot! Could you please let me know how your code can be triggered when I click the button with the id 'AssignButton'? Do I need to put your code after document.getElementById("AssignButton").onclick = or can I replace it with $('#AssignmentButton').Click()?

user3559349 Over a year ago

$('#AssignButton').click(function(){ ...ajax call ... })

Collectives™ on Stack Overflow

Why is JQuery passing null array to MVC controller, instead of string array?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related