如何將多維數組傳遞給ASP.NET MVC 3 JsonResult控制器

Question

我有兩個javascript數組，我需要傳遞到MVC 3控制器，然后將值輸入到數據庫中。 我有兩個復選框列表和兩個列表容器的更改事件，以獲取它們的復選框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>

然后在控制器方面我有一個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帖子中獲取值。 我應該將它們作為JSON傳遞，然后只解析JSON嗎？

我知道我錯過了什么，任何幫助都會受到贊賞。

Answer 1

試試這個，你在復選框的選擇器中有一些錯誤等等，並且當你使用jQuery時，你可以為按鈕分配click事件：

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