На моей странице MVC 5 Partial Page 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> 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
(свернув его), по-прежнему показывая модальное диалоговое окно