c# - 如何将多维数组传递给 ASP.NET MVC 3 JsonResult Controller

Question

我有两个 JavaScript 数组，需要将它们传递到 MVC 3 Controller 中，然后将值输入到数据库中。我有两个复选框列表和两个列表容器的更改事件，以获取它们的复选框 ID 和选中的值，然后将它们添加到数组中。

  @{
        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>

然后在 Controller 方面，我有一个 JsonResult 操作，它接受两个参数作为输入。

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


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

问题是无论我传入什么类型的参数，我都无法从ajax post中获取值。我应该将它们作为 JSON 传递，然后只解析 JSON 吗？

我知道我错过了一些东西，任何帮助将不胜感激。

Answer 1

尝试一下，您在复选框等的选择器中遇到了一些错误，并且当您使用 jQuery 时，您可以为按钮分配单击事件:

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(仅限按钮):

    ...
    <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.");
    }