使用 Jquery 调用控制器动作答案

【问题标题】：Call Controller Action using Jquery使用 Jquery 调用控制器动作
【发布时间】：2014-12-01 01:50:16
【问题描述】：

当用户将商品添加到购物车时，我正在尝试重新加载特定的“div”()。我有一些想要在点击事件上运行的 Jquery。它需要调用一个发布操作（它正在工作），然后在“重新加载”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：

    $(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_CartSummary%22,%22ShoppingCart%22。正如预期的那样，没有找到这个 url。正确的网址是localhost/ShoppingCart/_CartSummary。似乎@Url.Action 没有被处理，只是作为动作的名称传入。

【问题讨论】：

您应该提供.done 和.fail 函数，例如：api.jquery.com/jquery.post 您在.done 函数中填充div，因为那是.post 返回的时间。

标签： jquery ajax asp.net-mvc

【解决方案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 视为存储库。这是我们存储来自服务器的所有动态信息的地方。

【讨论】：

您好，我一直在使用您的解决方案，它解决了我看到的奇怪行为。在#cartSummary 淡入时，该值在整个页面刷新之前不再变化。相信这是因为 .load() 返回了一个错误的 Url（已详细编辑了问题）。我尝试使用替换没有运气
你的 jQuery 是否在 Razor 页面中？如果不是，这就是它无法正确渲染的原因。查看更新的答案

【解决方案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;
            }); 

        }
    });
});

【讨论】：

【解决方案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);
        }

【讨论】：