使用 Ajax 刷新 ASP.NET MVC 中的引导模式答案

【问题标题】：Refreshing the bootstrap modal in ASP.NET MVC with Ajax使用 Ajax 刷新 ASP.NET MVC 中的引导模式
【发布时间】：2014-11-13 14:54:21
【问题描述】：

我有一个引导模式。当我单击提交按钮时，页面会刷新并丢失模式。我想在提交按钮单击后保留模式以显示成功消息或错误消息。我是 MVC 新手我想不通。

这是我的模态

<div class="modal fade" id="signin_modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class=" modal-header">
                Create An Account
            </div>

            <div class="modal-body">

                @using (Html.BeginForm("Login", "Home", FormMethod.Post))
                {
                    <table>


                        <tr><td>@Html.Label("username", null, new { style = " font-size:12px; font-weight:normal; font-family:consolas; " })</td></tr>
                        <tr><td>@Html.TextBox("name", null, new { style = " width:200px; height:30px; " })</td></tr>


                        <tr> </tr>

                        <tr><td>@Html.Label("password", null, new { style = " font-size:12px; font-weight:normal; font-family:consolas; " })</td></tr>
                        <tr><td>@Html.TextBox("password", null, new { style = " width:200px; height:30px " })</td></tr>

                    </table>
                }

            </div>

            <div class="modal-footer">
                <button type="submit" class="btn btn-success">Sign in</button>
                @*<button type="reset" class="btn btn-warning">Reset</button>*@
                <button type="reset" class="btn btn-default">Reset</button>
            </div>

        </div>
    </div>
</div>

【问题讨论】：

标签： javascript asp.net ajax twitter-bootstrap

【解决方案1】：

我知道这是一个老问题，但我会这样做。

如果您使用的是强类型视图模型，您可以添加一个名为 IsModalShown 的属性，即

public class Foo
{
    public bool IsModalShown { get; set; }
}

在您的视图中将其渲染为隐藏的，即

@Html.HiddenFor(m => m.IsModalShown)

当模态打开时，将隐藏值设置为 true，这将使模态状态能够被发送回控制器操作，即

$('#signin_modal').on('show.bs.modal', function (e) {
    $('#IsModalShown').val(true);
})

请注意，以上内容取决于您使用的引导程序版本，但官方网站上还有其他文档

然后将以下内容添加到自动弹出的视图中

$(function(){
    @if(Model.IsModalShown)
    {
        $('#signin_modal').modal('show');
    }
});

弹出窗口中显示的其他字段也可以使用模型中的属性进行设置。

【讨论】：