Question

我有表格

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new {id = "registrationForm"})) {...}

我放了一些数据（电子邮件，密码等）

我也有这种形式的方法：

[HttpPost] [AllowAnonymous] [ValidateAntiForgeryToken] public ActionResult Register(RegisterViewModel model) {... return RedirectToAction("Index");}

在该方法中，我管理模型（尝试创建新用户），如果一切都成功。重定向到行动“索引”。

问题：我需要在创建新用户之后但在重定向之前显示带有一些文本“欢迎...”的bootstrap模式。我该怎么做？

我尝试为该表单调用ajax提交（仅用于显示该模式的成功操作，但没有成功）

Answer 1

您可以选择在模型中存储消息，然后在页面上使用剃刀，检查该属性是否具有值，如果存在，则执行页面底部的脚本。

类似

@if (Model.Message != null){
<script>
    //set the message on the dialog
    ...
    //call bootstrap modal
    $('#myModal').modal(options);
</script>
}

见这里：http://getbootstrap.com/javascript/#modals

编辑：如果要在重定向之前显示它，则可以使用@ Ajax.ActionLink

基本上，你会提交你的表格，然后成功，你可以设置一个将执行的javascript函数。此时，您可以调用对话框。

您可以使用bootstrap模式的隐藏事件然后触发重定向

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something... like a redirect
})

<强>更新

这是一个非常粗略的例子，我真的很快。除此之外使用Ajax表单：

使用全新的全新项目，在Index.cshtml页面上添加了以下内容

@using (Ajax.BeginForm("Register", "Home", new AjaxOptions() { HttpMethod = "Post", OnSuccess = "success" }))
{
    @Html.TextBox("name")

    <button type="submit" >Register</button>
}

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                Welcome, <span id="username"></span>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>

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



@section scripts{
    <script>
        function success() {

            $('#username').text($('#name').val());

            $('#myModal').modal();

            $('#myModal').on('hidden.bs.modal', function (e) {
                window.location = "/Home/About";
            });

        }
    </script>
}

控制器：

[HttpPost]
public ActionResult Register(string name)
{
    return View("Index");
}

不要忘记包含jquery.unobtrusive-ajax.min.js文件（如果您没有安装该软件包，请从nuget获取）

成功后提交show welcome-modal

1 个答案: