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();
        }

所以，我发布的很好。但是我不知道我应该如何处理bootstrap模态窗口上的复选框。

Answer 1

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

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

从表单发布复选框列表到操作

1 个答案: