使用Jquery调用控制器操作

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

这个重新加载部分似乎也可以工作，但它不仅重新加载div，还重新加载当前页面的一部分。鉴于此，一定是jquery不正确。对于我所做的错事，任何帮助都将不胜感激

我将尝试只包含以下必需的代码片段：

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

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

单击事件时调用JQuery：

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

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

            return PartialView("_CartSummary.cshtml");
        }

    $(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”）”）

返回的url是

localhost/Store//url.Action（%22\u CartSummary%22，%22 ShoppingCart%22

。正如预期的那样，找不到此url。正确的url应该是

localhost/ShoppingCart/\u CartSummary

。似乎没有处理@url.Action，而只是将其作为操作的名称传入。

加载

时，它需要指向一个部分。如

$("#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>

基本技术是将HTML视为存储库。这是我们存储来自服务器的所有动态信息的地方。
因此，在处理这个问题并使用提供的答案作为基础的同时，我有一个我很满意的工作解决方案。我肯定这不是最干净的方法；但结果是我想要的。希望这能对将来的人有所帮助

$(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;
            }); 

        }
    });
});

视图中的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>

你应该提供
.done
和
.fail
函数，比如：你在
.done
函数中填充
div
，因为那是
.post
返回的时候。嗨，我一直在玩弄你的解决方案，它解决了我看到的奇怪行为。但是在#cartsummmary的淡入时值在整个页面刷新之前不会再更改。请相信这是因为.load（）返回了错误的Url（已对问题进行了详细编辑）。我尝试在Razor页面中使用“替换”来禁止jQuery？如果没有，这就是它无法正确呈现的原因。请参阅更新的答案
$(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;
            }); 

        }
    });
});

<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);
        }