如何解决我想显示更新的数量而无需重新加载页面
这是控制器代码。我想获取并显示更新的数量数据，而无需重新加载页面。但是我不知道该怎么做。我是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',"Id": id },success: function (data) { console.log(data);
var total = 0;
$.each(data.data,function (k,val) {
total += parseInt(val.quantity);
});
}
})
});
解决方法
我假设您使用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;
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。