How to pass a multi-dimensional array to ASP.NET MVC 3 JsonResult Controller

Question

I have two javascript arrays that I need to pass into an MVC 3 controller and then input the values into a database. I have two lists of checkboxes and a change event for both list containers, to grab their checkbox id's and checked values and then add them to the arrays.

  @{
        ViewBag.Title = "JS Arrays in ASP.NET MVC 3";
    }

<script type="text/javascript">
    $(document).ready(function () {
        $("#tabs").tabs();
    });
</script>
<p>Use the form below to check items from the lists and save them to the database.</p>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Pre-Accept</a></li>
        <li><a href="#tabs-2">Post-Accept</a></li>
    </ul>
    <div id="tabs-1">
        <div id="checklist1">
            <table>
                <tbody>
                    <tr>

                        <td>
                            <input type="checkbox" id="StudentPreAccept.Transcripts" />
                        </td>
                        <td>Transcripts
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" id="StudentPreAccept.BiographicalInfo" />
                        </td>
                        <td>Biographical Info
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" id="StudentPreAccept.PersonalEssay" />
                        </td>
                        <td>Personal Essay
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <br />
        <button id="savePreAccept" onclick="saveAcceptList();">Save Pre-Accept</button>
    </div>
    <div id="tabs-2">
        <div id="checklist2">
            <table>
                <tbody>
                    <tr>

                        <td>
                            <input type="checkbox" id="StudentPostAccept.EnrollmentFee" />
                        </td>
                        <td>Enrollment Fee
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" id="StudentPostAccept.Photo" />
                        </td>
                        <td>Photo
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" id="StudentPostAccept.TravelItinerary" />
                        </td>
                        <td>Travel Itinerary
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <br />
        <button id="savePostAccept" onclick="saveAcceptList();">Save Post-Accept</button>
    </div>
</div>
<div id="results"></div>

<script type="text/javascript">
    var preAcceptArray = { };
    var postAcceptArray = { };

    $(" #checklist1 [type='checkbox']").change(function() {                       
        // add to the preAcceptArray
        var id = $(this).attr('id');
        var checked = $(this).is(':checked') ? 'True' : 'False';
        preAcceptArray[id] = checked;

        console.log(JSON.stringify(preAcceptArray));
    });
    $(" #checklist2 [type='checkbox']").change(function () {
        // add to the postAcceptArray
        var id = $(this).attr('id');
        var checked = $(this).is(':checked') ? 'True' : 'False';
        postAcceptArray[id] = checked;

        console.log(JSON.stringify(postAcceptArray));
    });

    function saveAcceptList() {
        $.post('/Home/UpdateLists', {
                preAcceptList  : preAcceptArray,
                postAcceptList : postAcceptArray
            }, function(response) {
                $("#results").html(response);
            }, "json");
    }

</script>

Then on the controller side of things I have a JsonResult action that takes two parameters as input.

 [HttpPost]
    public JsonResult UpdateLists(string[][] preAcceptList, string[][] postAcceptList)
    {
        // do something with the lists             


        // return the result
        return Json("List(s) updated successfully.", JsonRequestBehavior.AllowGet);
    }

The problem is no matter what type of parameter I pass-in, I can't get the values from the ajax post. Should I be passing them in as JSON and then just parsing the JSON?

I know I'm missing something and any help would be appreciated.

Answer 1

try this, you have some errors in the selectors for the checkbox and more, and as your using jQuery, you can assign the click event for buttons:

JS:

$(function () {

    var save_EventClickButton = function (event) {

        var data = {}, index = 0;

        $('#checklist1 input[type="checkbox"]').each(function (i, el) {
            data['PreAcceptList[' + index + '].Key'] = $(this).attr('id');
            data['PreAcceptList[' + (index++) + '].Value'] = $(this).is(':checked') ? 'true' : 'false';
        });

        $('#checklist2 input[type="checkbox"]').each(function (i, el) {
            data['PostAcceptList[' + index + '].Key'] = $(this).attr('id');
            data['PostAcceptList[' + (index++) + '].Value'] = $(this).is(':checked') ? 'true' : 'false';
        });

        //data['PreAcceptList'] = preAcceptArray;
        //data['PostAcceptList'] = postAcceptArray;

        $.post('/Grilla/UpdateLists', data, function (response) {
            $("#results").html(response);
        }, "json");

        return false;
    };

    $('#savePostAccept').bind('click', save_EventClickButton);
    $('#savePreAccept').bind('click', save_EventClickButton);

});

HTML (only buttons):

    ...
    <button id="savePreAccept">Save Pre-Accept</button>
    ...
    <button id="savePostAccept">Save Post-Accept</button>
    ...  

.NET (C#):

    [HttpPost]
    public JsonResult UpdateLists(IDictionary<string, string> PreAcceptList, IDictionary<string, string> PostAcceptList)
    {
        return Json("List(s) updated successfully.");
    }