使用 AJAX 在 ASP.NET 上实现 jQuery DataTable
4.64/5 (9投票s)
我们将研究自定义 AJAX 接口自定义搜索元素
引言
每个 Web 开发者都使用一些 jQuery 组件。最大的问题是自定义。今天，我们将探讨在 ajax 接口上使用 jQuery DataTable 自定义搜索元素。我们使用 ASP.NET MVC 构建了这个项目。
背景
jQuery DataTable 为我们提供了用于自定义 ajax 操作的 ajax 接口。但它需要返回一些值。Ajax 将一些值发送到服务器并获得结果。这个过程有点复杂。
开发项目
您应该创建一个 ASP.NET MVC 项目（或使用示例项目）。通常不需要身份验证等。现在，创建一个简单的模型对象来生成数据表。右键单击“Models”文件夹并选择“Add>Class”菜单项。使用“Student.cs”作为类名。这个类包含以下几行
namespace DataTableSample.Models
{
public class Student
{
public int Id { get; set; }
public string Name { get; set; }
public string SurName { get; set; }
public string ClassRoom { get; set; }
}
}
我们应该创建一个名为 DTSampleController.cs 的控制器。您必须在解决方案资源管理器中单击“Controllers”文件夹，然后遵循“Add>Controller...”菜单项。在后续窗口中选择“MVC 5 Controller - Empty”，然后单击“Add”按钮。命名为“DTSampleController”。
以下是所示的类
namespace DataTableSample.Controllers
{
public class DTSampleController : Controller
{
// GET: DTSample
public ActionResult Index()
{
return View();
}
}
}
我们使用 index 方法在视图中呈现数据表。为 index 方法创建一个视图。但是，我们不提供方法，因为我们在 ajax 操作期间使用学生模型。
好的，我们进入视图界面。在继续之前，我们必须在 NuGet 中添加 jquery.datatables 包，或者如果您愿意，可以手动添加。在项目中初始化 jquery.datatables 之后，在 Views/Sahred/_Layout.cshtml 中插入引用，如下所示（粗体）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
@RenderSection("scripts", required: false)
</body>
</html>
然后返回到 index.cshtml。为学生模型创建一个 HTML 表格，如下所示
@{
ViewBag.Title = "Index";
}
<div>
<table id="demoTable">
<thead>
<tr>
<td>Name</td>
<td>Surname</td>
<td>Classroom</td>
</tr>
</thead>
</table>
</div>
请注意，没有 tbody 标签。这是因为 AJAX 将生成它。现在在页面下编写数据表脚本。
@section scripts {
<script type="text/javascript">
$(document).ready(function () {
$("#demoTable").dataTable();
});
</script>
}
我们必须运行页面并进行控制。它会给我们下面的图片
您的显示应该与上图匹配。
接下来，我们在控制器中创建一个方法用于 ajax 操作。我们的想法是创建示例数据，对其进行过滤并呈现。您应该在现实世界中使用真实的数据模型。
public ActionResult Students()
{
List<Models.Student> students = new List<Models.Student>();
students.Add(new Models.Student { Id = 1, Name = "Mike", SurName = "Mikey", ClassRoom = "8A" });
students.Add(new Models.Student { Id = 2, Name = "John", SurName = "Salary", ClassRoom = "8B" });
students.Add(new Models.Student { Id = 3, Name = "Steve", SurName = "Brown", ClassRoom = "7A" });
string filterName = Request.QueryString["name"];
string filterSurName = Request.QueryString["surname"];
string filterClassroom = Request.QueryString["classroom"];
var result = from s in students
where (string.IsNullOrEmpty(filterName) || s.Name.Equals(filterName))
&& (string.IsNullOrEmpty(filterSurName) || s.SurName.Equals(filterSurName))
&& (string.IsNullOrEmpty(filterClassroom) || s.ClassRoom.Equals(filterClassroom))
select s;
var model = result.ToList();
return Json(model, JsonRequestBehavior.AllowGet);
}
好的，在浏览器中调用页面。
如果您看到页面如所示，一切都正常。接下来，我们将对过滤器进行一个小测试。将以下内容添加到 URL：?name=Mike。
完成测试。现在在 index.cshtml 中编写 ajax 接口。
@section scripts {
<script type="text/javascript">
var filterValues = {};
$(document).ready(function () {
$("#demoTable").dataTable({
serverSide: true,
bFilter: false,
columns: [
{ data: "Name" },
{ data: "SurName" },
{ data: "ClassRoom" }
],
ajax: function (data, callback, settings) {
filterValues.draw = data.draw;
filterValues.start = data.start;
filterValues.length = data.length;
$.ajax({
url: '/DTSample/Students',
method: 'GET',
data: filterValues
}).done(callback);
}
});
});
</script>
}
查看代码
filterValues将值发送到服务器端。serverSide: true是在服务器上执行操作所必需的。bFilter: false禁用客户端过滤。columns将列数据顺序解析为 html 表格列。ajax: function(data, callback, settings)ajax 操作自定义。data 包含数据表值，callback 用于呈现给定数据，setting 是一些特殊值filterValues.draw这是一个序列号，仅用于回发。您在数据表模型中看到这个。来自数据变量filterValues.start来自数据变量，用于起始记录号。不回发。仅使用服务器端分页filterValues.length来自数据变量，用于服务器端分页的记录长度。不回发。
我们的学生模型只是列表数据，但数据表使用它自己的格式。它需要元素。
draw 是一个 JSON 元素并且是数字，recordsTotal 是一个 JSON 元素并且是数字，表示总记录数，recordsFiltered 是一个 JSON 元素并且是数字，表示过滤后的总记录数，data 是一个 JSON 数组并包含我们的学生对象
现在为 DataTable 创建一个模型，并在类文件中将其命名为 DataTable。在 Models 文件夹中创建一个类，如下所示
namespace DataTableSample.Models
{
public class DataTable
{
public int draw { get; set; }
public int recordsTotal { get; set; }
public int recordsFiltered { get; set; }
public Student[] data { get; set; }
}
}
更改控制器中的 Students 方法以进行操作之后
public ActionResult Students()
{
Models.DataTable dataTable = new Models.DataTable();
dataTable.draw = int.Parse(Request.QueryString["draw"]);
List<Models.Student> students = new List<Models.Student>();
students.Add(new Models.Student { Id = 1, Name = "Mike", SurName = "Mikey", ClassRoom = "8A" });
students.Add(new Models.Student { Id = 2, Name = "John", SurName = "Salary", ClassRoom = "8B" });
students.Add(new Models.Student { Id = 3, Name = "Steve", SurName = "Brown", ClassRoom = "7A" });
string filterName = Request.QueryString["name"];
string filterSurName = Request.QueryString["surname"];
string filterClassroom = Request.QueryString["classroom"];
var result = from s in students
where (string.IsNullOrEmpty(filterName) || s.Name.Equals(filterName))
&& (string.IsNullOrEmpty(filterSurName) || s.SurName.Equals(filterSurName))
&& (string.IsNullOrEmpty(filterClassroom) || s.ClassRoom.Equals(filterClassroom)) select s;
dataTable.data = result.ToArray();
dataTable.recordsTotal = students.Count;
dataTable.recordsFiltered = result.Count();
return Json(dataTable, JsonRequestBehavior.AllowGet);
}
现在我们的模型数据表。记住，draw 值发回。
recodsTotal获取所有学生的值recordsFiltered获取过滤后的学生的值。
我们的学生列表很小，因此我们不使用分页。但是您必须在现实世界项目中从查询字符串中使用 start 和 length 值。好的，让我们看一下页面
现在在页面上添加自定义过滤器元素并编写代码。
<div class="container" style="margin-top: 10px;">
<div class="row">
<div class="col-md-6">
<div class="well form-horizontal">
<div class="form-group">
<label class="control-label col-md-4">Name</label>
<div class="col-md-8">
<input type="text" id="filterName" value="" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4">SurName</label>
<div class="col-md-8">
<input type="text" id="filterSurName" value="" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4">ClassRoom</label>
<div class="col-md-8">
<input type="text" id="filterClassRoom" value="" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4"> </label>
<div class="col-md-8">
<button type="button" class="btn btn-default" id="filterBtn">Filter</button>
</div>
</div>
</div>
</div>
</div>
<table id="demoTable">
<thead>
<tr>
<td>Name</td>
<td>Surname</td>
<td>Classroom</td>
</tr>
</thead>
</table>
</div>
@section scripts {
<script type="text/javascript">
var filterValues = {};
$(document).ready(function () {
var refDataTable = $("#demoTable").dataTable({
serverSide: true,
bFilter: false,
columns: [
{ data: "Name" },
{ data: "SurName" },
{ data: "ClassRoom" }
],
ajax: function (data, callback, settings) {
filterValues.draw = data.draw;
filterValues.start = data.start;
filterValues.length = data.length;
$.ajax({
url: '/DTSample/Students',
method: 'GET',
data: filterValues
}).done(callback);
}
});
$("#filterBtn").click(function () {
filterValues.name = $("#filterName").val();
filterValues.surname = $("#filterSurName").val();
filterValues.classroom = $("#filterClassRoom").val();
refDataTable.fnDraw();
});
});
</script>
}
创建表单元素并将绑定按钮添加到 click 事件。我们正在创建一个供以后使用的引用（var refDataTable = ... 粗体显示）。fnDraw 函数（或同名 draw）更新表格。
现在我们接近最后的测试。
恭喜。它运行良好。
注意事项
您必须更新 jQuery 1.12.3 及以下版本。
更多
如果您想了解更多信息，请访问 https://datatables.net.cn/reference/api/