1

MVC 3 コントローラーに渡してから値をデータベースに入力する必要がある 2 つの JavaScript 配列があります。チェックボックスの 2 つのリストと両方のリスト コンテナーの変更イベントがあり、チェックボックス 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>

次に、コントローラー側に、2 つのパラメーターを入力として受け取る 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 を解析する必要がありますか?

私は何かが欠けていることを知っています。

4

1 に答える 1

3

これを試してみてください。チェックボックスなどのセレクターにいくつかのエラーがあり、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.");
    }
于 2012-11-08T22:47:32.540 に答える