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 }
            ]