JSON doesn't post array with 1 item in MVC 4

Question

I have my MVC 4 project. I have 2 select with multiple options.

<select id="ReportDetailsSelectList" class="form-control ListBox valid" size="10" multiple="">
    <option value="ADMN">Administration</option>
    <option value="ARC">Adminstrative Resource Center</option>
    <option value="BALS">Balance Sheet</option>
</select>

<select id="ReportDetailsSelectList2" class="form-control ListBox valid" size="10" multiple="">
    <option value="ATL">Atlanta</option>
    <option value="BALT">Baltimore</option>
    <option value="BETH">Betheseda</option>
    <option value="CAMD">Camden</option>
</select>

<button id="btnSubmit" name="btnSubmit" type="button" class="btn btn-primary">Submit</button>

I need to collect all selected values from 2 select lists and post it in my Action

Here's my JavaScript Code:

$('#btnSubmit').click(function () {
    var result = [];
    // Go through Details List
    $('select#ReportDetailsSelectList option:selected').each(function () {
        // Collect Name and Value
        var item = {};
        item.Key = $(this).val();
        item.Value = $(this).text();
        result.push(item);
    });

    var result2 = [];
    // Go through Details List
    $('select#ReportDetailsSelectList2 option:selected').each(function () {
        // Collect Name and Value
        var item = {};
        item.Key = $(this).val();
        item.Value = $(this).text();
        result2.push(item);
    });

    CollectPostData(result, result2);
});

function CollectPostData(result, result2) {
    // Post collected data to the action
    $.ajax({
        url: "/Home/GenerateReport",
        type: "POST",
        data: JSON.stringify({ 'detailList': result, 'detailList2': result2 }),
        dataType: "json",
        traditional: true,
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            if (data.status == "Success") {
                alert(data.message);
            } else {
                alert("Error occurs on the Database level!");
            }
        },
        error: function () {
            alert("An error has occurred!!!");
        }
    });
}

I have a simple class to store my objects:

public class DetailList
{
    public string Key { get; set; }
    public string Value { get; set; }
}

And here's my Controller ActionResult:

[HttpPost]
public ActionResult GenerateReport(DetailList[] detailList, DetailList[] detailList2)
{
    return Json(new { status = "Success", message = "Success" }, JsonRequestBehavior.AllowGet);
}

And here's start my problem... A few scenarios:

1) I have multiple option selected in both lists - data posted correctly:

enter image description here

2) Multiple options in 1st list, 1 option in 2nd list - data posted correctly

enter image description here

3) 1 option in 1st list, 1 option in 2nd list - First array is null, but the second array posted correctly:

enter image description here

I have no idea why is that happening? I collect both my arrays absolutely the same way and I post it the same way, but for some reasons, it posted differently. I checked in Firefox debugger and I see that all data has collected just fine. Both result and result2 has data, even with 1 item...

Anyone, please help, what am I doing wrong here?

I couldn't reproduce your problem, scenario #3 works correctly for me. Maybe there's something else going on in your view? Try clearing your browser's cache as well. — Jim Skerritt
– Jim Skerritt, Commented Feb 12, 2015 at 16:36
I did clean up cache... Doesn't work for me. Nothing really else is going on in the view. There's few datepickers else and that's it... — Bryuk
– Bryuk, Commented Feb 12, 2015 at 17:06
Alright, got it happening for me now. I was using MVC 5, and it looks like this problem is specific to MVC 4. — Jim Skerritt
– Jim Skerritt, Commented Feb 12, 2015 at 19:04

Community · Accepted Answer · 2017-05-23 12:05:41Z

Got it to work.

The problem is that MVC doesn't like when you have multiple parameters for a POST, at least not by default in MVC 4. It expects that all of your POST data will be sent as one object.

Here are the changes I made to your code.

Add the following class:

public class GenerateReportViewModel
{
    public DetailList[] ListA { get; set; }
    public DetailList[] ListB { get; set; }
}

Change your action method signature:

[HttpPost]
public ActionResult GenerateReport(GenerateReportViewModel viewModel)
{
    return Json(new { status = "Success", message = "Success" }, JsonRequestBehavior.AllowGet);
}

Change your CollectPostData JavaScript function:

function CollectPostData(result, result2) {
    // Post collected data to the action
    $.ajax({
        url: "/Home/GenerateReport",
        type: "POST",
        data: JSON.stringify({
            ListA: result,
            ListB: result2
        }),
        dataType: "json",
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            if (data.status == "Success") {
                alert(data.message);
            } else {
                alert("Error occurs on the Database level!");
            }
        },
        error: function () {
            alert("An error has occurred!!!");
        }
    });
}

MVC 5 seems to have made some changes that allow you be more flexible in the patterns you choose, which is why I wasn't able to reproduce it there. Generally, it's easier to manage your POST data if it's all in one object anyway. Your action method will have fewer parameters (one).

Here's another similar SO question that may provide more insight:

Post multiple parameters to MVC Controller using C#

OMG! Thanks! You made it! The problem was that I took this code from another MVC 5 project and was so confused, why it's not working...

Collectives™ on Stack Overflow

JSON doesn't post array with 1 item in MVC 4

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related