@foreach 循环中的多种形式。如何使用 javascript 异步提交一个。 C# 核心剃刀
Posted
技术标签:
【中文标题】@foreach 循环中的多种形式。如何使用 javascript 异步提交一个。 C# 核心剃刀【英文标题】：Multiple forms in @foreach loop. How do I submit one asynchronously with javascript. C# core Razor 【发布时间】：2021-12-03 11:20:30 【问题描述】：购物车有许多物品如何使用 javascript 异步删除任何物品这是我目前的工作。有人可以改进吗？
您的帮助将不胜感激。祝你有美好的一天
好的，如果您从列表顶部删除项目，则此方法有效，但如果您从其他位置删除项目，则失败。
问题似乎是表单名称都是相同的“删除”而没有任何索引。
问题是我不知道该怎么做。
document.forms['remove'].onsubmit = () =>
let formData = new FormData(document.forms['remove']);
fetch('/sales/cart?handler=RemoveItem',
method: 'post',
body: new URLSearchParams(formData)
)
.then(() =>
var url = "/sales/cart?handler=CartPartial";
console.log(url)
$.ajax(
url: url,
success: function (data)
$("#exampleModal .modal-dialog").html(data);
$("#exampleModal").modal("show");
//alert('Posted using Fetch');
);
);
return false;
<pre>
@foreach (var item in Model.Items)
<form name="remove" method="post">
<h4 class="text-left text-body">@item.Price.ToString("c")
<button class="btn btn-sm" title="Trash"><i style="font-size:large"
class="text-warning icon-Trash"></i></button>
</h4>
<input type="hidden" asp-for="@Model.Id" name="cartId" />
<input type="hidden" asp-for="@item.Id" name="cartItemId" />
</form>
</pre>
Update
----------
New markup
I added an index to the id and included an onclick event.
<form method="post" id="@i" onclick="removeItem(this.id)">
<button class="btn btn-sm" title="Trash">Item One</button>
<input type="hidden" asp-for="@Model.Id" name="cartId" />
<input type="hidden" asp-for="@item.Id" name="cartItemId" />
</form>
and create a new function that captured the form id including it in a constant.
<script>
function removeItem(formId)
const form = document.getElementById(formId);
form.onsubmit = () =>
let formData = new FormData(form);
fetch('/sales/cart?handler=RemoveItem',
method: 'post',
body: new URLSearchParams(formData)
)
.then(() =>
var url = "/sales/cart?handler=CartPartial";
console.log(url)
$.ajax(
url: url,
success: function (data)
$("#exampleModal .modal-dialog").html(data);
$("#exampleModal").modal("show");
//alert('Posted using Fetch');
);
);
return false;
</script>
If anybody can improve on this please post it here.
Thanks.
Updates code behind Cart.cshtml.cs
using System;
using System.Threading.Tasks;
using Malawby.Models;
using Malawby.Services.Interfaces;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace Malawby.Pages.Sales
public class CartModel : PageModel
private readonly ICartRepository _cartRepository;
public CartModel(ICartRepository cartRepository)
_cartRepository = cartRepository ?? throw new
ArgumentNullException(nameof(cartRepository));
[BindProperty]
public Cart Cart get; set; = new Cart();
public const string SessionKeyName = "_Name";
public string SessionInfo_Name get; private set;
public void OnGetAsync()
public async Task<PartialViewResult> OnGetCartPartialAsync()
var userName = GetUserName();
if (userName != null)
Cart = await _cartRepository.GetCartByUserName(userName);
return Partial("_ToCart", model: Cart);
private string GetUserName()
return HttpContext.Session.GetString(SessionKeyName);
public async Task OnPostRemoveItemAsync(int cartId, int cartItemId)
await _cartRepository.RemoveItem(cartId, cartItemId);
Update 2
This is the modified code I used. This is the error in the console.
XML Parsing Error: no root element found Location: localhost:44331/sales/cart?handler=RemoveItem Line Number 1, Column 1
There is no error on the page just nothing happens on the click of the trash can.
<script type="text/javascript">
function removeItem(cartItemId, cardId)
var removeUrl = "/sales/cart?handler=RemoveItem";
$.post(removeUrl,
cartItemId: cartItemId,
cardId: cardId
)
.done(function (data)
alert(data); //usually return true or false if true
remove card
$('#card_' + cardId).remove();
);
</script>
【问题讨论】：
您可以在不添加多个表单的情况下执行此操作，只需将 onclick="removeItem(this.id) 添加到按钮并调用您的删除 api 我认为删除后不需要调用 '/sales/cart?handler=CartPartial' 只需使用 jquery 或 javascript 删除卡 这很有趣，我会试一试。 嗯，您的建议 user1150331 似乎没有用。也许我误解了。我从“then”中删除，但它只是抛出了一个错误的页面返回。不管它是否正常工作。无论如何，谢谢。 如果您仍然感兴趣，请更新问题并添加控制器代码以进行检查 【参考方案1】：我不熟悉 asp.net core，但我会展示我通常是如何做到这一点的，而不关注语法。
首先在视图上不需要添加多个表单，但应该使用卡片 ID 作为索引并删除按钮发送选定的索引，如下所示：
@foreach (var item in Model.Items)
<div id="card_@item.cardId">
<h4 class="text-left text-body">@item.Price.ToString("c")
<button class="btn btn-sm" onclick="removeItem('@item.cardId') title="Trash"><i style="font-size:large"
class="text-warning icon-Trash"></i></button>
</h4>
</div>
然后脚本函数将调用remove api并删除选定的卡片，而无需重新渲染页面：
<script type="text/javascript">
function removeItem(cardId)
var removeUrl = "your apiUrl";
$.post( "removeUrl", cardId: cardId )
.done(function( data )
alert( data ); //usually return true or false if true remove card
$('#card_'+ cardId).remove();
);
</script>
【讨论】：
好吧！是的，这不是我所期望的，我相信它会运作良好。我会试一试。谢谢你的时间，干得好。 很抱歉报告您的代码出现错误。 XML 解析错误：找不到根元素位置：localhost:44331/sales/cart?handler=RemoveItem 第 1 行第 1 列： 我想帮助你，请为错误添加更多详细信息 好的，谢谢。我使用您的代码进行了一些修改（见上文）我在 FireFox 和 Chrome 浏览器中对此进行了测试。我用谷歌搜索了这个错误，发现了这个问题的可能实例，但最后我无法解决它。我以不同的方式修改了代码，但没有任何效果。有什么具体的你需要知道的。我有点迷路了。 我发现了这篇关于删除如何在 asp razor 页面上工作的帖子：***.com/questions/55602172/…以上是关于@foreach 循环中的多种形式。如何使用 javascript 异步提交一个。 C# 核心剃刀的主要内容，如果未能解决你的问题，请参考以下文章