无法在 ASP.NET Core Web API 中显示数据表

问题描述 投票：0回答：2

我必须在 ASP.NET Core Web API 中显示数据表。

这是我的代码。

控制器：

[Route("api/[controller]")]
[ApiController]
public class MapDataTableDemo : ControllerBase
{
    Product p;
    
    public MapDataTableDemo()
    {
        p = new Product();
    }
     
    [HttpGet]
    public async Task<IActionResult> MapDataTable()
    {
        var response = p.GetDataTable();
        return Ok(response);
    }
}

产品型号类别：

public class Product
{
    public DataTable dataTable { get; set; }

    public DataTable GetDataTable()
    {
        this.dataTable = new DataTable();
        this.dataTable.Columns.Add("product name");
        this.dataTable.Columns.Add("product price");
        this.dataTable.Rows.Add("mobile", 20000);
        this.dataTable.Rows.Add("tv", 15000);
        this.dataTable.Rows.Add("washing machine", 30000);
        return this.dataTable;
    }
}

当我调试API时，我可以看到响应，但无法显示数据表。

我收到错误如下：

错误：响应状态为 500

响应正文

System.NotSupportedException：不支持“System.Type”实例的序列化和反序列化。路径：$.Columns.DataType.

System.NotSupportedException：不支持“System.Type”实例的序列化和反序列化。

在 System.Text.Json.Serialization.Converters.UnsupportedTypeConverter

