ASP.NET MVC 4 中的 Toast 通知

Posted 2023-05-08

【中文标题】ASP.NET MVC 4 中的 Toast 通知

【英文标题】：Toast notifications in ASP.NET MVC 4

【发布时间】：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 操作中的问题，它正在重定向到索引，然后页面也将被重新加载..

【参考方案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)