空的 Jquery 数据表

Question

我创建了一个带有 ActionResult Index 的控制器并创建了一个 Student 类列表：

public ActionResult Index()
{
    var list = new List<Student>()
    {
        new Student{Id=1,RegNo="Bcs153048",Name="Ali",Age=21,},
        new Student{Id=2,RegNo="Bcs153044",Name="Talha",Age=22,},
        new Student{Id=3,RegNo="Bcs153064",Name="Luqman",Age=20,},
        new Student{Id=4,RegNo="Bcs153054",Name="Saad",Age=19,},
        new Student{Id=5,RegNo="Bcs153036",Name="Hashir",Age=20,},
    };
    //var  jsonString = JsonConvert.SerializeObject(list);
    //return View(list);
    return Json(list , JsonRequestBehavior.AllowGet);
}

我想查看 JQuery 数据表中的学生列表，我做了这样的事情：

<table id="students" class="table table-bordered table-hover">
<thead>
    <tr>
        <th>Id</th>
        <th>Registeration No</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
</thead>
<tbody></tbody>

然后在下面我写了脚本

@section scripts
{
    <script>

    $(document).ready( function () {
        var dataTable = $("#students").DataTable({
            ajax: {
                url: "/student/index",               
                dataSrc: "",   
            },
            columns: [
            {
                data: "Id"
            },
            {
                data: "RegNo",
            },
            {
                data: "Name"
            },
            {
                data: "Age",
            }
            ]
        });
    });
    </script> 
}

但是当我运行应用程序并导航到 /Student/index 时我得到了 Json 结果，我想在 Jquery 数据表中显示列表：

[{"Id":1,"Name":"Ali","Age":21,"RegNo":"Bcs153048"},{"Id":2,"Name":"Talha","年龄":22,"RegNo":"Bcs153044"},{"Id":3,"Name":"Luqman","Age":20,"RegNo":"Bcs153064"},{"Id":4 ,"姓名":"Saad","年龄":19,"RegNo":"Bcs153054"},{"Id":5,"Name":"Hashir","年龄":20,"RegNo":" Bcs153036"}]

我在 Bundle.config 中添加了如下库： Libraries in BundleConfig

Answer 1

添加部分视图并添加以下脚本和 html 表。在主视图中调用该局部视图。

<script>
$(document).ready(function () {
    //Call student Details jsonResult Method
    $.getJSON("/student/index",
    function (json) {
    var tr;
    //Append each row to html table
    for (var i = 0; i < json.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + json[i].Id + "</td>");
            tr.append("<td>" + json[i].Name + "</td>");
            $('table').append(tr);
        }
    });
});

<table class="table table-bordered table-condensed table-hover table-striped">
    <thead>
    <tr>
    <th>Id</th>
    <th>Name</th>
    <th>City</th>
    <th>Address</th>
    </tr>
    </thead>
    <tbody></tbody>

调用局部视图

<div style="margin-top:20px">@Html.Partial("studentDetails");</div>

Answer 2

你说

“当我运行应用程序并导航到 /学生/索引“

...是的，这是正确的，因为这就是“学生/索引”在您的代码中返回的内容。但是你为什么要直接在浏览器中导航呢？它不会导致您可以向用户显示的视图。应该请求该数据的是 ajax 调用（在 DataTables 设置中定义）。我想你可能对这两件事感到困惑。

在您的浏览器中，您应该导航到呈现数据表的视图。这将有一个单独的操作方法，它返回一个完整的 HTML 视图，而不是 JSON，因此也有一个与获取 JSON 的方法不同的 URL。

因此，当您向浏览器中的主视图发出 HTTP 请求时，它会将视图 HTML 加载到浏览器中。然后该页面上的 JS 代码运行，加载 DataTable，通过 ajax 触发单独的 HTTP 请求以获取 JSON 数据。

例如：

“学生”控制器：

//load the view
[HttpGet]
public ActionResult Index()
{
  return View();
}

//load the JSON
[HttpGet]
public JsonResult GetStudentList()
{
    var list = new List<Student>()
    {
        new Student{Id=1,RegNo="Bcs153048",Name="Ali",Age=21,},
        new Student{Id=2,RegNo="Bcs153044",Name="Talha",Age=22,},
        new Student{Id=3,RegNo="Bcs153064",Name="Luqman",Age=20,},
        new Student{Id=4,RegNo="Bcs153054",Name="Saad",Age=19,},
        new Student{Id=5,RegNo="Bcs153036",Name="Hashir",Age=20,},
    };
    return Json(list , JsonRequestBehavior.AllowGet);
}

“学生/索引”视图：

<table id="students" class="table table-bordered table-hover">
<thead>
    <tr>
        <th>Id</th>
        <th>Registration No</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
</thead>
<tbody></tbody>
</table>

@section scripts
{
    <script>

    $(document).ready( function () {
        var dataTable = $("#students").DataTable({
            ajax: {
                url: '@Url.Action("GetStudentList", "student")', //note the use of a HTML helper to generate the correctly routed URL, and also the change of action name to "GetStudentList"
                dataSrc: "",   
            },
            columns: [
            {
                data: "Id"
            },
            {
                data: "RegNo",
            },
            {
                data: "Name"
            },
            {
                data: "Age",
            }
            ]
        });
    });
    </script> 
}