Question

我创建了一个带有ActionResult索引的控制器，并创建了一个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 wile时，我得到了Json结果我希望在Jquery数据表中显示列表：

[{ “ID”：1， “名称”： “阿里”， “年龄”：21， “REGNO”： “Bcs153048”}，{ “ID”：2 “名称”： “塔尔哈”，”年龄 “：22，” REGNO “：” Bcs153044 “}，{” ID “：3，” 名称 “：” 鲁格曼”， “年龄”：20， “REGNO”： “Bcs153064”}，{ “ID”：4 ， “名称”： “Saad的”， “年龄”：19， “REGNO”： “Bcs153054”}，{ “ID”：5 “名称”： “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>

调用partialview

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

Answer 2

你说

＆＃34;当我运行应用程序并导航到时，我得到了Json结果 /学生/索引＆＃34;

...是的，这是对的，因为那是＆＃34;学生/索引＆＃34;返回代码。但是你为什么直接在浏览器中导航？它不会导致您可以向用户显示的视图。它是应该请求该数据的ajax调用（在DataTables设置中定义）。我想也许你在这两件事之间感到困惑。

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

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

例如：

＆＃34;学生＆＃34;控制器：

//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);
}

＆＃34;学生/索引＆＃34;视图：

<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> 
}

空Jquery数据表

2 个答案: