成功后提交展示欢迎模式 [英] After success submit show welcome-modal

问题描述

我有表格

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

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

我在其中放置一些数据(电子邮件，密码等)的地方

where i put some data(email, password, etc.)

我也有这种形式的方法:

Also i have method for this form :

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

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

在那种方法中，我管理模型(尝试创建新用户)，如果一切成功.重定向到操作索引".

In that method i manage model (try to create new user) and if all is success. redirect to action "Index".

问题:创建新用户后，但在重定向之前，我需要显示带有一些文本"Welcome ..."的引导程序模式. 我该怎么做?

Issue : i need to show bootstrap modal with some text "Welcome..." after i create new user but before redirect. How can i do it?

我尝试为该表单调用ajax提交(仅用于显示该模式的成功操作，但未成功)

I try to call ajax submit for that form (only for success action to show that modal, but no success)

推荐答案

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

You may choose to store a message in your model, then on the page, using razor, check if that property has a value, if it does, then execute a script on the bottom of your page.

类似

@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

If you want this to appear before you redirect, then you can use an @Ajax.ActionLink

基本上，您将提交表单，然后在成功时可以设置将执行的javascript函数.此时，您可以调用对话框.

Basically, you would submit your form, then on success, you can set a javascript function that will execute. At this point, you can then call your dialog.

您可以使用引导程序模式的hidden事件来触发重定向

You can use the bootstrap modal's hidden event to then trigger the redirect

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

更新

这是一个非常粗糙的例子，我很快就提出来了.除此之外，它使用Ajax形式:

Here is a very crude example i whipped up real fast. Except this uses an Ajax form:

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

Using a fresh, brand new project, on the Index.cshtml page I added the following

@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中获取文件)

Don't forget to include the jquery.unobtrusive-ajax.min.js file (get it from nuget if you don't have that package installed)

这篇关于成功后提交展示欢迎模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！