【问题标题】:Dismiss and submit form Bootstrap 3关闭并提交表单 Bootstrap 3
【发布时间】:2014-03-27 15:27:25
【问题描述】:

我有一个表单内的引导模式对话框。表单是通过 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 调用中添加了一个预处理器,以便在开始时隐藏所有表单。最后隐藏它们不起作用,因为表单正在替换模式而不是覆盖。在提出适当的解决方案之前,这是一种解决方法

【问题讨论】:

  • 您找到更好的解决方案了吗?

标签: asp.net-mvc html twitter-bootstrap razor


【解决方案1】:

我通常会在表单通过验证并且 AJAX 发布/获取成功后通过 Javascript 关闭它。

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

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

【讨论】:

  • 谢谢查理,我想在没有 Javascript 的情况下这样做,但似乎不是一个选择。我试过这个方法,问题是当AJAX调用返回时,它替换了表单,这意味着使用$('$add-filter-dialog').modal('hide);不起作用。我将它作为 onbegin 事件添加到 AJAX 调用中,因此表单在开始时是隐藏的。然而,这使验证的目的无效。 +1 解决方案
  • 嗨,大卫,感谢您的支持。不过,我不完全理解,如果您的 ajax POST 正确,您正在更新完整模式,对吗?看到你的编辑后,我认为这是要走的路,使用 AjaxForm 提供的钩子。或者代替使用 AjaxForm 自己使用 jQuery 来完成,序列化表单并发送它非常容易,并且您将拥有完全的控制权。
猜你喜欢
  • 1970-01-01
  • 2023-03-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-03-10
  • 2015-10-08
相关资源
最近更新 更多