从模态重定向的 Toastr 通知 window

Question

我希望在 ASP.net 模态 windows 的 MVC5 中使用 Toastr。现在，当我单击模态 window 上的按钮时，我通过 AJAX 调用将数据发送到我的控制器之一，并被重定向到主页。不幸的是，Toastr 通知在这种情况下不起作用。不过，在开发控制台中，我可以在使用断点时看到通知。但是有了重定向，它就没有时间在页面上看到了。有什么建议可以让它在重定向到另一个页面时保持并可见吗？我在 AJAX 调用的 .done 和 .fail 方法中使用了 Toastr。

html 文件中的模态window：

               <div class="modal fade" id="myConfirmModal" 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" aria-hidden="true">&times;</button>
                            </div>
                            <div id="WorkflowConfirmModal" class="modal-body">
                                Are you sure you want to submit this transaction?
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary" id="myID" data-val="@Url.Action("myAction", "myController", null)" data-redirect="@Url.Action("Index", "Home")">Yes</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>

单独的 .js 文件中的 AXAJ 调用：

    $('#myID').on("click", function () {
    var reviewData = {
        //... my data here
    };
    $.ajax({
            url: $('#myID').data('val'),
            type: 'POST',
            dataType: 'json',
            data: reviewData,
            success: function (data) {
                if (data.success == true) {
                    window.location.href = $('#myID').data('redirect');
                } else {
                    $('#myConfirmModal').modal('hide');
                    bootbox.alert(
                        "<h4>Submit Errors</h4>" +
                        "<hr><p>" + data.errors + "</p>");
                }
            }
        })
        .done(function () {
            toastr.success("Success!");
        })
        .fail(function () {
            toastr.error("Something went wrong.");
        });
});

Answer 1

当您发出 window.location 命令时，您的浏览器已关闭，因此您有两个选择：

通过您的控制器路由一个值 ALLLL 回到您重新加载的视图并在那里启动 toastr。（这很糟糕，不要这样做）
重构您的 JS，以便您的 window.location 调用发生在 toastr hide 事件完成之后。像这样：

toastr.error("Content", "Title", {onHidden : function() { alert("do a redirect inside this function");}});

首次发布者的链接示例：

var n = $('#n').val();
$('#success').click(function () {toastr.success( $('#g').val(), n, { onHidden : function() { toastr.warning( $('#l').val(), n, { onHidden : function() { toastr.error( $('#r').val(), n, {onHidden : function() { alert( $('#d').val());}, "timeOut": "900"});}, "timeOut": "900"});}, "timeOut": "900"});   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css"><input type="hidden" id="n" value="Never Gonna"><input type="hidden" id="g" value="give you up"><input type="hidden" id="r" value="run around"><input type="hidden" id="l" value="let you down"><input type="hidden" id="d" value="and desert you">

<input type="button" value="Click Me" id="success" />

用户请求的第一个选项示例：

查看推送 BTN 的位置（调用控制器操作时只需附加一个查询字符串参数 - 这里我只是向 HOME/Index 发送请求并附加 ConfirmS = true 作为参数）：

<div class="btn btn-primary" onclick="location='/?ConfirmS=true'"> GO </div>

Home Controller Index Action 方法（添加一个可为空的参数，如果它存在并且在这种情况下为真，则设置一个 viewbag 参数以发送到我们的视图）

    public ActionResult Index(bool? ConfirmS)
    {
        if (ConfirmS.HasValue && ConfirmS.Value) { ViewBag.ConfirmSubmitMessage = "weeeee"; }

        return View();
    }

Home Index View（检查您的 viewbag 属性是否存在，如果存在则执行诸如触发 toastr 警报之类的操作）：

@if (ViewBag.ConfirmSubmitMessage != null)
{
    <script>alert('@ViewBag.ConfirmSubmitMessage');</script>
}

Answer 2

我的最终代码。 html 文件中的模态window：

<div class="modal fade" id="myConfirmModal" 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" aria-hidden="true">&times;</button>
                        </div>
                        <div id="WorkflowConfirmModal" class="modal-body">
                            Your text goes here.
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" id="myID" data-val="@Url.Action("myAction", "myController", null)" data-redirect="@Url.Action("Index", "Home", new { ConfirmToastr = true})">Yes</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>

首页Controller/Index方法：

  public ViewResult Index(bool? ConfirmToastr)
        {
            if (ConfirmToastr.HasValue && ConfirmToastr.Value) { ViewBag.ConfirmSubmitMessage = "Foo"; }
            return View("Index");
        }

Home/Index()的Index.cshtml。我在这里使用 CDN，但本地 taostr.js 和 taostr.css 可以解决问题：

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">

@if (ViewBag.ConfirmSubmitMessage != null)
{

    <script type="text/javascript">
        $(function () {
            toastr.success("Success.", "Thanks.", {
                timeOut: 3000,
                onHidden: function () {
                    window.history.pushState("Name", "Title", "@Url.Action("Index", "Home")");
                }
            });
        });
    </script>
 }

单独的 .js 文件中的 AXAJ 调用：

$('#myID').on("click", function () {
    var reviewData = {
        //... your data here
    };
    $.ajax({
            url: $('#myID').data('val'),
            type: 'POST',
            dataType: 'json',
            data: reviewData,
            success: function (data) {
                if (data.success == true) {
                    window.location.href = $('#myID').data('redirect');
                } else {
                    $('#myConfirmModal').modal('hide');
                    bootbox.alert(
                        "<h4>Submit Errors</h4>" +
                        "<hr><p>" + data.errors + "</p>");
                }
            }
        })
});

从模态重定向的 Toastr 通知 window

Toastr notifications at the redirect from modal window

asp.net

toastr