Jquery를 사용하여 통화 컨트롤러 동작

Question

사용자가 장바구니에 항목을 추가 할 때 특정 'div'()를 다시로드하려고합니다. click 이벤트에서 실행하려는 Jquery가 있습니다. 포스트 액션 (작동 중)을 호출하고 "다시로드"div (렌더링 액션 만) 내의 모든 것을 다시로드해야합니다.

이 리로드 피스도 작동하는 것으로 보이지만 div 만 다시로드하는 것이 아니라 현재 페이지의 일부를 다시로드합니다. 이것을 감안할 때 올바르지 않은 jquery 여야합니다. 내가 잘못한 것을 도와 주면 감사하겠습니다.

나는 시도하고 아래 코드의 필요한 부분이 포함됩니다 :

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

링크 사용자가 클릭 :

로드 레이아웃보기에서 부분보기를. 클릭 이벤트가 듣고 JQuery와에 의해 : 클릭 이벤트에 jQuery를 호출

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

작업 : 클릭 이벤트에서 호출

[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을 찾을 수 없습니다. 올바른 URL은 localhost/ShoppingCart/_CartSummary입니다. @ Url.Action이 처리되지 않고 방금 작업의 이름으로 전달 된 것 같습니다.

Answer 1

이 문제를 해결하고 기초로 제공되는 답변을 사용하면서 나는 만족스런 해결책이 있습니다. 이 작업을 가장 확실하게하는 가장 확실한 방법은 아닙니다. 결과는 내가 원했던 것이다. 바라기를 이것은 이것이 양육에 도움이되기를 바랍니다.뷰에서

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

Answer 2

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 3

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

     } 
    }); 
});