Question

我正在一个电子商务网站上工作，我被卡在购物车管理上。基本上在登录之前，产品保存在会话中，我正在尝试使用Ajax更新存储在会话中的产品数量。我的意思是每当我写“要更改的数量”时，更改的值应反映在“数量”列中。

注意：我已经缩短了帖子，并弄清楚为什么在调试时它没有被触发。实际上我无法获得相关产品的ID。现在它传递了id。而已。现在我还有另一个问题 - TextBox是用for循环动态创建的。我使用开发人员工具来弄清楚TextBox是如何动态生成的，它是这样的：

For Product 1: cartDetails_0__Quantity
For Product 2: cartDetails_1__Quantity

我想知道如何从动态生成的TextBox中获取数量或值。如果我将生成的HTML从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());
});

这是我正在尝试的图像样本：

Answer 1

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

即时更改

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

Answer 2

如果想要在更改.quality文本框中的值时调用ajax，那么这就是你应该做的：

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

更改TextBox值并更新Ajax调用

2 个答案: