我创建了一个带有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
答案 0 :(得分:-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>
答案 1 :(得分:-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>
}