Question

当用户将商品添加到购物车时，我正在尝试重新加载特定的“div”（）。我有一些Jquery，我想在click事件上运行。它需要调用post动作（正在工作），然后在“reload”div中重新加载所有内容（仅渲染动作）。

这个重装片似乎也可以工作，但不只是重新加载div，而且还是当前页面的一部分。鉴于此，它必须是不正确的jquery。任何帮助我做错了将不胜感激。

我会尝试在下面只包含必要的代码：

在布局视图中加载局部视图：

<div id="reload">
    @{Html.RenderAction("_PartialView","Controller");}
</div>

链接用户点击次数。点击由Jquery收听的事件：

<p class="button">
    <a href="#" class="AddToCart" data-id="@item.ItemId"> Add To Basket</a>  
</p>

Jquery在点击事件中调用的操作：

[ChildActionOnly]
        public ActionResult _CartSummary()
        {
            var cart = ShoppingCart.GetCart(this.HttpContext);

            ViewData["CartCount"] = cart.GetCount();

            return PartialView("_CartSummary.cshtml");
        }

JQuery调用了click事件：

    $(function () {
    $(".AddToCart").click(function () {
        var addToCart = $(this).attr("data-id");
        if (addToCart != '') {
            $.post("/ShoppingCart/AddToCart", { "id": addToCart }).success(function() {
                $("#cartSummary").fadeOut();
                $("#cartSummary").fadeIn().load('@Url.Action("_CartSummary","ShoppingCart")');
            });
            return false;
        };
    });
});

在调用上面的JQuery时，$("#cartSummary").fadeIn().load('@Url.Action("_CartSummary","ShoppingCart")')返回的网址为localhost/Store/@Url.Action(%22_CartSummary%22,%22ShoppingCart%22。正如预期的那样，找不到这个网址。正确的网址为localhost/ShoppingCart/_CartSummary。似乎@ Url.Action没有被处理，只是作为Action的名称传入。

Answer 1

当你load时，它需要指向一个部分。像

$("#cartSummary").fadeIn().load('@Url.Action("_PartialView", "Controller")');

最后，当您发送$.post()时，请记住它是异步的。更好的方法可能是：

$.post("/ShoppingCart/AddToCart", { "id": addToCart }).success(function () {
    $("#cartSummary").fadeIn().load('@Url.Action("_PartialView", "Controller"'));
});

如果您的jQuery位于一个单独的文件中，请在* .cshtml中执行此操作。

<div id="cartSummary" data-url="@Url.Action("_PartialView", "Controller")"></div>

在jQuery中：

$("#cartSummary").fadeIn().load($("#cartSummary").data("url"));

基本技术是将HTML视为存储库。这是我们存储来自服务器的所有动态信息的地方。

Answer 2

$(document).ready(function () {
    $(".AddToCart").click(function () {
        var addToCart = $(this).attr("data-id");
        if (addToCart != '') 
        {
            $.post("/ShoppingCart/AddToCart", { "id": addToCart },function(data){
                 $("#cartSummary").html(data);
                 $("#cartSummary").fadeOut();
                 return false;
            }); 

        }
    });
});

Answer 3

所以有一段时间来解决这个问题并使用提供的答案为基础，我有一个我很满意的工作解决方案。这绝对不是最干净的方式，我敢肯定;但结果是我想要的。希望这可能有助于某些人的到来。

视图中的Jquery：

<script>
$(function () {
    //On click of .AddToCart
    $(".AddToCart").click(function () {
        // Get the id from the link
        var addToCart = $(this).attr("data-id");
        if (addToCart != '') {
            $.post("/ShoppingCart/AddToCart", { "id": addToCart }).success(function (data) {
                $('#cart-status').fadeIn().html('Cart  ' + '<span class="badge">' + data.CartCount + '</span>');
            });
            return false;
        };
    });
});
</script>

部分视图中的代码

<ul class="nav navbar-nav" style="margin-top:-15px;">
    <li><a href="/ShoppingCart?Length=12" id="cart-status">Cart  <span class="badge">@ViewData["CartCount"]</span></a></li>
</ul>

最后是控制器：

public ActionResult AddToCart(int id)
        {
            //Code...

            var results = new ViewModel
                {
                    Message = Server.HtmlEncode(addedItemName) +
                        " has been Added to your shopping cart.",
                    CartCount = cart.GetCount(),
                };
            return Json(results);
        }

使用Jquery调用Controller Action

3 个答案: