在我的MVC 5部分页面CSHTML页面上（实际上是部分），我有一个打开模式对话框的按钮。

@model Project.ViewModels.SomeViewModel

<div>
    <div>
        @for (int i = 0; i < Foo.Count(); i++
        {
            <div class="panel-group">
                <div id="foo_@(Model.Id)_@(i)" class="panel panel-default>
                    <div class="panel-heading">
                        <div data-toggle="collapse" data-target="#bar_@(Model.Id)_$(i)">
                            <span>
                                <a href="#" class="btn btn-danger testButton" data-toggle="modal" data-target="#@("DeleteFooModal" + Model.Foo[i].Id)" title="Delete">
                                    <span class="glyphicon glyphicon-trash"></span>&nbsp;Delete
                                </a>
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            @Html.Partial("_FooDelete",Model.Foo[i]))

            <script>
                $(function () {
                    $(".testButton").on('click',function (e) {
                        e.stopPropagation();
                        $@("#DeleteModuleModal" + Model.Foo[i].Id).modal('show');
                    });
                });
            </script>
        }
    </div>
</div>

_FooDelete.cshtml具有要在模式对话框中显示的内容。那里没有问题。

使用Event.preventDefault()并没有什么不同。 e.stopPropagation()本身可以做到，因此按钮绝对不执行任何操作。当我添加$@("#DeleteModuleModal" + Model.Foo[i].Id).modal('show');来使按钮仍然显示模式时，它使之成为可能，从而使点击再次传播到可折叠的div，导致其折叠状态发生切换。

有趣的是，如果我将if (false) { }包裹在modal('show')行周围，它仍然可以运行。不知道为什么会这样。可能是Razor的C＃的组合。

也许还有另一种方法可以使用jQuery显示模式对话框？从历史上看，当我使用Bootbox.js手动添加模式对话框时，此方法就可以正常工作，但在这种情况下不起作用。

TL; DR：：在显示模态对话框的同时，还需要防止单击按钮单击可折叠的div元素（使其崩溃）