c# - ASP.NET MVC - 如何在不离开 View 的情况下调用无效 Controller 方法？

Question

问题背景:

我正在为 MVC 应用程序实现一些基本的“购物车”逻辑。目前，当我单击一个链接时 - 在下面的屏幕截图中表示为“添加到购物车”，这会调用“ProductController”中的“AddToCart”方法，如下所示:

Product.cshtml代码:

@Html.ActionLink("Add To Cart", "AddToCart")

ProductController 中的“AddToCart”方法:

public void AddToCart()
{
   //Logic to add item to the cart.
}

问题:

这不是问题，但目前当我单击 ProductDetail.cshtml View 上的 ActionLink 上的“添加到购物车”按钮时，页面会调用 ProductController 上的“AddToCart”方法并在页面上显示空白 View - 如如下所示。 我希望 View 保留在“ProductDetail.cshtml”上并只调用“AddToCart”方法，我该怎么做？

Answer 1

基本上@Html.ActionLink()或 <a></a>标签使用获取请求来定位页面。因此，无论何时单击它，您都会请求 ProductController 中的 AddToCart 操作方法，如果该操作方法返回 null 或 void，则显示空白或空白页面，如您所见(因为或@Html.ActionLink() 默认获取请求)。

因此，如果您想将您的值(value)添加到购物车，请使用 ajax 调用 AddToCart 方法，即:

HTML:

@Html.ActionLink("Add To Cart", "AddToCart", null, new { id="myLink"})

Jquery 或 Javascript:

$("#myLink").click(function(e){

    e.preventDefault();
    $.ajax({

        url:$(this).attr("href"), // comma here instead of semicolon   
        success: function(){
        alert("Value Added");  // or any other indication if you want to show
        }

    });

});

ProductController 中的“AddToCart”方法:

public void AddToCart()
{
   //Logic to add item to the cart.
}

现在，当调用 AddToCart 方法时，它通过使用 ajax 进行，因此整个页面不会重定向或更改，但它是一个异步调用，它在您的 中执行 AddToCart 操作方法>ProductController 并且当前页面将保持不变。因此该产品也将添加到购物车并且页面不会变为空白。

希望这对您有所帮助。