更改文本框值并在Ajax调用上更新 [英] Change TextBox Value and Update On Ajax Call

问题描述

我在一个电子商务网站上工作，在那里我一直陷在购物车管理中.基本上在登录之前，产品会保留在会话中，我正在尝试使用Ajax更新存储在会话中的产品数量.我的意思是，每当我在"要更改的数量"中写入内容时，更改后的值都应反映在"数量"列中.

I am working on an ecommerce site where I am stuck on the cart management. Basically before login, products are kept in a session and I am trying to update the product quantity stored in the session using Ajax. I mean whenever I write in the 'Quantity To Change', the changed value should be reflected in the 'Quantity' column.

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

Note: I've shortened the post and figured out why it wasn't firing while debugging. Actually I was unable to get the id of the associated product. Now it passes the id. That's it. Now I've another issue - The TextBox are being created dynamically with a for loop. I used developer tools to figure out how the TextBoxes are generated dynamically and it is something like this:

For Product 1: cartDetails_0__Quantity
For Product 2: cartDetails_1__Quantity

我想知道如何从动态生成的TextBox中获取数量或值.如果我将生成的ID从HTML直接放到Ajax，那么它将更新数量.否则就不会.我试图在Ajax中使用循环，但是我认为我做错了.请查看查看.

I am wondering how to grab the quantity or values from the dynamically generated TextBoxes. If I put the generated id from HTML directly to Ajax, then it updates the quantity. Otherwise it doesn't. I've tried to use a loop in Ajax but I think, I am getting it wrong. Please see the View.

视图:

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

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

Here is an image sample that I am trying:

推荐答案

如果要在更改.quality文本框中的值时调用ajax，则应该这样做:

If the idea is to call ajax when you change the value in .quality textbox then this is how you should do:

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

这篇关于更改文本框值并在Ajax调用上更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！