ASP.NET MVC - Удалить из корзины

Question

Моя группа и я изо всех сил пытались найти ответ на этот вопрос для нашего сайта, и мы, наконец, предприняли шаг, чтобы попросить сообщество помочь!

Целью является попытка связать кнопку нашего веб-сайта с «удалить из корзины» и установить базу данных на 0, а также обновить страницу и показать, что происходит декремент.

javascript для просмотра в корзине не работает, но я не уверен, что это в конечном счете проблема. Мы следили за многими руководствами, такими как музыкальный магазин MVC и документация ASP.NET.

Index.cshtml:

script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(function() { 
     // Document.ready -> link up remove event handler 
     $(".RemoveLink").click(function() { 
      // Get the id from the link 
      var recordToDelete = $(this).attr("data-id"); 

      if (recordToDelete != '') { 
       // Perform the ajax post 
       $.post("/ShoppingCart/RemoveFromCart", { "id": recordToDelete }, 
        function (data) { 
         // Successful requests get here 
         // Update the page elements 
         if (data.ItemCount == 0) { 
          $('#row-' + data.DeleteId).fadeOut('slow'); 
         } else { 
          $('#item-count-' + data.DeleteId).text(data.ItemCount); 
         } 

         $('#cart-total').text(data.CartTotal); 
         $('#update-message').text(data.Message); 
         $('#cart-status').text('Cart (' + data.CartCount + ')'); 
        }); 
      } 
     }); 

    }); 


    function handleUpdate() { 
     // Load and deserialize the returned JSON data 
     var json = context.get_data(); 
     var data = Sys.Serialization.JavaScriptSerializer.deserialize(json); 

     // Update the page elements 
     if (data.ItemCount == 0) { 
      $('#row-' + data.DeleteId).fadeOut('slow'); 
     } else { 
      $('#item-count-' + data.DeleteId).text(data.ItemCount); 
     } 

     $('#cart-total').text(data.CartTotal); 
     $('#update-message').text(data.Message); 
     $('#cart-status').text('Cart (' + data.CartCount + ')'); 
    } 
</script> 

<h3> 
    <em>Review</em> your cart: 
</h3> 
<div id="update-message"> 
</div> 

<div style="height:600px; overflow:auto; padding-top: 50px; margin-left: 200px; width: 1050px; "> 
    <table id="cart-summary" border="1" frame="void" rules="rows" style="width:100%;margin-left:auto; margin-right: auto;"> 
     <tr class="data-table"> 
      <th colspan="1"> 
       Item(s) 
      </th> 
      <th colspan="1" style="text-align:center;"> 
       Price 
      </th> 
      <th colspan="1" style="text-align:center;"> 
       Quantity 
      </th> 
      <th colspan="1" style="text-align:center;"> 
       Total 
      </th> 
      <th></th> 
     </tr> 


     @foreach (var item in Model.CartItem) 
     { 
      <tr> 
       <td style="margin:auto;width:500px;"> 
        <div style="float:left;"> 
         <a href=@Url.Content(String.Format("~/Books/Details/{0}", item.Book.id))> 
          <img class="img-responsive" src="@Url.Content(String.Format("~/Content/img/books/{0}.jpg",item.Book.ISBN))" style="width: 100px; height: 150px;" /> 

         </a> 
        </div> 

        <div style="margin-top:37px;"> 
         <a href=@Url.Content(String.Format("~/Books/Details/{0}", item.Book.id))> 
          <span>@Html.DisplayFor(modelItem => item.Book.Title)</span><br /> 
         </a> 
         <span style="text-align:left;">@Html.DisplayFor(modelItem => item.Book.Author)</span><br /><br /> 
         <span style="text-align:left">ISBN: @Html.DisplayFor(modelItem => item.Book.ISBN)</span> 
        </div> 

       </td> 
       <td> 
        <p style="text-align:center;">@item.Book.PriceNew</p> 
       </td> 

       <td> 
        <p style="text-align:center;">@item.Quantity</p> 
        <a href="#" class="RemoveLink" data-id="@item.RecordId">Remove from cart</a> 
        <!--data-url='Url.Content("~/ShoppingCart/RemoveFromCart")'> 
         Remove from cart 
        </a>--> 
       </td> 
       <td> 
        <p>@Model.CartTotal</p> 
       </td> 
      </tr> 
     } 
     <tr> 
      <td></td> 
      <td> 
       <p style="padding-top:15px;"></p> 
       <br /> 
       <button type="button"> 
        @Html.ActionLink("Back to List", "../Books/Index") 
       </button> 
      </td> 
      <td></td> 
      <td id="cart-total"> 
       <p style="padding-top: 10px;font-weight:bold;color:rgb(179,0,0);font-size:18px;">Subtotal: @Model.CartTotal</p> 
       <button type="button"> 
        @Html.ActionLink("Checkout!", "AddressAndPayment", "Checkout") 
       </button> 
      </td> 
     </tr> 

    </table> 
</div> 

Следующий набор кода является C# код. Cart.cs:

public int RemoveFromCart(int id) 
     { 
      var cartItem = bookDb.Carts.Single(
       c => (c.CartId == ShoppingCartId) 
       && c.RecordId == id); 

      int itemCount = 0; 

      if (cartItem != null) 
      { 
       if (cartItem.Quantity > 1) 
       { 
        cartItem.Quantity--; 
        itemCount = cartItem.Quantity; 
       } 
       else 
       { 
        bookDb.Carts.Remove(cartItem); 
       } 
       bookDb.SaveChanges(); 
      } 

      return itemCount; 
     } 

Наконец, чтобы завершить набор MVC кода, которые относятся друг к другу ... Мы также считаем, что может быть ошибка здесь. Опять же, мы просто недостаточно опытны, чтобы знать.

ShoppingCartController.cs:

// GET: ShoppingCart 
     public ActionResult Index() 
     { 
      var cart = ShoppingCart.GetCart(this.HttpContext); 

      // Set up our View Model 
      var viewModel = new ShoppingCartViewModel 
      { 
       CartItem = cart.GetCartItems(), 
       CartTotal = cart.GetTotal() 
      }; 
      return View(viewModel); 
     } 

     // GET: Book/Details/5 
     // Button that allows you to add to the cart you will be redirected to the Shopping cart index page 
     public ActionResult AddToCart(string id) 
     { 
      var addedBook = bookdb.Books.Single(book => book.ISBN == id); 

      var cart = ShoppingCart.GetCart(this.HttpContext); 

      cart.AddToCart(addedBook); 

      bookdb.SaveChanges(); 

      return RedirectToAction("Index"); 
     } 

     // this is attached to the remove to cart button in the shopping cart index page, the index page will then reload 
     [HttpPost] 
     public ActionResult RemoveFromCart(int id) 
     { 
      // Retrieve the current user's shopping cart 
      var cart = ShoppingCart.GetCart(this.HttpContext); 

      // Get the name of the book to display confirmation 
      string bookName = bookdb.Carts.Single(book => book.RecordId == id).Book.Title; 

      // Remove from cart 
      int itemCount = cart.RemoveFromCart(id); 

      // Display confirmation message 
      var results = new ShoppingCartRemoveViewModel 
      { 
       Message = Server.HtmlEncode(bookName) + " has been removed from the shopping cart", 
       CartTotal = cart.GetTotal(), 
       CartCount = cart.GetCount(), 
       ItemCount = itemCount, 
       DeleteId = id 
      }; 
      //return view(); 
      return Json(results); 
     } 

Благодаря кучу!

Answer 1

Index.cshtml

<script> 


$(document).on('click', '.del-CartDetail', function() {  

var id = $(this).data("id");   

$("#hdnCartDetailId").val(id);  

$("#modal-del-cartdetail").modal({    

backdrop: 'static',  
keyboard: false,   
show: true  
    }); 

}); 


$("#btnModalSubmit").click(function() {   
    var buttonText = $("#btnModalSubmit").html(); 
    $("#btnModalSubmit").attr('disabled', '').html('<i class="fa fa-spinner fa-spin"></i>&nbsp; ' + buttonText); 


var id = $("#hdnCartDetailId").val(); 


$.ajax({ 
      url: '/CartDetail/DeleteCartDetail', 
      type: "POST", 
      dataType: "json", 
      contentType: 'application/json; charset=utf-8', 
      data: JSON.stringify({ Id: id }), 
      success: function (result) { 
       debugger; 
       if (result.success) { 
        $('#modal-del-cartdetail .close').click(); 
        //Page redirect after delete record 
        window.location.reload(); 
        $('#modal-del-cartdetail').show(); 
        INTAPP.Util.Notification(true, "Selected Cart(s) have been successfully deleted."); 
       } else { 
        INTAPP.Util.HandleLogout(data.message); 
        INTAPP.Util.Notification(false, "Some error occured while deleting selected Cart."); 
       } 

       $("#btnModalSubmit").attr('disabled', null).html('Submit'); 
      }, 
      error: function (xhr, status, error) { 
       INTAPP.Util.Notification(false, error); 
       $("#btnModalSubmit").attr('disabled', null).html('Submit'); 
      } 
     }); 
    });  
</script> 


@Html.Partial("ConfirmModal", new ModalViewModel 
    { 
     Id = "modal-del-cartdetail", 
     IsAlertModel = false, 
     Title = "Delete Product", 
     Message = "Are you sure you want to delete the cart detail?", 
     HiddenElementId = "hdnCartDetailId" 
    })