javascript - 重定向到 ASP MVC 中的另一个页面后，如何使 Toastr Notification 保持事件状态

Question

我正在开发一个 ASP MVC 5 应用程序，我正在解决 Toast 通知的显示问题。

更新用户信息后出现toast通知以确认操作成功。

不幸的是，它在加载下一页后迅速消失(在 2 秒内)。我认为这是由于使用了服务器端代码(在本例中为 C#)，整个页面重新加载，包括 javascript 文件。这就是 toastr 也消失的原因。

有什么办法可以让它保存得更久一点吗？

我试图将必要的信息传递到下一页，以便第二页知道显示 toastr 而不是 page1，但它没有用。

这是代码片段:

查看:

 @using (Html.BeginForm("Edit", "Client", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
    {
        <input type="submit" value="Save" class="btn btn-default" onclick="Update()">
    }

        <script src="/template/web/js/jquery-2.2.3.min.js"></script>
        <script src="~/Scripts/toastr.js"></script>
        <script>

            function Update() {
                toastr.success("Your infos are updated with succes !");
            }
        </script>

Controller :

[HttpPost]
    public ActionResult Edit(int id, Client cmodel)
    {
        try
        {

                ClientManagement cdb = new ClientManagement();
            if (cdb.UpdateDetails(cmodel))
            {
                ViewBag.Message = "Client Details Edited Successfully";
            }

            return RedirectToAction("Profil");
        }
        catch
        {
           return View();
        }
    }

简介:

 public ActionResult Profil()
    {
        ClientManagement dbhandle = new ClientManagement();
        ViewBag.Message = TempData["Message"];
        return View(dbhandle.GetClientsInfo());
    }

在查看个人资料中(页面底部):

 <link href="~/Content/toastr.min.css" rel="stylesheet" />
script src="~/scripts/toastr.js"></script>
        <script src="~/scripts/toastr.min.js"></script>

     @if (ViewBag.Message != null)
    {
        <script type="text/javascript">toastr.success("@ViewBag.Message");</script>
    }

Answer 1

如果您想将一次性消息从一个操作方法传递到另一个操作方法，您将需要使用TempData.

[HttpPost]
public ActionResult Edit(int id, Client cmodel)
{
   try
   {
      ClientManagement cdb = new ClientManagement();
      if (cdb.UpdateDetails(cmodel))
      {
         TempData["Message"] = "Client Details Edited Successfully";
      }
      return RedirectToAction("Profil");
   }
   catch
   {
      return View(cmodel);
   }
}

然后您可以在操作方法或 View 中的下一页检索它。请注意，它会在您阅读后在请求结束时被清除。

Profil.cshtml

@if (TempData["Message"] != null)
{
   <script type="text/javascript">toastr.success("@TempData["Message"]");</script>
}

更新

以上代码有效。如果您使用默认的 ASP.NET MVC 布局，请确保将脚本放在 Scripts 部分，以便它在 jQuery 之后呈现。

@section Scripts {
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" />
    @if (TempData["Message"] != null)
    {
        <script type="text/javascript">toastr.success("@TempData["Message"]");</script>
    }
}

仅供引用:如果您在其他地方使用 toastr，您可能需要考虑将它们与其他脚本和样式捆绑和压缩。