jQuery模板是一个jQuery插件，它默认不在ASP.NET MVC 3项目中，但是我们可以使用NuGet很容易地把它添加到项目中。模板可以在客户端构建HTML。它的语法类似于Razor视图的语法。在某种意义上，我们有HTML标记，以及在数据出现地方带有特殊分隔符的占位符。这些占位符被称作绑定表达式。示例代码如下： Rating: ${AverageReview} Total Reviews: ${TotalReviews}

上面的模板将处理带有AverageReview和TotalReviews属性的对象。当渲染带有jQuery的模板时，模板会将那些属性值放在合适的位置。我们也可以渲染处理数据数组的模板。jQuery模板的完整文档可在网上获取，网址是http://api.jquery.com/category/plugins/ templates/。

接下来我们将编写使用JSON和模板的搜索特性。

jQuery模板的起源

尽管jQuery模板是一个开源项目，但它是由Microsoft编写的一个官方jQuery插件。事实上，Microsoft已经为jQuery生态系统提交了几个插件，其中包括jQuery模板、jQuery数据连接和jQuery全局化。

1. 添加模板

为了安装jQuery模板，右击MvcMusicStoreDBrace项目，选择“Add Library Package Reference”菜单项。当对话框出现时(如图8-5所示)，就可以在线搜索jQuery模板。

当使用NuGet完成向项目添加包之后，在Scripts文件夹中会出现两个新的脚本文件：jQuery.tmpl.js和jQuery.tmpl.min.js。同样，我们可以通过向布局视图中添加一个脚本标签来向客户端发送插件的精简版本：  

插件添加完之后，就可以在搜索实现中使用模板。

2. 修改搜索表单

在本章前面第8.2.3节创建艺术家搜索功能时使用到了一个AJAX辅助方法： @using (Ajax.BeginForm("ArtistSearch", "Home", new AjaxOptions {    InsertionMode=InsertionMode.Replace,    HttpMethod="GET",    OnFailure="searchFailed",      LoadingElementId="ajax-loader",    UpdateTargetId="searchresults",             })) {        }

尽管AJAX辅助方法提供了大量的功能，但是我们将删除这些辅助方法，从零开始。jQuery提供了用来从服务器异步检索数据的各种API。我们前面通过使用自动完成部件，已经间接地利用了这些特性，下面我们将直接利用这些方法特性。

首先，修改搜索表单，使其直接使用jQuery而不使用AJAX辅助方法，当然使用现有的控制器代码(还没有JSON)也可以正常运转。修改后，Index.cshtml视图内部的新标记如下所示：            

上面代码只改变了构建form标签的方式(显式地构建)，action特性使用的不再是AJAX辅助方法BeginForm。如果不使用这个辅助方法，我们将不得不自己编写JavaScript代码来向服务器请求HTML。可以将下面的代码放入MusicScripts.js文件内部： $("#artistSearch").submit(function (event) {    event.preventDefault();

   var form = $(this);    $("#searchresults").load(form.attr("action"), form.serialize()); });

这段代码关联了表单的submit事件。在传入的事件参数中调用preventDefault时使用了jQuery技术，它用来阻止触发默认事件。在这个示例中，该技术是用来阻止表单直接提交到服务器；这样一来，我们就可以控制请求和响应了。

load方法从URL中检索HTML，并把检索出的HTML放入匹配的元素(searchresults元素)中。该方法的第一个参数是URL—— 正在使用的action特性值。第二个参数是传入查询字符串的数据。jQuery的serialize方法通过将表单内部的所有输入值连接成一个字符串来构建数据。在这个例子中，只有一个单一的文本输入元素，如果用户在其中输入“black”，serialize方法将使用输入元素的名称和值来构建字符串“q=black”。

3. 获取JSON

我们已经修改了代码，但是服务器仍然返回HTML。下面继续修改HomeController控制器的ArtistSearch操作，使其能够返回JSON，而不是返回分部视图： public ActionResult ArtistSearch(string q) {  var artists = GetArtists(q); return Json(artists, JsonRequestBehavior.AllowGet); }

