将复选框列表发布到表单中的操作

Question

我是网络新手。这是我的html：

<div class="modal fade" id="EditDocumentModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Edit Vacation Types</h4>
            </div>
            <div class="modal-body">
                <form action=@Url.Action(MVC.Admin.Admin.EditFile()) method="post" enctype="multipart/form-data" class="edit-file-form" id="Edit-File-Form">                   
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default close-edit-document-button" data-dismiss="modal">Close</button>
                <button type="button" form="Edit-File-Form" id="edit-Document-submit" class="btn btn-primary">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

这是我的JS：

$(document).on("click", "a.Edit-File-link", function (e) {
        var id = $(this).data('id');
        $.ajax({
            url: '/Admin/Admin/EditFile/' + id,
            cache: false
        }).done(function (data) {
            var div = '<div class = "checkbox-for-edit"></div>';
            $('#Edit-File-Form').prepend(div);
            $(".checkbox-for-edit").attr("data-id", data.documentId);
            for (var i = 0; i < data.checkboxList.length; i++)
            {
                var checkBox = "<input type='checkbox' data-id = '" + data.checkboxList[i].Id + "' id='Edit-document-checkbox" + data.checkboxList[i].Id + "'/>" + data.checkboxList[i].Type + "<br/>";
                $(checkBox).appendTo('.checkbox-for-edit');
                if (data.checkboxList[i].IsSelected == true) {
                    $("#Edit-document-checkbox" + data.checkboxList[i].Id).prop('checked', true);
                }
                else {
                    $("#Edit-document-checkbox" + data.checkboxList[i].Id).prop('checked', false);
                }
            }
            $('#EditDocumentModal').modal('show');
        });
    });

    $(document).on("click", "button.close-edit-document-button", function (e) {
        $(".checkbox-for-edit").remove();
    });

    $("#edit-Document-submit").click(function (e) {
        $.ajax({
            url: '/Admin/Admin/EditFile/',
            type: 'POST',
            data: {
                documentId: $('.checkbox-for-edit').attr('data-id')
                //put checkbox post logic here
            },
            cache: false,
            dataType: "json",
            success: function (data) {
            }
        });        
    });

如您所见，在click Edit-File-link 上，我从action 获得复选框并将它们绘制在引导模式窗口上。这部分工作正常。现在我需要 POST 这个复选框来执行我的操作。这是我的行动：

[HttpPost]
        public virtual ActionResult EditFile(Guid documentId, List<VacationTypeViewModel> checkboxList)
        {
            throw new NotImplementedException();
        }

所以，我发布得很好。但我不知道应该如何处理引导模式窗口上的复选框。

Answer 1

首先，您根本没有为复选框命名，因此它们的值将永远被发布。更新您的复选框创建代码以添加 name="checkboxList[]" 属性。同样，您还需要为每个复选框添加一个 value="" 属性，其中包含您想要回传的 id。

其次，从复选框中返回的唯一内容是您分配的值，而不是您开始使用的完整 VacationTypeViewModel。因此，您的操作参数应该类似于List<int> checkboxList。如果您需要使用回发的 id 表示的实际实例，则需要根据 post 操作中已发布的整数列表从数据库中重新查询它们。