1.Write(Utf8JsonWriter writer, T value, JsonSerializerOptions options)   at System.Text.Json.Serialization.JsonConverter
1.TryWrite（Utf8JsonWriter writer，T＆值，JsonSerializerOptions选项，WriteStack＆状态）
在 System.Text.Json.Serialization.Metadata.JsonPropertyInfo
1.GetMemberAndWriteJson(Object obj, WriteStack& state, Utf8JsonWriter writer)   at System.Text.Json.Serialization.Converters.ObjectDefaultConverter
1.OnTryWrite（Utf8JsonWriter writer，T 值，JsonSerializerOptions 选项，WriteStack& 状态）
在 System.Text.Json.Serialization.JsonConverter
1.TryWrite(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)   at System.Text.Json.Serialization.JsonConverter
1.TryWriteAsObject（Utf8JsonWriter writer，对象值，JsonSerializerOptions 选项，WriteStack& 状态）
在 System.Text.Json.Serialization.JsonConverter
1.TryWrite(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)   at System.Text.Json.Serialization.Converters.IEnumerableConverter
1.OnWriteResume（Utf8JsonWriter writer，TCollection 值，JsonSerializerOptions 选项，WriteStack& 状态）
在 System.Text.Json.Serialization.JsonCollectionConverter`2.OnTryWrite（Utf8JsonWriter writer，TCollection 值，JsonSerializerOptions 选项，WriteStack& 状态）

有什么解决办法吗？

谢谢！

c# asp.net-core asp.net-core-webapi .net-6.0
2个回答
9
投票

安装 

Microsoft.AspNetCore.Mvc.NewtonsoftJson
NuGet 包。

在Program.cs中添加这行代码：

builder.Services.AddControllers().AddNewtonsoftJson();

它对我有用。

0
投票

在使用 ASP.NET Core 和 DataTables 时，尝试在没有传统 MVC 控制器的情况下实现服务器端处理时可能会遇到问题。此解决方案说明了如何在 ASP.NET Core 项目中直接将 DataTables 与 Razor Pages 集成，解决 Ajax 请求和处理服务器端数据处理等常见问题。

问题

尝试在不使用控制器的情况下在 Razor Pages 中设置数据表时会出现挑战。常见问题包括：

  • Ajax 请求失败。
  • 处理服务器端分页、排序和搜索。
  • 以预期的方式格式化数据表的数据。

解决方案

这是使用 Razor Pages 实现 DataTable 的分步指南，包括如何正确配置 Ajax 和服务器端处理。

  1. Razor 页面标记

在 Razor 页面中创建一个表，该表将由 DataTables** 填充。您可以添加用于添加、编辑或删除记录等操作的按钮：

@page
@model YourApp.Pages.Vehicules.IndexModel

<div class="toolbar chrome-style-toolbar mb-3">
    <button onclick="OnNew()" type="button" class="btn btn-chrome-style" data-bs-toggle="modal" data-bs-target="#newWindow">
        <i class="fas fa-plus"></i> New
    </button>
    <button onclick="OnEdit()" id="editButton" type="button" class="btn btn-chrome-style" data-bs-toggle="modal" data-bs-target="#editWindow">
        <i class="fas fa-edit"></i> Edit
    </button>
    <button id="deleteButton" type="button" class="btn btn-chrome-style" data-bs-toggle="modal" data-bs-target="#confirmationModal">
        <i class="fas fa-trash"></i> Delete
    </button>
</div>

<div class="container">
    <div class="table-responsive">
        <table id="maindatatable" class="table table-bordered">
            <thead>
                <tr>
                    <th>UID</th>
                    <th>License Plate</th>
                    <th>Brand</th>
                    <th>Chassis Number</th>
                    <th>Client</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table> 
    </div>
</div>

@section Scripts {
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/datatables/js/jquery.dataTables.min.js"></script>
    <script src="~/js/vehicules.js"></script>
}
  1. 用于数据表初始化的 JavaScript

在 JavaScript 文件 (

vehicules.js
) 中，初始化 DataTables 并将其指向获取数据以进行服务器端处理的 API：

$(document).ready(function () {
    $('#maindatatable').DataTable({
        ajax: {
            url: "/api/Vehicules/GetVehiculeList",  // The API that serves the data
            type: "POST"
        },
        processing: true,
        serverSide: true,
        filter: true,
        columns: [
            { "data": "uid", name: "UID", "visible": false },
            { "data": "matricule", name: "License Plate" },
            { "data": "marque", name: "Brand" },
            { "data": "numeroChassis", name: "Chassis Number" },
            { "data": "client", name: "Client" }
        ]
    });
});
  1. 控制器逻辑

创建一个控制器来处理服务器端请求。该逻辑将管理分页、排序、搜索，并以 DataTables 期望的格式发回数据。

[Route("api/[controller]")]
[ApiController]
public class VehiculesController : ControllerBase
{
    private readonly WebDbContext _context;

    public VehiculesController(WebDbContext context)
    {
        _context = context;
    }

    [HttpPost("GetVehiculeList")]
    public IActionResult GetVehiculeList()
    {
        var draw = Request.Form["draw"].FirstOrDefault();
        var sortColumn = Request.Form["columns[" + Request.Form["order[0][column]"].FirstOrDefault() + "][name]"].FirstOrDefault();
        var sortColumnDirection = Request.Form["order[0][dir]"].FirstOrDefault();
        var searchValue = Request.Form["search[value]"].FirstOrDefault();
        int pageSize = Convert.ToInt32(Request.Form["length"].FirstOrDefault() ?? "0");
        int skip = Convert.ToInt32(Request.Form["start"].FirstOrDefault() ?? "0");

        // Base query
        var query = _context.Vehicules
                            .Include(v => v.Client)
                            .Include(v => v.Marque)
                            .AsQueryable();

        // Apply search filter
        if (!string.IsNullOrEmpty(searchValue))
        {
            query = query.Where(x => x.Matricule.ToLower().Contains(searchValue.ToLower()) ||
                                     x.NumeroChassis.ToLower().Contains(searchValue.ToLower()) ||
                                     x.Client.Nom.ToLower().Contains(searchValue.ToLower()) ||
                                     x.Marque.Libelle.ToLower().Contains(searchValue.ToLower()));
        }

        // Get total records count before pagination
        var totalRecords = query.Count();

        // Apply sorting if needed
        if (!string.IsNullOrEmpty(sortColumn) && !string.IsNullOrEmpty(sortColumnDirection))
        {
            if (sortColumnDirection == "asc")
                query = query.OrderBy(x => EF.Property<object>(x, sortColumn));
            else
                query = query.OrderByDescending(x => EF.Property<object>(x, sortColumn));
        }

        // Apply pagination
        var vehicules = query.Skip(skip).Take(pageSize)
                             .Select(v => new
                             {
                                 UID = v.UID,
                                 Matricule = v.Matricule,
                                 Marque = v.Marque.Libelle,
                                 NumeroChassis = v.NumeroChassis,
                                 Client = v.Client.Nom,
                                 DateCreate = v.DateCreate,
                                 DateUpdate = v.DateUpdate
                             })
                             .ToList();

        // Return data in format DataTables expects
        var returnObj = new
        {
            draw = draw,
            recordsTotal = totalRecords,
            recordsFiltered = totalRecords,  // Implement custom filter logic if needed
            data = vehicules
        };

        return Ok(returnObj);
    }
}
  1. 确保要点
  2. 服务器端处理：确保在 DataTables 初始化中设置 
    serverSide: true
    以启用服务器端处理。
  3. 搜索和排序：在查询中实施过滤和排序以获得准确的结果。
  4. API 端点：确保 
    ajax
    URL 指向以 JSON 格式返回数据的正确 API 端点。

为什么这个解决方案有效

此设置可确保 DataTables 正确初始化并从 ASP.NET Core API 检索其数据。控制器以 DataTables 期望的格式返回数据，包括分页、排序和搜索功能。此结构还允许您根据应用程序的需要轻松集成其他操作（例如创建、编辑和删除记录）。

常见问题和修复

  • 500 错误：确保 API 路由正确且与 DataTables 请求匹配。
  • Data Not Showing：验证返回的数据格式，尤其是API返回的字段名称。

此方法解决了 DataTables 和 ASP.NET Core Razor Pages 的常见问题，并且应该为面临类似问题的其他人提供指导。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.