Question

这是控制器代码。我想获取并显示更新的数量数据，而无需重新加载页面。但是我不知道该怎么做。我是Js And ajax的新手。

 [Authorize]
        [HttpGet]
        public async Task<IActionResult> AddToCart(string Id)
        {
            var user = await _userManager.FindByNameAsync(User.Identity.Name);
            if (Id == null)
            {
                var applicationDbContext = _context.AddToCart.Where(u => u.UserId == user.Id).Include(p => p.Products);
                return View(await applicationDbContext.ToListAsync());
            }
            else
            {
                var ProductId = _context.AddToCart.Where(p => p.ProductsId == Id && p.UserId == user.Id).FirstOrDefault();
                if (ProductId == null)
                {
                    AddToCart a = new AddToCart();
                    a.ProductsId = Id;
                    a.UserId = user.Id;
                    a.Add_Date = DateTime.Today;
                    a.Quantity = 1;
                    _context.AddToCart.Add(a);
                    await _context.SaveChangesAsync();
                    var applicationDbContext = _context.AddToCart.Where(u => u.UserId == user.Id).Include(p => p.Products);
                    return View(await applicationDbContext.ToListAsync());
                }
                else
                {
                    var applicationDbContext = _context.AddToCart.Where(u => u.UserId == user.Id).Include(p => p.Products);
                    return View(await applicationDbContext.ToListAsync());
                }
            }
        }

这是我的查看代码。我想获取并显示更新的数量数据，而无需重新加载页面。但是我不知道该怎么做。我是Js And ajax的新手。

@{
    ViewData["Title"] = "AddToCart";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>Add To Cart</h1>

<table class="table">
    @*<thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.Products.Image_path)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Products.Price)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Quantity)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Products.Price)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Products.Product_Name)
                </th>

            </tr>
        </thead>*@
    <tbody>
        @foreach (var item in Model)
        {
        <tr>
            <td>
                <img src="~/Images/@item.Products.Image_path" class="img-fluid" style="height:100px;width:170px;" asp-append-version="true" />
            </td>
            <td>
                <b>
                    @Html.DisplayFor(modelItem => item.Products.Product_Name)
                </b>
            </td>
            <td>
                <text id="quantity"></text>
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Products.Price)
            </td>
            <td>

                <div class="input-group">
                    <input type="submit" value="-" class="button-minus" data-field="quantity">
                    <input type="button" id="plus" step="1" max="" min="1" value="@item.Quantity" name="quantity" asp-for="@item.Quantity" class="quantity-field">
                    <input type="submit" value="+" class="button-plus" data-field="quantity">
                    <input type="hidden" name="Id" id="itemId" value="@item.Id" data-field="quantity" />
                </div>

            </td>
            <td id="quantity">               
            </td>
            <td>
                @(item.Quantity* item.Products.Price)
            </td>

            <td>
                <form asp-action="Delete" asp-route-id="@item.Id" data-ajax="true" data-ajax-success="deleteItem(this)">
                    <button type="submit" class="btn btn-sm btn-danger d-none d-md-inline-block">
                        Delete
                    </button>
                </form>
            </td>

        </tr>
        }
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td><b>Sub Total</b></td>
            <td>@Model.Sum(i => i.Quantity * i.Products.Price) TK</td>
            <td><a asp-controller="Orders" asp-action="Index">Order Now</a></td>
        </tr>
    </tfoot>

</table>

这是我的JS代码，无需重新加载即可更新数据库中的数量，并且可以正常工作。

function incrementValue(e) {
    e.preventDefault();
    var fieldName = $(e.target).data('field');
    var parent = $(e.target).closest('div');
    var currentVal = parseInt(parent.find('input[name=' + fieldName + ']').val(), 10);

    if (!isNaN(currentVal)) {
        parent.find('input[name=' + fieldName + ']').val(currentVal + 1);
    } else {
        parent.find('input[name=' + fieldName + ']').val(0);
    }
}

function decrementValue(e) {
    e.preventDefault();
    var fieldName = $(e.target).data('field');
    var parent = $(e.target).closest('div');
    var currentVal = parseInt(parent.find('input[name=' + fieldName + ']').val(), 10);

    if (!isNaN(currentVal) && currentVal > 1) {
        parent.find('input[name=' + fieldName + ']').val(currentVal - 1);
    } else {
        parent.find('input[name=' + fieldName + ']').val(1);
    }
}
$('.input-group').on('click', '.button-plus', function (e) {
    //debugger
    incrementValue(e);
    var fieldName = $(e.target).data('field');
    var parent = $(e.target).closest('div');
    var currentVal = parseInt(parent.find('input[name=' + fieldName + ']').val(), 10);
    var Id = (parent.find('input[name=Id ]').val());
    $.ajax({
        url: 'AddToCart', type: 'POST', data: { "value": currentVal, "Id": Id }, dataType: 'json', success: function (response) {
            console.log(response.data); $('.quantity-field').val(response.data.Quantity); } })
});



$('.input-group').on('click', '.button-minus', function (e) {
    decrementValue(e);
    var fieldName = $(e.target).data('field');
    var parent = $(e.target).closest('div');
    var currentVal = parseInt(parent.find('input[name=' + fieldName + ']').val(), 10);
    var id = (parent.find('input[name=Id ]').val());
    $.ajax({ url: 'AddToCart', type: 'POST', data: { "value": currentVal, "Id": id }, dataType: 'json', success: function (data) { console.log(data);
            var total = 0;
            $.each(data.data, function (k, val) {
                total += parseInt(val.quantity);
            });
        }
    })
});

Answer 1

我假设您使用AddToCart和Id等属性定义了Quantity类，如下所示。

public class AddToCart
{
    public string Id { get; set; }
    public string ProductName { get; set; }
    public int Quantity { get; set; }

    //...
    //other properties
    //...
}

您的GetData操作方法将返回其中包含AddToCart对象列表的数据，如下所示。

要获取总量并在JS客户端上使用更新的数量更新特定的元素，您可以尝试以下代码。

$.ajax({
    url: 'Home/GetData',
    data: { Id: empId },
    method: 'GET',
    dataType: 'Json',
    success: function (data) {     
        console.log(data);

        var total = 0;

        $.each(data.data, function (k,val) {
            total += parseInt(val.quantity);
        });

        //console.log(total);

        $('.quantity-field').val(total);
    },
    error: function (err) {
        alert(err);
    }
});

此外，您还可以在服务器端进行计算，以将总量包括在返回数据中。

return Json(new { data = AddToCartList, total = AddToCartList.Sum(p => p.Quantity) });

在客户端，您可以通过data.total来获取它。

success: function (data) {     
    console.log(data);
    console.log(data.total);
    var total = data.total;

我想显示更新的数量而无需重新加载页面

1 个答案: