2016-11-28 4 views
0

asp.net MVCを初めて使用しています。私はMVC Music Storeで働いています。私はコーディング部分でほぼ完成しましたが、カート部分からアイテムを取り除いている間に固執しました。私が見るページ上で使用MVC Music Store(AJAX)で商品がカートから削除されない

コードは以下の通りです:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<script type="text/javascript"> 
 
    if (typeof jQuery == 'undefined') { 
 
     document.write(unescape("%3Cscript src='/Scripts/jquery-1.7.1.min.js' type='text/javascript'%3E%3C/script%3E")); 
 
    } 
 
</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>

ここで私は削除カートリンクをクリックするとアクションリンクは

<td> 
      <a href="#" class="RemoveLink" data-id="<%:item.RecordId %>">Remove from cart</a> 
     </td> 

http://localhost:14652/ShoppingCart#あり、このURLに変更されます。

// 
    // AJAX: /ShoppingCart/RemoveFromCart/5 
    [HttpPost] 
    public ActionResult RemoveFromCart(int id) 
    { 
     // Remove the item from the cart 
     var cart = ShoppingCart.GetCart(this.HttpContext); 

     // Get the name of the album to display confirmation 
     string albumName = storeDB.Carts 
      .Single(item => item.RecordId == id).Album.Title; 

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

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

こんにちは。

+0

アンカータグのhrefの「#」のために、URLが変更されています。それをボタンに変更するか、href属性を削除することができます。 から削除します。しかし、$( "。RemoveLink").alterステートメントを置くだけで、正しくバインドされているかどうかを確認する必要があります。そうでなければ、ブレークポイントを使用してクローム開発ツールでテストすることができます。 –

+0

リソースの読み込みに失敗しました:サーバが404のステータスで応答しました(見つからない) – user7090664

+0

404が表示されていますか?ボタンクリックイベントまたは開発者ツールのn /コントローラ名とアクションメソッド名がclickイベントで提供されているurlと一致するかどうかを確認しましたか? –

答えて

0

私は同じ問題を抱えていました。私は

<script src="/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script> 

<script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script> 

から次の行を変更しなければならなかったし、すべてがその後に働きました。私はそれがとても簡単だとは信じられませんでした。

関連する問題