当用户单击 ASP.NET MVC 控制器中的 "Add To Cart" 按钮时显示消息

Question

我正在 ASP.NET MVC 中创建一个购物网站。

我想要做的是在用户点击“添加到购物车”按钮时显示一条消息“您的产品已添加到购物车”。我不知道如何在任何页面上重定向我只是显示一条消息。

这是我的控制器

public ActionResult AddtoCart(int id)
{
    List<Product> list;

    if (Session["MyCart"] == null)
    { 
        list = new List<Product>();
    }
    else
    { 
        list = (List<Product>)Session["MyCart"]; 
    }

    list.Add(db.Products.Where(p => p.Product_ID == id).FirstOrDefault());
    Session["MyCart"] = list;

    list[list.Count - 1].Pro_Quantity = 1;
    ViewBag.cart = list.Count();

    Session["count"] = Convert.ToInt32(Session["count"]) + 1;

    return RedirectToAction("Shop", "Home");
}

这是我的“添加到购物车”按钮：

<a href="@Url.Action("AddtoCart","Home", new {id=p.Product_ID })" class="filled-button">
    Add to Cart
</a>

Answer 1

一种常见的实现方法是在控制器操作中向 ViewBag 添加一个值，然后在视图中的操作 returns 中，检查是否 ViewBag 值已设置，如果是则显示您的消息。

但是，ViewBag只持续一个请求的持续时间。 Redirect 或 RedirectToAction 是 new 请求。要在 MVC 中的一个请求与另一个请求之间发送数据，您必须改用 TempData。

（如果您想详细了解何时使用 ViewBag 和 TempData 以及它们的生命周期，请参阅 ViewBag/ViewData Lifecycle）。

因此，由于您的控制器操作 returns RedirectToAction，您必须在第一个操作中使用 TempData。因此，在您的 AddToCart 操作中，您将添加：

TempData["ItemAdded"] = true;

然后，在 Shop 操作中，您可以选取 TempData 值并使用它在 ViewBag 中设置一个值，以便它可以显示在视图中。

因此，在您的 Shop 操作中，您可以添加如下内容：

if (TempData.ContainsKey("ItemAdded") && (bool)TempData["ItemAdded"])
{
    ViewBag.Message = "Your products are added to cart";
}

最后，在您的 Shop 视图中，您将执行如下操作：

@if (!string.IsNullOrWhiteSpace(ViewBag.Message))
{
    <div class="message">
        @ViewBag.Message
    </div>
}

---

编辑 - 解决关于想要 pop-up 消息的评论

如果您想在不离开的情况下更新当前页面，您将不得不使用 AJAX。

这里有两种简单的方法可以实现。您选择哪一个取决于您是否已经在页面上有一个表格，您在这个项目的其他地方是如何完成事情的，您的公司喜欢如何完成事情，等等。

1) 使用 jQuery $.ajax()

在您的视图中，您需要将按钮更改为如下所示：

<a class="filled-button" onclick="addToCart(event, '@(p.Product_ID)')">
    Add to Cart
</a>
<!-- or -->
<button type="button" class="filled-button" onclick="addToCart('@(p.Product_ID)')">
    Add to Cart
</button>

（当然，您可以在 $(document).ready 函数中分配点击事件，而不是使用 onclick 属性。）

同样在您的视图中，您将像这样添加一些 JavaScript：

var addToCartUrl = "@Url.Action("AddtoCart", "Home")";

// you only need the productId parameter if you're not passing in the event
function addToCart(e, productId) {
    // prevent navigating away from the page on <a> tag click
    e.preventDefault();

    // make ajax request
    $.ajax({
        url: addToCartUrl,
        data: { id: productId },
        success: function (data) {
            // display your message however you want
        }
    });
}

在您的控制器操作中：

// change the last line from:
// return RedirectToAction("Shop", "Home");
// to:
return Json("Your products are added to cart", JsonRequestBehavior.AllowGet);

2) 使用 MVC 的 built-in ajax 形式

此方法与之前的方法没有太大区别。

首先，您将使用表单将视图的产品部分包围起来，如下所示：

@using (Ajax.BeginForm("AddtoCart", "Home", new AjaxOptions { OnSuccess = "productAddedToCart" }))
{
    ...
}

然后您会将“添加到购物车”按钮更改为 submit 按钮：

<button type="submit" name="id" value="@(p.Product_ID)" class="filled-button">
    Add to Cart
</button>

就像方法 #1 一样，您需要从控制器操作中 return JSON：

// from: return RedirectToAction("Shop", "Home");
return Json("Your products are added to cart", JsonRequestBehavior.AllowGet);

最后，OnSuccess JavaScript 函数看起来就像方法 1 中的那样：

function productAddedToCart (data) {
    // display your message however you want
}