Asp.net 编辑viewmodel'；s会员通过按钮不提交

我正在使用Asp Net Core 3.1，正在开发管理控件，以批准和删除正在等待批准的已提交图像。我正在开发和坚持的功能如下：我已经创建了一个等待批准的图像网格（使用razor中的循环），并希望单击一个按钮，通过我在控制器中编写的逻辑“批准”该图像。如何在不刷新页面的情况下将数据传递给控制器

视图模型

public class ImageManagerViewModel
{
    public List<ListingImages> Images;

    public List<Tuple<long, string>> ListingNames;
   
}

客户端

@foreach (ListingImages row in Model.Images)
{
   ....
    <div class="d-flex card-footer">
         <a a class="btn btn-success btn-space"
            href="@Url.Action("ApproveImage", "Admin", new { listingID = row.ListingId, imageID = row.ImageId, isFeatured = false})" role="button">Approve</a>

}

@foreach（Model.Images中的ListingImages行）
{
....
}

正如VDWWD所描述的，您希望使用ajax实现此行为

我为你的代码做了一个快速的示例（尽管我没有能力测试它）

您的循环（您还可以使用隐藏的输入字段跟踪每个项目的ID）：

@foreach（Model.Images中的ListingImages行）
{
...
@（row.ImageId）
@（行列表ID）
批准
}

脚本部分中的JQuery代码：

<script>
$(document).on("click",
    ".approveBtn",
    function () {

        var imageId = $(this).closest(".imageId").text();
        var listingId = $(this).closest(".listingId").text();
        $.ajax({
            url: "/Admin/ApproveImage",
            type: "POST",
            data: {
                __RequestVerificationToken: $('input[name=__RequestVerificationToken]').val(),
                listingID : listingId,
                imageID: imageId,
                isFeatured: false
            },
            timeout: 5000,
            success: function(results) {
                // result action
            },
            contentType: "application/x-www-form-urlencoded; charset=utf-8"
        })
            .fail(function (xhr, textStatus, errorThrown) {
            // error handling
        });
    });
</script>

$（文档）。在（“单击”，
“.approveBtn”，
函数（）{
var imageId=$（this）.closest（“.imageId”）.text（）；
var listingId=$（this）.closest（“.listingId”）.text（）；
$.ajax({
url:“/Admin/ApproveImage”，
类型：“POST”，
数据：{
__RequestVerificationToken:$（'input[name=\uu RequestVerificationToken]'）。val（），
listingID:listingID，
imageID:imageID，
isf：假
},
超时：5000，
成功：功能（结果）{
//结果作用
},
contentType:“application/x-www-form-urlencoded；charset=utf-8”
})
.fail（函数（xhr、textStatus、errorshown）{
//错误处理
});
});

提示：

如果您使用一个，请在请求中包含antiforgery令牌，如示例所示

您还可以将负载作为JSON发送。然后需要编辑内容类型，并在数据部分使用JSON.stringify来转换有效负载

---

对后端的Ajax调用。网上有很多这样的例子。

@foreach (ListingImages row in Model.Images)
{
    ...
    <span class="imageId">@(row.ImageId)</span>
    <span class="listingId">@(row.ListingId)</span>
    <input type="button" class="btn btn-success approveBtn">Approve</button>
}

<script>
$(document).on("click",
    ".approveBtn",
    function () {

        var imageId = $(this).closest(".imageId").text();
        var listingId = $(this).closest(".listingId").text();
        $.ajax({
            url: "/Admin/ApproveImage",
            type: "POST",
            data: {
                __RequestVerificationToken: $('input[name=__RequestVerificationToken]').val(),
                listingID : listingId,
                imageID: imageId,
                isFeatured: false
            },
            timeout: 5000,
            success: function(results) {
                // result action
            },
            contentType: "application/x-www-form-urlencoded; charset=utf-8"
        })
            .fail(function (xhr, textStatus, errorThrown) {
            // error handling
        });
    });
</script>