如何将多维数组传递给ASP.NET MVC 3 JsonResult控制器

时间:2012-11-08 19:24:01

标签: c# jquery ajax asp.net-mvc json

我有两个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吗?

我知道我错过了一些东西,任何帮助都会受到赞赏。

1 个答案:

答案 0 :(得分:3)

试试这个,你在复选框的选择器中有一些错误等等,并且当你使用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.");
    }