ASP.NET MVC 4 中的 Toast 通知答案

【问题标题】：Toast notifications in ASP.NET MVC 4ASP.NET MVC 4 中的 Toast 通知
【发布时间】：2014-10-07 15:54:09
【问题描述】：

我想在用户使用 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 ()

因为页面没有重新加载。我该如何解决？

但这不起作用。请帮忙。提前致谢！

【问题讨论】：

查看任何控制台错误..
没有控制台错误
我会推荐你采取html.actionlink..然后你的问题将得到解决..
Html.Actionlink 没问题，但我想使用 Ajax，这样页面就不必像其他网站一样重新加载。
根据您在 AddToCart 操作中的问题，它正在重定向到索引，然后页面也将被重新加载..

标签： javascript jquery asp.net-mvc-4 toastr

【解决方案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>

【讨论】：

是的，有。我设置了一个断点并检查了它。数据已“添加”，但不知何故仍未执行 if 语句中的代码
而不是 "==" 尝试 "===" 并检查..@TungPham
很奇怪。我试图在“toastr.success('Added');”下面添加一行“@TempData["message"]"并在其上设置断点。即使 TempData 为空，它仍然被执行（但没有显示任何内容）。 @@
我收到一个错误“操作员'！'不能应用于“if(!string.IsNullOrEmpty)”行上“方法组”类型的操作数
好吧好吧。我接受了你的回答。不管怎样，谢谢你帮助我。

【解决方案2】：

控制器

TempData["message"] = "Added";

查看

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

【讨论】：

【解决方案3】：

尝试在 Index Method 中添加 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>

}

【讨论】：

【解决方案4】：

此链接可能会有所帮助：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)

【讨论】：