ASP.NET MVC - 如何在不离开视图的情况下调用void控制器方法？

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视图上单击ActionLink上的"添加到购物车"按钮时,该页面在ProductController上调用"AddToCart"方法并在页面上显示空白视图 - 如下所示.我希望视图保留在'ProductDetail.cshtml'上,只需调用'AddToCart'方法,我该怎么做？

Answer 1

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

因此,如果要将值添加到购物车,请使用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,因此整个页面不会重定向或更改,但它的异步调用会在ProductController中执行AddToCart操作方法,并且当前页面将保持不变.因此,产品也将添加到购物车,页面不会变为空白.

希望这可以帮助.