解散并提交表格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