使用 jQuery 模板的示例
本文介绍了一个使用 jQuery 模板的可用示例。
引言
本文介绍了一个使用 jQuery 模板的可用示例。
背景
最近我有一个机会尝试了 jQuery 模板。jQuery 模板是一个 JavaScript 库，用于将 JSON 数据转换为 HTML 内容。根据 此链接，它是由 Microsoft ASP.NET 团队与开源 jQuery 团队合作开发的，并计划在 jQuery 1.5 发布时包含在 jQuery 核心库（jQuery.js 库）中。当我尝试它时，jQuery 已经更新到 1.9.1 版本，但我仍然没有看到它被包含进来。至少我在 jQuery 官方文档中找不到任何与 jQuery 模板相关的内容。所以，如果你想尝试它，你需要从 其官方网站下载 jquery.tmpl.js 或 jquery.tmpl.min.js。在其 网站上，你可以找到一些关于如何使用 jQuery 模板的基本文档。本文主要为你提供一个 jQuery 模板的运行示例。如果你更感兴趣阅读一些指导性文档，可以查看 jQuery 模板的 网站。
该示例在 Visual Studio 2010 中的 ASP.NET MVC 2 Web 应用程序中开发。我完全清楚 ASP.NET MVC 已经经历了 3 和 4 版本。但我也知道并非所有读者都使用这些更高版本。希望通过保持版本较低，如果读者确实想下载并自己尝试该应用程序，我可以让他们生活更轻松。
示例应用程序包含以下组件：
- Models\CheckBoxModel.cs 文件是应用程序的数据模型；
- Controllers\HomeController.cs 文件是 MVC 应用程序的控制器；
- Views\Home\Index.aspx 文件是 MVC 应用程序的唯一视图；
- Content\Site.css 文件包含应用程序使用的一些 CSS 样式。
数据模型
应用程序的数据模型在 Models\CheckBoxModel.cs 文件中实现。
using System;
using System.Collections.Generic;
namespace jQueryTemplate.Models
{
public class CheckBoxModel
{
public int Id { get; set; }
public string Text { get; set; }
public bool Checked { get; set; }
public List<CheckBoxModel> Children { get; set; }
}
public static class CheckBoxRepository
{
private static List<CheckBoxModel> CheckBoxes { get; set; }
public static void Initiate()
{
CheckBoxes = new List<CheckBoxModel>();
const int count1 = 10, count2 = 10, count3 = 20;
var idSeed = 1000000;
for (var i = 1; i <= count1; i++)
{
var ckBoxTier1 = new CheckBoxModel
{
Id = ++idSeed,
Text = "Item No." + i,
Checked = idSeed % 2 != 0,
Children = new List<CheckBoxModel>()
};
CheckBoxes.Add(ckBoxTier1);
if (i % 2 == 0) { continue; }
for (int j = 1; j <= count2; j++)
{
var ckBoxTier2 = new CheckBoxModel
{
Id = ++idSeed,
Text = "Item No." + i + "." + j,
Checked = idSeed % 2 != 0,
Children = new List<CheckBoxModel>()
};
ckBoxTier1.Children.Add(ckBoxTier2);
if (j % 2 == 0) { continue; }
for(var k = 1; k <= count3; k++)
{
var ckBoxTier3 = new CheckBoxModel
{
Id = ++idSeed,
Text = "Item No." + i + "." + j + "." + k,
Checked = idSeed % 2 != 0,
Children = new List<CheckBoxModel>()
};
ckBoxTier2.Children.Add(ckBoxTier3);
}
}
}
}
public static List<CheckBoxModel> GetCheckBoxes()
{
return CheckBoxes;
}
}
} 本示例应用程序的目的是从服务器加载一组以树形结构组织的数据点，并将它们显示为复选框。CheckBoxModel类代表一个复选框。它可以在其 "Children" 列表中选择性地包含其他复选框；CheckBoxRepository用作复选框集合的存储库。Initiate方法初始化集合，我们可以通过GetCheckBoxes方法访问该集合。你可以从代码中看到树有三层。有些复选框被选中，有些未被选中。有些复选框有子项，有些没有子项。
控制器
MVC 应用程序的控制器在 Controllers\HomeController.cs 文件中实现。
using System.Web.Mvc;
using jQueryTemplate.Models;
namespace jQueryTemplate.Controllers
{
[HandleError]
public class HomeController : Controller
{
public ActionResult Index()
{
// Initiate checkboxes
CheckBoxRepository.Initiate();
return View();
}
[HttpPost]
public ActionResult GetCheckBoxesData()
{
return Json(CheckBoxRepository.GetCheckBoxes());
}
}
} Index方法加载 Views\Home\Index.aspx 视图。它还初始化复选框树集合；GetCheckBoxesData方法以 JSON 格式返回复选框树集合，该集合将通过视图中的 AJAX 调用进行访问。
视图
MVC 应用程序的视图在 Views\Home\Index.aspx 文件中实现。
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>jQuery Template Example</title>
<link type="text/css" rel="stylesheet"
href="<%=Url.Content("~/Content/Site.css") %>" />
<script type="text/javascript"
src="<%=Url.Content("~/Scripts/jquery-1.9.1.min.js")%>"></script>
<script type="text/javascript"
src="<%=Url.Content("~/Scripts/jquery.tmpl.min.js")%>"></script>
<script type="text/javascript">
$(document).ready(function () {
var addCheckBoxesToDom = function (chkBxData) {
var div = $('#divCheckBoxes');
div.html($('#checkBoxTemplate').tmpl(chkBxData));
$('a.toggle', div).click(function () {
var t = $(this);
var ul = t.closest('li').children('ul');
if (t.hasClass('opened')) {
t.removeClass('opened');
ul.hide();
} else {
t.addClass('opened');
ul.show();
}
return false;
});
};
$('#btnLoadCheckBoxes').click(function () {
var url = '<%=Url.Action("GetCheckBoxesData", "Home") %>';
$.ajax({
url: url,
type: "POST",
cache: false
}).done(function (data) {
var chkBxData = { items: data };
addCheckBoxesToDom(chkBxData);
});
});
$('#btnClearCheckBoxes').click(function () {
$('#divCheckBoxes').html('');
});
});
</script>
</head>
<body>
<div>
<div style="width: 450px">
<div>
<span><a id="btnLoadCheckBoxes" href="#" class="linkbutton">
Load checkboxes</a></span>
<span><a id="btnClearCheckBoxes" href="#" class="linkbutton">
Clear checkboxes</a></span>
</div>
<div id="divCheckBoxes" />
</div>
</div>
</body>
<script id="checkBoxTemplate" type="text/html">
<ul>
{{each items}}
<li>
<span>
{{if Children.length > 0}}<a href="#" class="toggle" />{{/if}}
<label{{if Children.length == 0}} class="static"{{/if}}>
<input type="checkbox" id="ck${Id}"{{if Checked}}
checked="checked"{{/if}} />[${Id}]-${Text}</label>
</span>
{{if Children.length > 0}}
<ul style="display: none">
{{each Children}}
<li>
<span class="tierTwo">
{{if Children.length > 0}}<a href="#" class="toggle" />{{/if}}
<label{{if Children.length == 0}} class="static"{{/if}}>
<input type="checkbox" id="ck${Id}"{{if Checked}}
checked="checked"{{/if}} />[${Id}]-${Text}</label>
</span>
{{if Children.length > 0}}
<ul style="display: none">
{{each Children}}
<li>
<span class="tierThree">
<label><input type="checkbox" id="ck${Id}"{{if Checked}}
checked="checked"{{/if}} />[${Id}]-${Text}</label>
</span>
</li>
{{/each}}
</ul>
{{/if}}
</li>
{{/each}}
</ul>
{{/if}}
</li>
{{/each}}
</ul>
</script>
</html>在此文件中，我添加了以下内容：
- 两个按钮
btnLoadCheckBoxes和btnClearCheckBoxes。btnLoadCheckBoxes按钮会发起一个 AJAX 调用以加载 JSON 格式的复选框数据。在成功的 AJAX 调用之后，它通过 jQuery 模板将 JSON 数据转换为 HTML 内容。然后将 HTML 内容插入到divCheckBoxesdiv 中。btnClearCheckBoxes按钮会清除插入到divCheckBoxediv 中的内容。 checkBoxTemplate是模板。 jQuery 模板使用此模板通过 "$('#checkBoxTemplate').tmpl(chkBxData)" 语法将 JSON 数据转换为 HTML 内容，其中chkBxData是 JSON 数据。
运行应用程序
当应用程序首次启动时，我们可以看到我在 Views\Home\Index.aspx 视图中放置的两个按钮。
点击 "加载复选框" 按钮，会发起一个 AJAX 调用来检索复选框树的 JSON 数据，并使用 jQuery 模板将 JSON 数据转换为所需的 HTML 内容。然后会在网页上显示 HTML 内容。
如果复选框有子项，你可以展开节点并查看三层树结构。
复选框树是通过 HTML "<ul>" 实现的。如果你感兴趣，以下是 Content\Site.css 文件中实现的 CSS 样式。这些 CSS 样式在 JavaScript 的一些帮助下，将 <ul> 转换成可展开的树。
/* Checkbox tree */
#divCheckBoxes
{
border-style: solid;
border-width: 2px 1px 1px;
border-color: #F05D23 #797979 #797979;
margin-top: 5px;
padding: 0px;
width: 100%;
max-height: 500px;
overflow-x: hidden;
}
#divCheckBoxes ul
{
margin: 0px; padding: 0px;
}
#divCheckBoxes li
{
padding: 0px 0px 6px 0px;
list-style: none outside none;
}
#divCheckBoxes li>span
{
border-bottom: 1px dotted #CCCCCC;
padding: 2px;
display: block;
}
#divCheckBoxes li>span>label.static {
margin-left: 15px
}
#divCheckBoxes li>span.tierTwo {
padding-left: 30px
}
#divCheckBoxes li>span.tierThree {
padding-left: 70px
}
a.toggle
{
background: url("images/ToggleClose.png") no-repeat scroll 3px 6px transparent;
padding-left: 15px;
text-decoration: none;
vertical-align: top
}
a.toggle.opened
{
background: url("images/ToggleOpen.png") no-repeat scroll 3px 6px transparent;
}兴趣点
- 有许多方法可以通过 JavaScript 生成 HTML 内容。在没有任何外部帮助的情况下，你可以实际编写自己的代码来生成 HTML 内容，如果你对 DOM 结构有很好的理解，这通常是最有效的方法。但如果你对 DOM 的理解不太自信，并且确实想获得一些外部帮助，你可以创建一个模板并使用 jQuery 模板 jquery.tmpl.min.js 来生成 HTML 内容。
- 如果你只想使用 AJAX 将数据加载到你的网页中，你实际上可以考虑使用 partial view。我有一篇早期的文章 使用 jQuery 和 MVC 加载干净的 HTML 片段，展示了如何通过 AJAX 调用将 partial view 加载到网页中。使用 partial view 的优点是它们可以直接嵌入到其他 MVC 视图中，并且也可以通过 AJAX 调用加载。可重用性是 partial view 相较于 jQuery 模板的一个巨大优势。
- 无论如何，jQuery 模板在某些情况下可以证明是有用的。如果你有兴趣探索 jQuery 模板，本文是一个运行示例，可能对你有所帮助。
- 我希望你喜欢我的帖子，希望本文能以某种方式帮助你。
历史
- 首次修订 - 2013/3/9。