现在需要修改脚本代码来返回JSON而不是HTML。jQuery提供了一个称为getJSON的方法，它可以用来检索数据： $("#artistSearch").submit(function (event) {    event.preventDefault();

   var form = $(this);    $.getJSON(form.attr("action"), form.serialize(), function (data)        // now what?    }); });

上面的代码没有对先前的版本进行太多的修改，代码由调用load方法改为调用getJSON方法。GetJSON方法不执行匹配集，但它可以利用一个给定的URL和一些查询字符串数据，发出一个HTTP GET请求，将JSON响应反序列化为一个对象，然后调用作为第三个参数传入的回调方法。那么在回调方法内部如何处理呢？现在有了JSON格式的数据—— 一组艺术家—— 但没有显示艺术家的标记。现在模板开始发挥作用了。模板就是嵌入script标签内的标记。下面的代码展示了一个模板，以及search操作应该显示的搜索结果标记：    ${Name}

注意上面text/x-jquery-tmp类型的脚本标签，它确保了浏览器不会将脚本标签的内容作为真实代码进行解释。${Name}语法是一个绑定表达式，它告知模板引擎查找当前数据对象的Name属性，并将找到的值放在和之间。结果将生成JSON数据的显示标记。

要使用该模板，需要在getJSON方法的回调方法内部选择了模板之后才能实现，如下所示： $("#artistSearch").submit(function (event) {    event.preventDefault();

   var form = $(this);    $.getJSON(form.attr("action"), form.serialize(), function (data) {       $("#artistTemplate").tmpl(data).appendTo("#artist-list");    }); });

上述代码中的tmpl方法将合并模板和JSON格式数据生成真正的DOM元素。由于JSON格式数据是一个艺术家数组，因此模板引擎为数组中的每一个艺术家渲染一次模板。上面的代码获取模板输出，并将其添加到艺术家列表中。

在客户端，模板是一个功能强大的技术，本节只是触及了模板引擎特性的表层。然而，这是不能与本章前面的AJAX辅助方法的功能相提并论的。从本章前面的8.2节可以得知，AJAX辅助方法可以在服务器抛出错误时调用方法，也可以在请求得不到响应时，打开gif动画。我们也可以实现所有这些特性；只不过需要删除一级抽象。

4. jQuery.ajax

当要实现对AJAX请求的完全控制时，可以使用jQuery.ajax方法。ajax方法采用一个选项参数，可以用来指定HTTP动词(如GET或POST)、超时、错误处理程序等。已经看到的所有其他异步通信方法(load和getJSON)最终都调用了ajax方法。

使用ajax方法，可以获得AJAX辅助方法所提供的所有功能，并且仍然可以使用客户端模板： $("#artistSearch").submit(function (event) {    event.preventDefault();

   var form = $(this);    $.ajax({       url: form.attr("action"),       data: form.serialize(),       beforeSend: function () {            $("#ajax-loader").show();       },       complete: function () {            $("#ajax-loader").hide();       },       error: searchFailed,       success: function (data) {            $("#artistTemplate").tmpl(data).appendTo("#artist-list");       }    }); });

调用ajax方法是非常繁琐的，因为我们需要自定义很多设置。ajax方法选项中的url和data属性就像是传递给load和getJSON方法的参数。ajax方法给了我们为beforeSend和complete提供回调函数的能力。我们可以在回调期间分别显示和隐藏gif动画，以告知用户，请求未能得到响应。jQuery将会调用complete回调函数，即便调用服务器会导致失败。然而，另外两个回调方法—— error和success—— 中只能有一个可以调用成功。如果调用失败，jQuery将会调用在第8.2.3节中已经定义好的searchFailed错误函数。如果这时调用成功，将会和前面一样渲染模板。

如果想在自己的MVC Music Store项目中尝试这些代码，请使用NuGet安装Wrox.ProMvc3.Ajax.Templates包，安装成功后，运行程序，导航到/Templates查看完善后的首页。