asp.net-mvc - 关闭并提交表单 Bootstrap 3

Question

我有一个表单内的 Bootstrap 模式对话框。表单通过 AJAX 提交。我希望 submit 按钮也关闭模态(否则我最终会保留模态覆盖)

模态代码是:

@using (Ajax.BeginForm("SaveConfiguredReport", new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "report-details", OnBegin="preProcessing" }))
{
    <div class="modal fade" id="add-filter-dialog" tabindex="-1" role="dialog" aria-labelledby="add-filter-dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>Add a Filter</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>

                <div class="modal-body">
                    <p>Adding filters allows you to sort what data will be included in the report. These filters will be default for all ongoing usage of this report.</p>
                    <div id="field-templates"></div>
                    <input type="hidden" id="field-template-id" name="FieldTemplateID" />

                    @Html.DropDownList("OperatorID", Model.Operators.Select(x => new SelectListItem { Text = x.Name, Value = x.OperatorID.ToString() }))

                    <input type="text" name="FilterValue" class="typeahead" id="filter-value" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success" data-dismiss="modal" name="Command" value="Add">Add Filter</button>
                </div>
            </div>
        </div>
    </div>
}
<!-- other code -->
<script>
    function preProcessing() {
        $('.modal').each(function (index, element) {
            $(element).modal('hide');
        });
    }
</script>

如果我在提交按钮上保留 data-dismiss 属性，它将关闭表单但不提交。如果我删除它，表单将被提交但不会被驳回。有人有运气吗？

编辑
我在 AJAX 调用中添加了一个预处理器以在开始时隐藏所有表单。最后隐藏它们是行不通的，因为表单正在替换模态而不是覆盖。在建议适当的解决方案之前，这是一种解决方法

Answer 1

我通常做的是在验证表单并且 AJAX post/get 成功后通过 Javascript 关闭它。

$('#add-filter-dialog').modal('hide');

在此处查看更多选项 http://getbootstrap.com/javascript/#modals-usage