如何将JSON数据传递至DataTable并在ASP.NET Core Razor Pages中正确展示

你当前的核心问题是表单直接提交到API接口，导致浏览器跳转到API路由并显示原始JSON，而非留在页面上让DataTable加载数据。此外代码中还有几处语法和逻辑错误，也会影响功能正常运行。

1. 阻止表单默认提交，改用AJAX触发数据加载 #

放弃表单的默认跳转提交行为，通过JavaScript发送AJAX请求获取数据，再将数据更新到DataTable中。

2. 修正各文件代码 #

（1）StoreReport.cshtml - 简化交互元素（去掉表单，改用独立下拉框和按钮）

<div class="row">
    <div class="col-4 d-inline-block">
        <select id="PackageID" asp-for="Package.Id" asp-items="Model.StoreList" class="form-select">
            <option disabled selected>-- Select Store --</option>
        </select>
        <span asp-validation-for="StoreList" class="text-danger"></span>
    </div>

    <div class="col-4 d-inline-block">
        <button id="fetchBtn" class="btn btn-primary">Fetch Report</button>
    </div>
</div>
<div class="row">
    <table id="DTStoreReport">
        <thead>
            <tr>
                <th>Store Name</th>
                <th>Package Name</th>
                <th>Contact</th>
            </tr>
        </thead>
    </table>
</div>

@section Scripts{
    <script src="~/js/storeReport.js"></script>
}

（2）StoreReportController - 修正参数与路由配置

[Route("api/[controller]")]
[ApiController]
public class StoreReportController : ControllerBase
{
    private List<YourReportModel> LocationsReport { get; set; } // 替换为你的实际报告模型类

    [HttpPost("FetchReport")]
    public IActionResult FetchReport(int PackageID)
    {
        if (PackageID != 0)
        {     
            GetLocationsReport(PackageID); // 确保GetLocationsReport方法接收PackageID参数并填充数据
        }

        return Json(new { data = LocationsReport });
    }

    private void GetLocationsReport(int packageId)
    {
        // 这里写入根据packageId获取报告数据的逻辑，填充LocationsReport
    }
}

注意：确保你的报告模型类包含StoreName、PackageName、Contact三个属性，与前端DataTable配置对应。

（3）storeReport.js - 修正语法错误，添加数据加载逻辑

$(document).ready(function () {
    // 初始化空的DataTable
    let dataTable = $('#DTStoreReport').DataTable({
        buttons: ["copy", "csv", "excel", "pdf", "print"],
        columns: [
            { "data": "StoreName", "width": "15%" },
            { "data": "PackageName", "width": "15%" },
            { "data": "Contact", "width": "10%" }
        ],
        "width": "100%"
    });

    // 监听按钮点击，触发数据加载
    $('#fetchBtn').click(function () {
        let packageId = $('#PackageID').val();
        if (!packageId || packageId === "") {
            alert("请选择门店");
            return;
        }

        // 发送AJAX请求获取数据
        $.ajax({
            url: "/api/StoreReport/FetchReport",
            type: "POST",
            data: { PackageID: packageId },
            success: function (response) {
                // 清空现有数据，加载新数据并渲染
                dataTable.clear().rows.add(response.data).draw();
            },
            error: function (xhr, status, error) {
                console.error("加载数据失败:", error);
                alert("加载数据失败，请稍后重试");
            }
        });
    });
});

修正点：原代码中buttons"缺少前引号、columns最后一项多了逗号、结尾缺少闭合括号，这些语法错误会导致JavaScript无法执行。

3. 核心逻辑说明 #

• 不再依赖表单默认提交，通过按钮点击触发AJAX请求，获取数据后更新DataTable，避免页面跳转
• 初始化DataTable时不自动加载数据，改为用户选择门店后按需加载
• 控制器添加[ApiController]和路由特性，确保API路由能被正确匹配

内容的提问来源于stack exchange，提问作者Markeeh