Razor 页面 ASP.NET 核心 - OnPost() 使用 datatables.net 搜索栏不返回任何对象

Question

我有一个用于修改从数据库中提取的对象的页面。 加载页面时，LINQ 查询会创建一个对象列表，然后显示在 HTML 表中。 用户可以使用下拉菜单到 select 进行他们想要进行的更改，然后单击 object 上他们希望发生此更改的复选框。 一切正常，直到 datatables.net 搜索栏开始发挥作用。

使用此搜索栏，可以细化列表中可查看的项目数量，使用户更容易进行他们需要进行的更改。 不幸的是，当用户单击按钮进行这些更改时，什么也没有发生。 查看 OnPost()，那里没有返回任何对象，因此无法更新任何内容。

这是页面的后端文件：

namespace CustomerPageTest.Pages.View
{
    public class EditClassificationTiersModel : PageModel
    {
        [BindProperty(SupportsGet = true)]
        public int returnedClassification { get; set; }

        [BindProperty(SupportsGet = true)]
        public int returnedTier { get; set; }

        [BindProperty(SupportsGet = true)]
        public IEnumerable<vInfoView> vInfoViews { get; set; }

        [BindProperty(SupportsGet = true)]
        public string SearchTerm { get; set; }

        [BindProperty(SupportsGet = true)]
        public int assessmentID { get; set; }

        public List<SelectListItem> ClassificationList { get; set; } = DatabaseClassificationData();

        [BindProperty(SupportsGet = true)]
        public List<SelectListItem> TierList { get; set; }

        public void OnGet(int assessmentId)
        {
            assessmentID = assessmentId;
            TierList = DatabaseTierData();
            vInfoViews = GetvInfoViewsByAssessment(assessmentId);
        }

        public async Task<IActionResult> OnPostAsync()
        {
            if (!ModelState.IsValid)
            {
                return Page();
            }

            using (var context = new DataWarehouseContext())
            {
                foreach (var info in vInfoViews)
                {
                    if (info.isChecked)
                    {
                        var temp = context.RvtoolsVInfo
                            .Where(a => a.VmId.Equals(info.vmID))
                            .FirstOrDefault();

                        if(returnedClassification != 0) //If Data Classification form was changed we change it, else it stays the same
                            temp.DataClassificationId = returnedClassification;

                        if(returnedTier != 0) //If Tier form was changed we change it, else it stays the same
                            temp.TierNumber = returnedTier;

                        try
                        {
                            await context.SaveChangesAsync(); //Saves changes on selected objects
                        }
                        catch (Exception)
                        {

                        }
                    }
                }
            }
            return RedirectToPage("/View/EditClassificationTiers", new { assessmentId = assessmentID });
        }

这是页面的前端文件：

@page "{assessmentId}"
@model CustomerPageTest.Pages.View.EditClassificationTiersModel
@{
    ViewData["Title"] = "EditClassificationTiers";
}

@section Scripts
{
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#myTable').dataTable({
                "paging": false,
                "search": {
                    "smart": false
                }
            });
        });
    </script>

}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">

<h1 align="center" style="color:yellowgreen">Edit Classifications / Tiers</h1>
<br />

