Question

我希望在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>

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

    $('#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，以便在toastr hide事件结束后进行window.location调用。像这样：

toastr.error（＆＃34;内容＆＃34;，＆＃34;标题＆＃34;，{onHidden：function（）{alert（＆＃34;在此功能内进行重定向＆＃34;）;} }）;

链式第一次海报的例子：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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

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

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

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

家庭控制器/索引方法：

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

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

$('#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通知

2 个答案: