ASP.NET MVC中jQuery Datatable无法加载数据，直接返回JSON页面求助

你的核心问题有两个：一是视图与数据接口的Action混淆，导致访问页面时直接返回JSON；二是Datatable初始化方法拼写错误，导致表格未正确初始化。

1. 拆分Action，分离视图与数据请求 #

你当前的GetAllUsers Action直接返回JSON，而非渲染视图页面，所以访问该路径时会直接输出原始JSON。需要拆分出两个Action：一个负责加载视图，一个负责提供数据。

修改Admin控制器代码：

// 负责渲染用户列表视图的Action
public ActionResult GetAllUsers()
{
    return View();
}

// 负责返回JSON数据的Action，修改路由与名称避免冲突
[Route("Admin/GetUsersData")]
public ActionResult GetUsersData()
{
    List<UsersModel> datas = new List<UsersModel>();
    var Dt = _helper.GetAllUsers();

    if (Dt.Rows.Count > 0)
    {
        foreach (DataRow dr in Dt.Rows)
        {
            UsersModel users = new UsersModel
            {
                UserID = Convert.ToInt32(dr["USERID"]),
                UserName = dr["USERNAME"].ToString(),
                Password = dr["PASSWORD"].ToString(),
                SchoolCode = dr["SCHOOLCODE"].ToString(),
                BranchCode = dr["MAINACCOUNTID"].ToString(),
                IsActive = Convert.ToBoolean(dr["ISACTIVE"])
            };
            datas.Add(users);
        }
    }

    return Json(new { data = datas }, JsonRequestBehavior.AllowGet);
}

2. 修正Datatable初始化代码 #

Datatable的正确初始化方法是DataTable（首字母大写T），原代码中的Datatable拼写错误会导致表格无法正常初始化。同时要修改AJAX请求的URL指向新的数据接口Action。

修改GetAllUsers.cshtml中的脚本部分：

@section scripts
{
    <script>
        $(document).ready(function () {
            // 修正拼写：Datatable → DataTable
            $('#usersList').DataTable({
                "ajax": {
                    "url": "@Url.Action("GetUsersData", "Admin")",
                    "type": "GET",
                    "datatype": "json"
                },
                "columns": [
                    { "data": "UserID" },
                    { "data": "UserName" },
                    { "data": "Password" },
                    { "data": "SchoolCode" },
                    { "data": "BranchCode" },
                    { "data": "IsActive" }
                ]
            });
        });
    </script>
}

3. 额外优化建议 #

• 视图顶部的@model声明可以改为@model IEnumerable<SiteAdministrator1._1._0.Models.UsersModel>（或直接移除，因为用AJAX加载数据），避免单个模型与列表场景不匹配。
• 确认布局页_adminLayout.cshtml中正确引入了jQuery和Datatable的依赖文件：

  <!-- jQuery核心库 -->
  <script src="~/Scripts/jquery.min.js"></script>
  <!-- DataTables样式 -->
  <link href="~/Content/DataTables/css/dataTables.bootstrap.min.css" rel="stylesheet" />
  <!-- DataTables核心脚本 -->
  <script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
  <script src="~/Scripts/DataTables/dataTables.bootstrap.min.js"></script>
  

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