输入值不刷新相关

时间:2017-03-06 11:43:18

标签: javascript jquery

我有一个购物篮,里面有一个刷新按钮:

enter image description here

当我更改数量时,应刷新价格字段:

有按钮,并且有数量输入字段:

 @if (Model != null)
            {
                foreach (var item in Model)
                {
                    <tr class="bg-danger btnDelete" data-id="1">
                        <td>@item.Name</td>
                        <td>@item.SupplierNo</td>
                        <td>
                            <input class="form-control quantity" id="quantity" value="1" name="quantity" min="1" max="100" type="number" style="width:100px;" required>
                        </td>
                        <td style="color:red">@item.Price</td>
                        <td class="actions" data-th="">
                            <button class="btn btn-info btn-sm" onclick="test(this)" id="refreshBasket" data-id=@item.ID><i class="fa fa-refresh"></i></button>
                            <button class="btn btn-danger btn-sm" onclick="deleteFromBasket(this)" id="deleteFromBasket" data-id=@item.ID><i class="fa fa-trash-o"></i></button>
                        </td>
                    </tr>
                }
            }

这是javascript函数:

 <script>
function test(obj) {
    var $button = $(obj);
    var testId = $button.data("id"); //reading the data-id of clicked button
    var quantity = $('#quantity').val();
    var UrlSettings = {
        url: '@Url.Action("RefreshBasket", "Purchase")'
    }

    $.ajax({
        url: UrlSettings.url,
        data: { 'id': testId, 'quantity': quantity },
        type: "post",
        cache: false,
        success: function (data) {
          location.reload();
        },
        error: function (xhr, ajaxOptions, thrownError) {
        }
    });

}

这是控制器:

public ActionResult RefreshBasket(int id, string quantity)
    {
        List<Product> cart = (List<Product>)Session["ShoppingCart"];
        Product product = productRepository.GetProductByID(id);
        if (cart == null)
        {
            return new JsonResult() { Data = new { Status = "ERROR" } };
        }

        List<ProductCategoriesVM> cartList = ConvertShoppingCartListToProductCategories(cart);

        if (product != null)
        {
            ProductCategoriesVM item = cartList.Where(p => p.ID == product.Id).FirstOrDefault();
            double parsedValue;
            double.TryParse(item.Price, System.Globalization.NumberStyles.Any, CultureInfo.GetCultureInfo("nl-NL"), out parsedValue);

            double result = parsedValue * int.Parse(quantity);
            item.Price = result.ToString("0.00");

            var itemFromSession = cart.Where(p => p.Id == item.ID).FirstOrDefault();
            itemFromSession.AtpPrice = item.Price;
        }

        return View("PurchaseProduct", cartList);
    }

问题在于,有时数量值仍为1,虽然我在购物清单中更改了数量值,但有时数量值仍然是最后更改的值。有时它表现得正确。我不知道自己做错了什么?如你所见,我试着得到这样的值:var quantity = $(&#39; #quum&#39;)。val();还有另一种解决方法吗?谢谢!

1 个答案:

答案 0 :(得分:1)

因为您的数量值始终来自相同的输入。记住id对于页面上的每个元素应该是唯一的,所以用这个改变你的jQuery代码并删除输入的id或使它变得不同:

function test(obj) {
var $button = $(obj);
var testId = $button.data("id"); //reading the data-id of clicked button
var quantity = $button.parents('tr').find('.quantity').val();
//or var quantity = $button.closest('tr').find('.quantity').val();
var UrlSettings = {
    url: '@Url.Action("RefreshBasket", "Purchase")'
}

$.ajax({
    url: UrlSettings.url,
    data: { 'id': testId, 'quantity': quantity },
    type: "post",
    cache: false,
    success: function (data) {
      location.reload();
    },
    error: function (xhr, ajaxOptions, thrownError) {
    }
});

}