ASP.NET MVC 应用程序中的 jQuery 数据表

Question

我正在尝试将我的用户列表数据提取到 jQuery 数据表中，但它不是将数据填充到我的数据表中，而是仅返回包含我的数据的原始 JSON 格式页面。

我在互联网上搜索了大部分内容，我正在应用相同的技术。

这是我的 ASP.NET MVC 操作方法：

[Route("Admin/Users")]
public ActionResult GetAllUsers()
{
    List<UsersModel> datas = new List<UsersModel>();
    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);
        }
    }
    else
    {
        ViewBag.ErrorMessage = "No Users Found";
    }

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

这是我在视图中使用的 jQuery 数据表

GetAllUsers.cshtml

:

@model SiteAdministrator1._1._0.Models.UsersModel

@{
    ViewBag.Title = "GetAllUsers";
    Layout = "~/Views/Shared/_adminLayout.cshtml";
}

<h2>GetAllUsers</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table" id="usersList">
    <thead>
        <tr>
            <th>
                UserID
            </th>
            <th>
                UserName
            </th>
            <th>
                Password
            </th>
            <th>
                SchoolCode
            </th>
            <th>
                BranchCode
            </th>
            <th>
                IsActive
            </th>
        </tr>
    </thead>
    <tbody></tbody>

</table>
@section scripts
{
    <script>
        $(document).ready(function () {
            $('#usersList').Datatable({
                "ajax": {
                    "url": "@Url.Action("GetAllUsers", "Admin")",
                    "type": "GET",
                    "datatype": "json"
                },
                "columns": [
                    { "data": "UserID" },
                    { "data": "UserName" },
                    { "data": "Password" },
                    { "data": "SchoolCode" },
                    { "data": "BranchCode" },
                    { "data": "IsActive" },

                    // Add other columns as per your model
                ]
            });
        });
</script>

注：

1. 我已经集成了所有 jQuery 和 Datatable 库。
2. 我已经检查了我的数据表连接，即连接字符串）和存储过程中编写的查询
3. 我已经使用调试器来查看是否能够从数据库中获取数据并且它工作得很好
4. 我通过 ADO.NET 获取所有数据库（没有实体数据模型，没有实体框架）
5. 如果我只是在列表模板中获取它并绑定我的模型，它可以正常工作并在 ASP.NET MVC 列表模板中显示数据

Answer 1

[Route("Admin/Users")]
public ActionResult GetAllUsers()
{
    List<UsersModel> datas = new List<UsersModel>();

    try
    {
        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 });
        }
        else
        {
            return Json(new { error = "No Users Found" });
        }
    }
    catch (Exception ex)
    {
        // Log the exception for troubleshooting.
        return Json(new { error = "An error occurred while fetching users." });
    }
}

你也可以尝试一下吗？

Answer 2

[Route("Admin/Users")]
public ActionResult GetAllUsers() 
{
    var initialData = _helper.GetAllUsers(); 

    var datas = new List<UsersModel>();
    if (initialData.Rows.Count > 0)
    {
        foreach (DataRow dr in initialData.Rows)
        {
            UsersModel user = 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(user);
        }
    }

    return View("GetAllUsers", datas); }

[Route("Admin/GetAllUsersData")]
public ActionResult GetAllUsersData()
{
    // Fetch and return data in JSON format
    var datas = _helper.GetAllUsers(); 

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

这是一种更好的方法，因为根据网页和客户端-服务器交互的方式，通过不同的操作方法将渲染视图和获取 JSON 数据分开。