更改文本框值并在Ajax调用上更新

我正在一个电子商务网站上工作，我卡在购物车管理上。基本上在登录之前，产品会保存在一个会话中，我试图使用Ajax更新会话中存储的产品数量。我的意思是，无论何时我在'数量变更'中写入，更改的值应反映在'数量'列中。更改文本框值并在Ajax调用上更新

注：我缩短了这篇文章，并找出为什么它在调试时没有触发。其实我无法获得相关产品的ID。现在它通过了ID。而已。现在我有另一个问题 - TextBox是用for循环动态创建的。我用的开发工具来找出如何在文本输入框是动态生成的，它是这样的：

For Product 1: cartDetails_0__Quantity 
For Product 2: cartDetails_1__Quantity

我想知道如何抓住从动态生成文本框的数量或价值。如果我将生成的id从HTML直接发送到Ajax，那么它会更新数量。否则它不会。我试图在Ajax中使用循环，但我认为，我错了。请参阅查看。

的观点：

<table border="1" width="100%" cellpadding="4"> 
    <thead> 
     <tr> 
      <th style="text-align:center;">Name</th> 
      <th style="text-align:center;">Price</th> 
      <th style="text-align:center;">Quantity</th> 
      <th style="text-align:center;">Quantity To Change</th> 
     </tr> 
    </thead> 
    <tbody> 
     @if (ViewBag.CartDetails != null) 
     { 
      for (int i = 0; i < cartDetails.Count(); i++) 
      { 
       <tr> 
        <td style="text-align: center; display:none;">@Html.DisplayFor(model => cartDetails[i].ProductId)</td> 
        <td id="ID" style="text-align: center;">@Html.DisplayFor(model => cartDetails[i].ProductName)</td> 
        <td style="text-align: center;">@Html.DisplayFor(model => cartDetails[i].Price)</td> 
        <td style="text-align: center;">@Html.DisplayFor(model => cartDetails[i].Quantity, new { @class = "quantityUpdate" })</td> 
        <td style="text-align: center;">@Html.TextBoxFor(model => cartDetails[i].Quantity, new { @class = "quantity", data_id = cartDetails[i].ProductId })</td> 
      </tr> 
      } 
     } 
    </tbody> 
</table> 

<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script type="text/javascript"> 
var url = '@Url.Action("UpdateCart")'; 
$(".quantityUpdate").change(function() { 
    var id = $(this).data('id'); 

    var i = 0; 
    $('.quantityUpdate').each(function (i, item) { 
     $.post(url, { id: id, Quantity: $("#cartDetails_"+i+"__Quantity").val() }, function (response) { 
      if (response) { 
       $("#TotalPrice").load(window.location + " #TotalPrice"); 
      } 
     }); 
    }) 

    alert(id); 
    alert($("#cartDetails_"+i+"__Quantity").val()); 
});

这里是我想要的图像样本：

来源

2016-08-25 AT-2017

您正在调试在浏览器吗？它绝不会将Visual Studio中的调试器作为其客户端（而不是服务器端）代码。当页面加载到注册事件时是否到达代码？另外你的服务器上的post方法应该接受一个对象，而不是2个参数，除非你想改变你的ajax，而不是通过url发送它。 – Igor

其实我试图在控制器中进行调试。在Ajax中有一种方法，如果它至少击中它，那么我就能理解。现在，试图解决它。 –

我不是很清楚，对不起。我认为代码没有达到JavaScript中的ajax调用，这是你放置断点的地方。这是第1步，看看你的ajax调用是否甚至解雇。您需要从浏览器中执行此操作。您可以使用断点进行调试，或者查看网络活动来自浏览器的内容（如果有）。一旦你得到了这一点，然后找出是否（或为什么不）它击中控制器。 – Igor

如果这个想法是，当你在文本框。质量更改值调用AJAX那么这是你应该怎么做的：

$('.quantity').change(function(){ 
    //your ajax call 
});

来源

2016-08-25 10:32:54 Developer

@Igor - 糟糕，错字纠正。谢谢 – Developer

$('.quantity').change(function(){ 
     $('.quantityUpdate').val($('.quantity').val()); 
    // put code here 
    });

瞬间变

$('.quantity').keyup(function(){ 
     $('.quantityUpdate').val($('.quantity').val()); 
     // put code here 
    });

来源

2016-08-25 11:28:27

更改文本框值并在Ajax调用上更新

回答

相关问题