ASP.NET MVC中的Toast通知

Question

我在我的MVC应用程序中使用Toastr通知插件来显示状态消息（成功的编辑、更新、删除等），我想知道是否有一种简单的方法来在Partial视图中放置一些逻辑并将其放在我的Layout或每个单独的视图中。

Partial

<script type="text/javascript">
    $(document).ready(function () {
        @if (ViewBag.Success == true) { 
            @:toastr.success("@ViewBag.Message");
        } else if (ViewBag.Success == false) {
            @:toastr.error("@ViewBag.Message");      
        }
    });
</script>

视图

//Doesn't work
@Html.Partial("_ToastPartial")

//Tried this directly in the view instead of using the partial, didn't work
@if (ViewBag.Success == true) { 
    @:toastr.success("@ViewBag.Message");
} else if (ViewBag.Success == false) {
    @:toastr.error("@ViewBag.Message");  
}

Controller

    public ActionResult SomethingAwesome(MyViewModel model)
    {
        ViewBag.Success = true;
        ViewBag.Message = "Employee successfully added";

        return RedirectToAction("Index");
    }

这不起作用。是否可能将像这样的内容包装在部分中，或者MVC会剥离<script>标记？我能否在View中的脚本块内呈现部分？

我甚至尝试直接将代码移动到View中的脚本标记中，然后在Controller上设置值，似乎什么也没有发生。

需要帮助吗？当视图再次呈现时，ViewBag是否被清除？我应该使用TempData吗？我可以将Success和Message属性移入我的ViewModel中，并像这样将其传递到我的View中吗？

public ActionResult Index(MyViewModel model) 
{
    //Do something with model.Success 
}

我的解决方案

我结合了几个答案，最终得出了这个网站部分的解决方案，并且很可能会在其他部分使用被接受的答案方法。

我添加了以下内容到我的ViewModel中：

public bool Success { get; set; } 
public string Message { get; set; } 

我将Action返回视图ViewModel的Index视图，当所有属性都设置后。

//fetch the updated data and shove into ViewModel here
viewModel.Success = true;
viewModel.Message = "Employee successfully checked in";

return View("Index", viewModel);

然后在我的视图中使用Razor语法即可。

@if (Model.Success) { 
    @:toastr.success("@Model.Message");
} else if (!Model.Success && !String.IsNullOrWhiteSpace(Model.Message)) {
    @:toastr.error("@Model.Message");   
}

作为额外的奖励（尽管实现似乎有些粗糙），在我的document.Ready块中呈现Partial。

@Html.Partial("_ToastPartial", Model)

将Toastr通知代码移动到局部视图中

@if (Model.Success) { 
    @:toastr.success("@Model.Message");
} else if (!Model.Success && !String.IsNullOrWhiteSpace(Model.Message)) {
    @:toastr.error("@Model.Message");   
}

最有可能的是我会设置一个接口，其中包含 Message 和 Success 属性，并使任何将使用部分实现该接口的 ViewModel 实现它

- dgarbacz

---

首先，您应该在脚本标签中添加 type="text/javascript"，并且您的 JavaScript 中缺少引号：@:toastr.success("@ViewBag.Message")。 - nemesv

谢谢。我修改了代码并将更新问题。它并没有像我想象的那样神奇地工作。 - dgarbacz

你的浏览器控制台是什么样子的？有任何错误或警告吗？你可以通过在 ready 函数中插入 alert('@ViewBag.Message') 来调试你的 ViewBag 是否有消息。 - Pete

我有一种感觉，当Index重定向后，ViewBag缺少值。每次加载时警报“@ViewBag.Message”都没有任何反应。 - dgarbacz

尝试将你的JavaScript放在主视图中。 - Ron Saylor

Answer 1

您的控制器正在执行RedirectToAction。ViewBag和ViewData仅在当前请求中存在。只有在重定向时才使用TempData： http://rachelappel.com/when-to-use-viewbag-viewdata-or-tempdata-in-asp.net-mvc-3-applications清楚地指出了这一点：

“[...] TempData对象适用于一个基本场景：在当前HTTP请求和下一个HTTP请求之间传递数据。”

- Pete

---

这种方法肯定能解决我的问题，但是我决定使用不同的方法，并已经更新了我的问题以反映出来。 - dgarbacz

Answer 2

尝试使用NtoastNotify库进行ASP.NET Core实现。 （免责声明：此处作者）

- Nabin Karki Thapa

---

我尝试使用你们的库，但是我正在使用mvc版本1.0.0，它给出了警告，说这个库与此版本不兼容，需要更新mvc。但我无法更新mvc版本。有其他解决方法吗？ - Naila Akbar

@NullPointer 这个库适用于 ASP.NET Core MVC。 - Nabin Karki Thapa

是的，我也在谈论ASP.NET Core MVC。 - Naila Akbar

你能给我展示一下你的 Web 项目的 .csproj 文件吗？ - Nabin Karki Thapa

如果你的 Web 应用程序针对 netcoreapp1.1 或更高版本，则可以使用此库。请查看此示例 .csproj https://github.com/nabinked/NToastNotify/blob/master/sample/NToastNotify.Web/NToastNotify.Web.csproj，其中使用了此库。 - Nabin Karki Thapa

Answer 3

使用这个NuGet包，我很容易在MVC中使用toastr。我有点惊讶它没有被更多地使用...https://www.nuget.org/packages/RedWillow.MvcToastrFlash

- Guillaume