asp.net-mvc - 从 MVC Razor 模型调用 Bootstrap 3 模态？

Question

目前我正在使用一个模型，在从表单发回后，我查看模型属性以显示警报。但是，我现在需要显示一个 Modal。我知道我需要在页面底部显示一个模态 div，但我不知道如何从 Razor 模型中调用它。

研究我发现的所有想法是按钮单击或某些单击事件会调用某些 JS 并显示模式的地方。我找不到任何关于如何从 View 中打开它的信息。

这个概念是最终用户将单击一个按钮，基本上就像一个时间戳一样进入数据库。在 Controller 中，我设置了一个 MessageType 属性，然后基于该属性，如果有错误，我会显示 Bootstrap 错误警报，如果一切正常，我会显示成功警报。现在我需要打开一个模态而不是调用成功警报。

这是我现在使用警报的方式。这是在我的 MVC View 中。有没有办法做同样的事情，而不是警报打开一个模态？

@if (Model.MessageType == "PUNCH")
{
    <div class="alert alert-success">
        <h3>Punch accepted at <strong>@Model.CurrentTime.</strong></h3>
    </div>
}

Answer 1

与您所做的类似，您可以执行显示模式对话框的 javascript 代码。

假设您已将所需的 Bootstrap 文件加载到您的页面，

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
                                                       aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" 
                    aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

@section Scripts
{
 @if (Model.MessageType == "PUNCH")
 {
    <script>
        $('#myModal').modal();
    </script>
 }
}