javascript - 使用 Ajax 刷新 ASP.NET MVC 中的 Bootstrap 模式

Question

我有一个 Bootstrap 模态。当我单击提交按钮时，页面会刷新并丢失模态。我想在提交按钮单击后继续使用模态以显示成功消息或错误消息。我是 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> 

Answer 1

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

假设您使用的是强类型 View 模型，您可以添加一个名为 IsModalShown 的属性，即

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

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

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

当打开模态时，将隐藏值设置为 true，这将使模态状态回发到 Controller 操作，即

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

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

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

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

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