<form method="post">
    <div class="container">
        <table class="table" style="border: hidden !important; border-bottom: hidden !important; white-space: nowrap; width: 100%;">
            <tr>
                <td>
                    <h3 class="text-light" style="white-space: nowrap">Data Classification:</h3>
                    <div class="form-group justify-content-center">
                        <select class="form-control" asp-for="returnedClassification" asp-items="Model.ClassificationList"></select>
                    </div>
                </td>
                <td>
                    <h3 class="text-light" style="white-space: nowrap">Tier:</h3>
                    <div class="form-group justify-content-center">
                        <select class="form-control" asp-for="returnedTier" asp-items="Model.TierList"></select>
                    </div>
                </td>
                <td>
                    <br /><br /><br />
                    <div class="inner-addon left-addon">
                        <i class="glyphicon glyphicon-plus text-light col-md-offset-6"></i>
                        <input type="submit" value="Add Classification / Tier" class="btn btn-dark text-light col-md-offset-6" />
                    </div>
                </td>
                <td>
                    <br /><br /><br />
                    <div class="inline-right justify-content-center">
                        <a class="btn btn-dark" asp-page="/View/EditAssessment" asp-route-assessmentId="@Model.assessmentID">
                            <i class="glyphicon glyphicon-arrow-left"></i>    Back
                        </a>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <input type="hidden" asp-for="@Model.assessmentID" name="assessmentID" />
    <table id="myTable" class="display cell-border stripe" role="grid" style="background-color: #dbdbdb; text-align:center; width: 100%">
        <thead>
            <tr class="text-dark">
                <th style="text-align: center; width: 5%;"></th>
                <th style="text-align: center; width: 10%;"><strong>Name</strong></th>
                <th style="text-align: center; width: 10%;"><strong>Datacenter</strong></th>
                <th style="text-align: center; width: 15%;"><strong>Cluster</strong></th>
                <th style="text-align: center; width: 15%;"><strong>Host</strong></th>
                <th style="text-align: center; width: 10%;"><strong>Classification</strong></th>
                <th style="text-align: center; width: 10%;"><strong>Tier</strong></th>
                <th style="text-align: center; width: 25%"><strong>Annotation</strong></th>
            </tr>
        </thead>
        <tbody style="background-color: #dbdbdb;">
            @for (int i = 0; i < Model.vInfoViews.Count(); i++)
            {
                <tr class="text-dark">
                    <td style="padding-top: 15px; width: 5%;">
                        <input type="checkbox" asp-for="@Model.vInfoViews.ElementAt(i).isChecked" name="vInfoViews[@i].isChecked" />
                        <input type="hidden" asp-for="@Model.vInfoViews.ElementAt(i).vHostID" name="vInfoViews[@i].vHostID" />
                        <input type="hidden" asp-for="@Model.vInfoViews.ElementAt(i).assessmentID" name="vInfoViews[@i].assessmentID" />
                        <input type="hidden" asp-for="@Model.vInfoViews.ElementAt(i).vmID" name="vInfoViews[@i].vmID" />
                    </td>
                    <td style="padding-top: 15px; width: 10%;">
                        @Model.vInfoViews.ElementAt(i).Name
                        <input type="hidden" asp-for="@Model.vInfoViews.ElementAt(i).Name" name="vInfoViews[@i].Name" />
                    </td>

                    <td style="padding-top: 15px; width: 10%;">
                        @Model.vInfoViews.ElementAt(i).Datacenter
                        <input type="hidden" asp-for="@Model.vInfoViews.ElementAt(i).Datacenter" name="vInfoViews[@i].Datacenter" />
                    </td>

                    <td style="padding-top: 15px; width: 15%;">
                        @Model.vInfoViews.ElementAt(i).Cluster
                        <input type="hidden" asp-for="@Model.vInfoViews.ElementAt(i).Cluster" name="vInfoViews[@i].Cluster" />
                    </td>

                    <td style="padding-top: 15px; width: 15%;">
                        @Model.vInfoViews.ElementAt(i).hostName
                        <input type="hidden" asp-for="@Model.vInfoViews.ElementAt(i).hostName" name="vInfoViews[@i].hostName" />
                    </td>

                    <td style="padding-top: 15px; width: 10%;">
                        @Model.vInfoViews.ElementAt(i).printClassification
                        <input type="hidden" asp-for="@Model.vInfoViews.ElementAt(i).classificationID" name="vInfoViews[@i].classificationID" />
                    </td>

                    <td style="padding-top: 15px; width: 10%;">
                        @Model.vInfoViews.ElementAt(i).Tier
                        <input type="hidden" asp-for="@Model.vInfoViews.ElementAt(i).Tier" name="vInfoViews[@i].Tier" />
                    </td>

                    <td style="padding-top: 15px; width: 25%;">
                        @Model.vInfoViews.ElementAt(i).Annotation
                        <input type="hidden" asp-for="@Model.vInfoViews.ElementAt(i).Annotation" name="vInfoViews[@i].Annotation" />
                    </td>
                </tr>
            }
        </tbody>
    </table>
</form>

我不能给出一个有效的例子，但我会提供当前问题的截图。 这些第一个屏幕截图是一切正常时发生的情况：

接下来，这就是 OnPost() 的样子：

您可以看到对象已经通过，因此当页面重新加载时，会进行更改：

现在假设我希望使用搜索栏更改带有注释的行：“PRTG Monitoring”，如下所示：

当我查看 OnPost() 时，这就是我所看到的

列表是空的！！

所以，这是一个我不知道如何解决的问题，而且我无法在其他地方找到解决方案，你们认为我应该怎么做？ 有没有办法可以用与前端每一行中的对象对应的 ID 填充新的列表 object？

Answer 1

我在.Net5 上遇到过类似的问题。 这是我的解决方案：

启动.cs

 services.AddRazorPages(x => x.Conventions.AuthorizeFolder("/"))
            .AddNewtonsoftJson(options =>
            {
                options.SerializerSettings.Formatting = Formatting.None;
                options.SerializerSettings.DateTimeZoneHandling = DateTimeZoneHandling.Utc;
                options.SerializerSettings.NullValueHandling = NullValueHandling.Ignore;
                options.SerializerSettings.ReferenceLoopHandling = ReferenceLoopHandling.Ignore;
                options.SerializerSettings.Converters.Add(new StringEnumConverter(new DefaultNamingStrategy()));
                options.SerializerSettings.Converters.Add(new UnixDateTimeConverter());
            })

为绑定属性添加 FromBody：

[BindProperty, FromBody]
    public DataTablesRequest DataTablesRequest { get; set; }

后处理程序：

 public async Task<IActionResult> OnPostLoadAsync()
    {

Ajax 调用填充数据表：

table = $('#studentsGrid').dataTable({
            processing: true, // for show progress bar
            serverSide: true, // for process server side
            filter: true, // this is for disable filter (search box)
            ordering: true,
            orderMulti: false, // for disable multiple column at once
            pageLength: 5,
            paging: true,
            responsive: true,
            searching: true,
            cache: false,
            ajax: {
                url: "@Url.Page("/Students")?handler=Load",
                type: "POST",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                async: true,
                beforeSend: function (xhr) {
                xhr.setRequestHeader("XSRF-TOKEN",
                    $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                data: function (d) { console.log(d); return  JSON.stringify(d);},
            },
            "columns": [
                { "data": "FullName", "name": "FullName", "autoWidth": true },
                { "data": "Phone", "name": "Phone", "autoWidth": true }
            ]