引导模式在 ASP MVC 5 中消失，而不是从双重加载引导中消失答案

【问题标题】：Bootstrap modal disappearing in ASP MVC 5, and not from double loading bootstrap引导模式在 ASP MVC 5 中消失，而不是从双重加载引导中消失
【发布时间】：2018-03-10 17:36:48
【问题描述】：

我正在从 Javascript 切换模型，但它立即消失了。我没有加载引导模式（这是人们遇到的问题之一）。另外，我尝试消除 bootstrap.min.js，但这也没有解决它。我试过.modal()、.modal('show') 和.modal('toggle')。此外，这是一个 VisualStudio 初始化的 MVC 项目，所以我没有将所有 jquery 和引导程序加载到位。

编辑这里的另一个复杂性是我只希望在提交成功时弹出模式。我有一个想法：让表单提交，控制器在成功提交后重定向到另一个页面——库存清单。从“创建”控制器，构建一个可以告诉库存列表页面添加是否成功的视图包。然后将模式放在库存列表页面上。并不是真正的问题解决方案——一个完整的解决方法。

模态

<div id="confirmAddedToInventoryModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Item Added to Inventory</h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

Javascript

<script type="text/javascript">
    $(document).ready(function () {
        $('#create-form').on('submit', function () { $('#confirmAddedToInventoryModal').modal('toggle') });
    })
</script>

新的 javascript 尝试

    $(function () {
        $('#create-button').on('click', function () {
            $('#confirmAddedToInventoryModal').modal('toggle');
        });

        $('#confirmAddedToInventoryModal').modal().hide(function () {
            $('create-form').submit();
        });
    });

模式在页面加载时打开，而不仅仅是按钮点击。

【问题讨论】：

您是要控制表单的提交，还是只是显示某个操作已成功完成的确认信息？
确认操作成功完成。我意识到这里的一个基本问题是控制器重定向到另一个页面，而不是返回到带有表单的页面。

标签： jquery asp.net-mvc twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

由于您似乎正在尝试处理提交事件，因此您需要取消该事件。否则，页面将继续提交。与原生警报不同，引导模式不会阻塞。

<script>
    $(function () {
        // Add the 'e' parameter, so that we can capture the event
        $('#create-form').on('submit', function (e) {
            // prevent the event
            e.preventDefault();

            $('#confirmAddedToInventoryModal').modal('toggle');
        });
    })
</script>

这样做的缺点是您需要在处理完“确认”对话框后手动提交表单。

【讨论】：

有道理！所以，我希望表单能够真正提交。那么我是否需要将表单提交绑定到模态关闭事件？
@abalter 是和否。您已经正确处理了该事件，您只需要一种重新触发提交事件的方法，或者您可以使用其中一种 $.ajax 方法通过 JavaScript 提交表单的内容。
@abalter 一种选择是不使用提交按钮，而是使用带有type="button"（不会触发提交事件）的按钮作为表单中的“提交”按钮。不过，这不会处理通过其他方式提交的表单。
我实施了第二个建议，但是遇到了问题。我将模态触发到按钮，然后将表单提交到.hide 事件。出于某种原因，模式会在页面加载后立即显示，这没有任何意义（上面的代码）。但是还有一个我没有想到的问题。如果提交成功，我只希望模式出现。这让我觉得我应该使用 Ajax。但是，控制器 post 方法在使用表单数据更新数据库后重定向到另一个页面。这一切都让我陷入了困境。
我正在尝试做的事情可能是不可能的——检查表单是否正确提交而不将控制权交给控制器。虽然，知道表单已经过验证就足够了。但是我是通过模型注解来做的，所以不知道怎么拦截。

【解决方案2】：

这也发生在我身上，我只是删除了布局上的脚本链接 ~/Scripts/bootstrap.js 而且效果很好！

【讨论】：

【解决方案3】：

将按钮标签更改为锚标签：

 <a type="button" class="close" data-dismiss="modal">&times;</a>

【讨论】：