ASP.NET MVC 4中的Toast通知

Question

我希望能够使用Toastr插件在用户点击“添加到购物车”按钮时显示通知。基本上，当用户点击该按钮时，它执行“AddToCart”操作，然后重定向到主页。当页面显示出来时，它会检查TempData值，然后显示通知。

这是控制器：

public ActionResult AddToCart(int id)
    {


        TempData["message"] = "Added";
        return RedirectToAction("Index");
    }

以及视图：

@if (TempData["message"] != null)
{

    <script type="text/javascript">
        $(document).ready(function () {   
            toastr.success('Added')
        })
    </script>                                 
}

更新 根据@Exception的答案，它已经可行。但是，如果我使用ajax，例如：

@Ajax.ActionLink("Add to cart", "AddToCart", "Home", new { id = item.ProductId }, new AjaxOptions { UpdateTargetId="abc"})

它不能工作。可能是因为这一行：

$(document).ready(function ()

页面不重新加载，我该怎么解决？

但这并没有起作用。请帮忙。谢谢！

- Tung Pham

---

请查看控制台错误。 - Kartikeya Khosla

没有控制台错误。 - Tung Pham

我建议您使用HTML.ActionLink，这样您的问题就可以得到解决。 - Kartikeya Khosla

但是当使用Ajax时，我没有看到页面重新加载。 - Tung Pham

你可以在ID为“abc”的div内放置脚本标签并检查ViewBag的更新值。 - Kartikeya Khosla

Answer 1

答案 1：

<script type="text/javascript">
    $(document).ready(function () { 
       if('@TempData["message"]' == "Added"){
          toastr.success('Added');
       }
       else{ }
    });
</script> 

答案2：

虽然 TempData 在一次重定向中保留其值，但有时它会出现问题（并且建议避免使用 TempData），在这种情况下，你可以采取以下措施：

public ActionResult AddToCart(int id)
{
    .........
    return RedirectToAction("Index", new { message="Added" });  //Send Object Route//
}

public ActionResult Index(string message)
{
    .........
    if(!string.IsNullOrEmpty(message)) {
       Viewbag.message=message;
    }
    return View();
}

<script type="text/javascript">
    $(document).ready(function () { 
       if('@Viewbag.message' == "Added") {
          toastr.success('Added');
       }
       else{ }
    });
</script>

- Kartikeya Khosla

---

是的，有。我设置了一个断点并进行了检查。数据显示为“已添加”，但某种原因它仍未执行if语句内的代码。 - Tung Pham

尝试使用 "===" 而不是 "==" 并进行检查。@TungPham - Kartikeya Khosla

很奇怪。我尝试在“toastr.success('Added');”下面添加一行“@TempData["message"]”，并在其上设置断点。即使TempData为空，它仍然被执行（但没有显示任何内容）。@@ - Tung Pham

我在“if(!string.IsNullOrEmpty)”这一行遇到了一个错误：“运算符'!'不能应用于类型为'method group'的操作数”。 - Tung Pham

好的，好的。我接受了你的答案。无论如何，谢谢你帮助我。 - Tung Pham

Answer 2

控制器。

TempData["message"] = "Added";

查看

    @section scripts
{
        <script >
            $(document).ready(function () {
                if ('@TempData["message"]' == "Added") {
                    toastr.success('Action successfully changed....', 'ActionName');
                }
                else { }
            });
    </script>
}

- Alaa Hamdy

Answer 3

这个链接可能会有所帮助：https://github.com/fatihBulbul/toastr.Net

服务器端：

public ActionResult Index()
    {
        ViewBag.Message =  Notification.Show("Hello World", position: Position.BottomCenter, type: ToastType.Error, timeOut: 7000);
        return View();
    }

客户端（浏览器端）：

    <script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" />

     @Html.Raw(ViewBag.Message)

- Fatih BÜLBÜL

Answer 4

尝试在Index方法中添加ViewBag语句，其中包含一个TempData变量：

....
ViewBag.message = TempData["message"];
....
return View();

Index.cshtml:

@if (ViewBag.message != null)

{

<script type="text/javascript">
    $(document).ready(function () {   
        toastr.success('Added')
    })
</script>                                 

}

- Garik