使用 FooTable 创建响应式 HTML 表格，并使用 Handlebars.Js 应用客户端绑定
4.50/5 (20投票s)
在本文中，我们将使用 FooTable 插件创建一个响应式 HTML 表格，并结合 Handlebars.js 库实现客户端数据绑定。
想法
我们的主要思想是消除服务器端网格控件及其关联的视图状态，转而使用 HTML 表格元素，从而提高页面性能。此外，我们还将为表格添加响应式行为，使其能够适应所有设备。
摘要
在本文中，我们将使用 FooTable 插件创建响应式 HTML 表格，并使用 Handlebars.js 模板库更新客户端绑定逻辑。这是对使用文章 使用 Bootstrap 和 Web API 创建 ASP.NET Web Forms 应用程序 创建的项目进行的扩展。
进程
- 创建 HTML 表格并绑定使用 Web API 检索的数据
- 使用 FooTable 插件为 HTML 表格添加响应式行为
- 使用 Handlebars.js 库更新客户端数据绑定逻辑
A) 创建 HTML 表格并绑定使用 Web API 检索的数据
首先，我们需要在现有项目中创建一个 Model 文件夹，以便存放我们的“Member”实体。
请创建一个新的 Member.cs 类，并包含所有必需的属性。
public class Member
{
public int MemberId { get; set; }
public string FirstName { get; set; }
public string MiddleName { get; set; }
public string LastName { get; set; }
public string EmailId { get; set; }
public string NickName { get; set; }
public int Age { get; set; }
public string IsActive { get; set; }
public DateTime CreatedDate { get; set; }
public string Company { get; set; }
}
接下来，我们将创建一个 Repository.cs 类来获取预定义的成员列表。
注意：请将 Model 和 Repository 替换为您现有的业务逻辑实体和数据访问。
public class Repository
{
public List<Member> GetMembers()
{
return new List<Member> {
new Member
{
MemberId = 1, FirstName = "Jeffrey", MiddleName = "Preston",
LastName = "Jorgensen", EmailId = "abc1@xyz.com",NickName = "Jeff Bezos",
Age=50, IsActive = "Active", CreatedDate = new DateTime(2014,9,9), Company ="Amazon"
},
new Member
{
MemberId = 2, FirstName = "Satyanarayana", MiddleName = "",
LastName = "Nadella", EmailId = "abc2@xyz.com",NickName = "Satya Nadella",
Age = 46,IsActive = "Active", CreatedDate = new DateTime(2014,9,9), Company="Microsoft"
},
new Member
{
MemberId = 3, FirstName = "Adele", MiddleName = "Laurie Blue",
LastName = "Adkins", EmailId = "abc3@xyz.com",NickName = "Adele",
Age = 26,IsActive = "Active", CreatedDate = new DateTime(2014,9,9), Company="Singer"
},
new Member
{
MemberId = 4, FirstName = "David" ,MiddleName = "Robert Joseph",
LastName = "Beckham", EmailId = "abc4@xyz.com",NickName = "Beckham",
Age = 39,IsActive = "Inactive", CreatedDate = new DateTime(2014,9,9), Company="Soccer Player"
}
};
}
}
现在，我们需要创建一个 Controller 来访问与成员相关的数据。在我们的 controller 文件夹中选择一个名为 MemberController.cs 的空 Web API 2 Controller，并添加一个名为 GetMembers 的操作方法来列出所有成员。
public class MemberController : ApiController
{
Repository _repository = new Repository();
[HttpGet]
[ActionName("GetMembers")]
public string GetMembers()
{
List<Member> members = _repository.GetMembers();
return JsonConvert.SerializeObject(members);
}
}
注意：在 Controller 类中，请获取 Model 和 Newtosoft Json 的相应引用。
现在，我们的解决方案看起来像这样
生成并运行应用程序，以检查我们是否可以在 URL 处访问成员控制器。
https://:2469/api/Member/GetMembers
好的，现在我们可以看到 JSON 格式的成员列表了。请在现有主页面上创建一个新的内容页面 MemberList.aspx，以表格形式显示成员列表。
注意：内容页面中有三个 <div> 元素。第一个 <div> 用于存放页面标题，第二个 <div> 用于存放包含数据的实际表格 (gvMembers)，最后一个是隐藏的 <div> (BodyStructure)，用于存放行结构。
我们有一个带有 thead 部分（包含所有必需的列标题）和 tbody 部分（包含警告消息“未找到记录！”）的表格。要查看页面，请将新内容页面设置为启动页并运行应用程序。
接下来，我们将在页面 ScriptSection 中添加 JavaScript 逻辑，以从我们的 API 获取数据。
最佳实践：将所有逻辑相关的脚本放置在JavaScript 容器中，以避免 JavaScript 变量泄露为全局变量。容器类似于 C# 类，我们可以在其中封装成员。我们的容器看起来像这样：
注意：从成功回调/Promise 方法 getMembersSuccess 中可以看到，我们正在循环遍历数据以克隆行结构，并将值分配给每个列。最后，将新行追加到表格 tbody 部分。
我们将把服务 API 链接添加到 WebConfig appSettings 中，以便客户端可以访问。
<appSettings>
<add key="ApiPath" value="https://:2469/api/"/>
</appSettings>
另外，添加一个 IIFE（立即执行函数表达式）JavaScript 语句，以便在页面加载时立即获取数据。
$(function () {
MembersList.getMembers();
})();
（或）您也可以使用 jQuery 的 ready 方法。
$(document).ready(function () {
MembersList.getMembers();
});
现在，我们的 ScriptSection 看起来像这样：
生成并运行应用程序以查看页面。
如您所见，这只是一个普通的 HTML 表格，没有格式，并且在各种设备上显示效果不佳。尤其是在手机和平板电脑等小型设备上。
B) 使用 FooTable 插件为 HTML 表格添加响应式行为
FooTable 插件是一个 jQuery 插件，旨在让小尺寸设备上的 HTML 表格看起来很棒 - 无论您拥有多少数据列。按照说明，将所需的 .css、.js 和 font 文件添加到我们的解决方案中，它看起来会像这样：
现在，我们需要将样式和脚本引用添加到我们的内容页面。在 StyleSection 中添加 Footable Core 的 Footable.core.css，在 ScriptSection 中添加 footable.js，并在 ContentSection 中将表格元素包装在 footable 方法中。
生成并运行更新后的代码，以检查 HTML 表格是否响应式。令人惊讶的是，它还没有。
原因是我们没有利用 FooTable 的断点。断点是 FooTable 中预定义的设备宽度，用于修复表格在移动和平板电脑布局中的显示。因此，我们将添加必要的 thead 部分的数据属性。
<thead>
<tr>
<th data-toggle="true">Member Id</th>
<th data-hide="phone" >First Name</th>
<th data-hide="tablet,phone">Middle Name</th>
<th data-hide="phone">Last Name</th>
<th data-hide="tablet,phone">Email Id</th>
<th>Nickname</th>
<th data-hide="tablet,phone">Age</th>
<th data-hide="tablet,phone">Status</th>
<th data-hide="tablet,phone">Created On</th>
<th>Company</th>
<th data-hide="tablet,phone">Action</th>
</tr>
</thead>
注意： Data-hide 用于在超出断点限制时隐藏列。Data-toggle 用于在响应式模式下显示展开和折叠。
再次运行应用程序，并在桌面、平板电脑和移动设备布局中检查表格。
平板电脑视图
移动视图
C) 使用 Handlebars.js 库更新客户端数据绑定逻辑
Handlebars.js 是一个模板库，可用于简化客户端数据绑定逻辑。它与 Mustache 模板高度兼容。
如果您注意到成功回调 getMembersSuccess 方法，我们正在执行典型的 jQuery 操作来获取 HTML 表格，解析响应，并遍历数据以克隆虚拟行并将其追加到表格 body 部分。
这样做的做法是可以的。但是，有一种更优化的方法可以使用客户端数据绑定技术，借助 Mistache、HandlebarsJs、Closures、UnderscoreJs 等库来绑定模板。在本文中，我们将重点介绍 Handlebarsjs。
要使用 Handlebarjs，我们将创建一个新的内容页面 MemberListTemplate.aspx，其内容与 MembersList.aspx 相同。由于我们正在使用 handlebar 模板，请删除 div BodyStructure。
接下来，我们需要将 Handlebarsjs JavaScript 库添加到我们的项目中。您可以使用NuGet 包管理器搜索并下载“Handlebars.js”，或者访问其网站下载最新版本 2.0.0。
在 ScriptSection 中，在 FooTable.js 之后添加对 js 文件的引用。现在，我们将 HTML 模板放置在 JavaScript 中，其类型为“text/x-handlebars-template”。除了任何其他 JavaScript 类型外，我们还可以使用“text/html”。这里的想法是浏览器不应将模板解析为常规 JavaScript 块。
<script id="template1" type="text/x-handlebars-template">
{{#each members}}
<tr>
<td>{{MemberId}}</td>
<td>{{FirstName}}</td>
<td>{{MiddleName}}</td>
<td>{{LastName}}</td>
<td>{{EmailId}}</td>
<td>{{NickName}}</td>
<td>{{Age}}</td>
<td>{{IsActive}}</td>
<td>{{CreatedDate}}</td>
<td>{{Company}}</td>
<td></td>
</tr>
{{/each}}
</script>
注意：模板将使用 #each 处理程序循环遍历成员，以获取要绑定的相应项。
现在，我们将使用以下代码更新 getMembersSuccess回调：
getMembersSuccess: function (response) {
var data = $.parseJSON(response);
var table = $("#gvMembers");
// Remove tbody within the table
table.find("tbody").html("");
// Get The Template HTML from the source
var template = $("#template1").html();
// Compile it
var compiledCode = Handlebars.compile(template);
// Then, process compiled code using data as an input
var dynamicCode = compiledCode(data);
// Assign the output to placeholder
table.find("tbody").append(dynamicCode);
$('#gvMembers').trigger('footable_redraw');
}
警告：编译 handlebarsjs 模板通常是一个耗时的过程，如果模板很大或嵌套，会影响性能。可以通过预编译模板来节省运行时。
如果您查看代码，我们使用 jQuery 选择器访问模板（#template）。然后使用 Handlebar compile 方法（它会将 HTML 转换为 JavaScript 方法）编译 HTML。之后，我们使用数据作为参数处理 compiledCode，并将其追加到表格 tbody 元素。
要查看更改，请将新内容页面 MemberListTemplate.aspx 设置为启动页，然后生成并运行应用程序。
有几种方法可以使 HTML 表格具有响应性。但是，我认为 FooTable 在这方面做得非常出色。它还有其他功能，如排序、过滤、应用主题和分页。
Handlebarsjs 包含多种功能，可用于执行更复杂的操作。您可以通过添加转义、表达式、助手和自定义处理程序等来扩展其行为。
查看此文章以使用 Bootstrap 和 Web API 创建 Asp.Net Web Forms 应用程序
点击此处了解更多关于 ASP.NET 5 和 C# 6 中的新增功能
查看此文章以开始实现基于 AngularJs 并将其集成到 ASP.NET MVC 中的 CRUD 操作 的基础知识
希望您从本文中学习到了新东西。如果您有任何建议或改进，请告诉我。