从模态窗口重定向时的 Toastr 通知答案

【问题标题】：Toastr notifications at the redirect from modal window从模态窗口重定向时的 Toastr 通知
【发布时间】：2017-12-12 21:44:58
【问题描述】：

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

html文件中的模态窗口：

               <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.");
        });
});

【问题讨论】：

你有代码要分享吗？没有任何代码很难提供帮助。
@kmc059000 这是代码。 Tnx。

标签： asp.net toastr

【解决方案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();
    }

主页索引视图（检查您的 viewbag 属性是否存在，如果存在则执行触发 toastr 警报等操作）：

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

【讨论】：

太棒了！它对我有用。但是有没有办法将用户重定向到主页并在那里显示通知？现在，模态和通知类型在指定的时间内相互等待，然后进行重定向。无论如何，谢谢！
您可以添加一个查询字符串参数，您的家庭控制器/索引操作会使用该参数，并设置一个 viewbag 值以在您的索引页面上拾取并触发 toastr 在 js 中准备好的文档上触发。我今天要回家了，但是如果您在尝试实施时仍然遇到问题，那么我可以在早上回来时发布一个示例。
嗨，特拉维斯。我的家庭控制器/索引操作会在每次触发时触发 viewbag/toastr，还是仅与我们正在谈论的特定重定向相关？这个例子将不胜感激。
@GGG 添加了一个在 MVC FRAMEWORK 中传递可空查询字符串的快速示例
谢谢，特拉维斯。经过一些修改，它现在可以工作了。我在下面发布我的最终代码。

【解决方案2】：

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

<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>

Home 控制器/索引方法：

  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>");
                }
            }
        })
});

【讨论】：