从 IEnumerable<model> 到控制器的模型，无需重新加载页面 aspnet 核心
Posted
技术标签:
【中文标题】从 IEnumerable<model> 到控制器的模型，无需重新加载页面 aspnet 核心【英文标题】：Model from IEnumerable<model> to controller without reloading page aspnet core 【发布时间】：2021-12-05 19:38:24 【问题描述】：目标：我有一个电子商务网站。我正在处理购物车页面。当用户想要从他们购买的数量中添加或删除一个时，我希望他们能够按下页面上的加号或减号按钮，该按钮将在不重新加载页面的情况下删除或添加一个。
问题： 我有控制器来实现这一点，但我不知道如何在不重新加载页面的情况下从 foreach 循环中传递特定模型或模型中的 ID。
这是页面：
@model IEnumerable<AirmotionEcommerceWebsite.TwebCartProduct>
@
ViewBag.Title = "My Cart";
ViewBag.decSubtotal = 0;
ViewBag.decShipping = 68.99;
ViewBag.decStateTax = 0.078;
ViewBag.decTax = 0;
ViewBag.decTotal = 0;
<br />
<div class="container">
<h2>Cart</h2>
<div class="card-body">
<div class="row">
<div class="col-md-8">
<div class="table-responsive">
<table class="align-content-lg-start table table-bordered" id="dataTable" cellspacing="0">
<tbody>
@if (Model.Count() == 0)
<h1>Your cart is empty!</h1>
else
foreach (var item in Model)
ViewBag.decSubtotal += item.IntQuantity * item.IntWebProduct.DecMsrp;
<tr>
<td class="text-left">@item.IntWebProduct.StrProductName</td>
<td class="text-left">@item.IntWebProduct.DecMsrp.ToString("c")</td>
<td class="text-left">
@html.ActionLink("add_circle_outline", "AddOneToCart", new intWebProductID = item.IntWebProductId , new @class = "material-icons" )
@item.IntQuantity.ToString()
@Html.ActionLink("remove_circle_outline", "RemoveOneFromCart", new intWebProductID = item.IntWebProductId , new @class = "material-icons" )
@Html.ActionLink("delete", "RemoveAllFromCart", new intWebProductID = item.IntWebProductId , new @class = "material-icons float-right" )
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header">
<h2>Order Summary</h2>
</div>
<ul class="list-group list-group-flush">
@
//ViewBag.decTax = ViewBag.decSubtotal * (decimal)ViewBag.decStateTax;
ViewBag.decTotal = (decimal)ViewBag.decSubtotal + (decimal)ViewBag.decShipping;/* + ViewBag.decTax;*/
<li class="list-group-item">Subtotal<span class="float-right">@ViewBag.decSubtotal.ToString("c")</span></li>
<li class="list-group-item">Shipping<span class="float-right">@ViewBag.decShipping.ToString("c")</span></li>
@*<li class="list-group-item">Tax<span class="float-right">@ViewBag.decTax.ToString("c")</span></li>*@
<li class="font-weight-bold list-group-item">
Total<span class="float-right">@ViewBag.decTotal.ToString("c")</span>
<br />
<br />
@Html.ActionLink("Checkout", "Checkout", "Home")
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
【问题讨论】：
【参考方案1】：我希望他们能够按页面上的加号或减号按钮，无需重新加载页面即可删除或添加一个按钮。
首先，你可以用js来改变html代码。但是你不能使用带js变量的set ViewBag，所以在结帐时，你需要使用url传递decSubtotal和decTotal。这是一个演示：
@
ViewBag.Title = "My Cart";
ViewBag.decSubtotal = 0;
ViewBag.decShipping = 68.99;
ViewBag.decStateTax = 0.078;
ViewBag.decTax = 0;
ViewBag.decTotal = 0;
<br />
<div class="container">
<h2>Cart</h2>
<div class="card-body">
<div class="row">
<div class="col-md-8">
<div class="table-responsive">
<table class="align-content-lg-start table table-bordered" id="dataTable" cellspacing="0">
<tbody>
@if (Model.Count() == 0)
<h1>Your cart is empty!</h1>
else
foreach (var item in Model)
ViewBag.decSubtotal += item.IntQuantity * item.IntWebProduct.DecMsrp;
<tr>
<td class="text-left">@item.IntWebProduct.StrProductName</td>
<td class="text-left">@item.IntWebProduct.DecMsrp.ToString("c")</td>
<td class="text-left">
<button onclick="Add(this,@item.IntWebProduct.DecMsrp)" class = "material-icons">add_circle_outline</button>
<span>@item.IntQuantity</span>
<button onclick="Remove(this,@item.IntWebProduct.DecMsrp)">remove_circle_outline</button>
<button onclick="Delete(this,@item.IntWebProduct.DecMsrp)">RemoveAllFromCart</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header">
<h2>Order Summary</h2>
</div>
<ul class="list-group list-group-flush">
@
//ViewBag.decTax = ViewBag.decSubtotal * (decimal)ViewBag.decStateTax;
ViewBag.decTotal = (decimal)ViewBag.decSubtotal + (decimal)ViewBag.decShipping;/* + ViewBag.decTax;*/
<li class="list-group-item">Subtotal<span class="float-right" id="Subtotal">@ViewBag.decSubtotal.ToString("c")</span></li>
<li class="list-group-item">Shipping<span class="float-right" id="Shipping">@ViewBag.decShipping.ToString("c")</span></li>
@*<li class="list-group-item">Tax<span class="float-right">@ViewBag.decTax.ToString("c")</span></li>*@
<li class="font-weight-bold list-group-item">
Total<span class="float-right" id="Total">@ViewBag.decTotal.ToString("c")</span>
<br />
<br />
<a id="Checkout" asp-controller="Home" asp-action="Checkout">Checkout</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
@section scripts
<script>
var decSubtotal = @ViewBag.decSubtotal;
var decShipping =@ViewBag.decShipping;
var decTotal=@ViewBag.decTotal;
function Add(t, price)
decSubtotal += price;
change();
$(t).next()[0].innerText = parseInt($(t).next()[0].innerText) + 1;
function Remove(t, price)
decSubtotal -= price;
change();
if (parseInt($(t).prev()[0].innerText) == 1)
$(t).parent().parent().remove();
else
$(t).prev()[0].innerText = parseInt($(t).prev()[0].innerText) - 1;
function Delete(t, price)
decSubtotal -= parseInt($(t).prev().prev()[0].innerText) * price;
change();
$(t).parent().parent().remove();
function change()
decTotal = decSubtotal + decShipping;
var temp = document.getElementById("Subtotal").innerText.substr(0, 1);
document.getElementById("Subtotal").innerText = temp + decSubtotal.toFixed(2);
document.getElementById("Total").innerText = temp + decTotal.toFixed(2);
if ($("#Checkout").attr("href").includes("?"))
href = href.split("?")[0];
$("#Checkout").attr("href",href + "?decSubtotal=" + decSubtotal.toFixed(2) + "&&decTotal=" + decTotal.toFixed(2));
</script>
行动：
public IActionResult Checkout(decimal decSubtotal, decimal decTotal)
return Ok();
结果：
【讨论】：
以上是关于从 IEnumerable<model> 到控制器的模型，无需重新加载页面 aspnet 核心的主要内容，如果未能解决你的问题，请参考以下文章
从 IEnumerable<model> 到控制器的模型，无需重新加载页面 aspnet 核心
如何从客户端接收 IEnumerable<int>？ [复制]
在 ASP.NET Core MVC Razor 视图中，与 @model IEnumerable<Namespace.Model> Vs @model<Namespace.Mode
从 IEnumerable 转换为 IEnumerable<object>