使用jQuery和Asp.net Ajax创建客户端的Repeater

该篇文章是Encosia博客中的文章，个人觉得不错就翻译了一下。但由于个人英语水平有限，还望各位海量。如果想看原文，请点击Use jQuery and ASP.NET AJAX to build a client side Repeater查看原文。

近一段时间在Matt Berseth的博客上有一些非常有意思的关于在客户端创建和显示markup（这个单词不知道什么意思）方法的讨论。虽然我以前没有写过任何关于这方面的例子，但是在客户端是使用markup是我经常用而其推荐使用的。

通过发送合适的数据到客户端，你能够尽量的缩小你要发送的数据和大幅度增长的表现形式。你也可以使自己很容易的添加一些轻量级的客户端的排序和分页。这些不仅能够提升用户的体验，而且也能够降低服务器的负荷和带宽要求。

为了实现这一目标，我会通过四步有效的步骤带你完成一个使用Asp.Net和jQuery技术的客户端Repeater。

1、创建一个Rss读取页面方法并返回JSON格式的数据到客户端；

2、使用jQuery获取页面方法；

3、使用返回给页面的数据在客户端构建一个Table表；

4、使用模板插件进行改进；

一、创建一个Rss读取页面方法

 因为Web浏览器禁止跨域名服务，通过Ajax功能显示一个外部的Rss中的条目是一个非常意义的例子。为了克服这些限制，我们要做的第一步是写一个接收Rss数据到客户端的本地（local）代理服务。

Web Service和页面方法都可以实现这项任务。我倒愿意使用Web Service，但这里我们使用页面方法。通过阐述两者有着多么的相似性是非常有帮助的。 

 1     [WebMethod]
 2     public static IEnumerable GetFeedburnerItems(int Count)
 3     {
 4         XDocument feedXML = XDocument.Load("http://www.cnblogs.com/Nimeux/rss");
 5         
 6         var feeds = from feed in feedXML.Descendants("item")
 7                     select new
 8                     {
 9                         Date = DateTime.Parse(feed.Element("pubDate").Value).ToShortDateString(),
                         Title = feed.Element("title").Value,
                         Link = feed.Element("link").Value,
                         Description = feed.Element("description").Value
                     };
         return feeds.Take(Count);
     }

 

这个页面方法使用LINQ解析一些从Rss中得到的数据，并使用这些数据产生一个匿名的类型，然后返回一个匿名类型的集合。通过在服务器端选择我们感兴趣的合适的数据，我们能将在服务器端和客户端传送的数据实现最小化。

二、使用jQuery调用页面方法

在客户端，我们要用的首要事情是向页面方法发送一个请求。我们会通过使用jQuery 的Ajax（）方法实现： 

 1 $(document).ready(function() {
 2     $.ajax({
 3       type: "POST",
 4       url: "Default.aspx/GetFeedburnerItems",
 5       data: "{'Count':'7'}",
 6       contentType: "application/json; charset=utf-8",
 7       dataType: "json",
 8       success: function(msg) {
 9         //ApplyTemplate(msg);
          BuildTable(msg);
       }
   });
 });

 

当页面加载时，这个函数会向我们的页面执行一个Ajax请求，请求头7个Rss的条目信息。当响应到达时，一个Javascript函数被调用来响应这些数据。

三、创建和显示表格

上面提到的通过LINQ传递出来的匿名类型的是非常完美的。我在页面设计重要用的属性在页面方法中都变成了联合数组中的键，这样使我们很容易使用这些数据。

为了在客户端用这些数据创建表，我们通过循环每个元素，构造HTML字符，然后将生成的HTML字符指派到命名为container的<div>标签中。 

 1 function BuildTable(msg) {
 2   var table = '<table><thead><tr><th>Date</th><th>Title</th><th>Excerpt</th></thead><tbody>';
 3   for(var post in msg)
 4   {
 5       var len=msg[post].length;
 6       for(var i=0;i<len;i++)
 7       {
 8         var row = '<tr>';        
 9         row += '<td>' + msg[post][i].Date + '</td>';
         row += '<td><a href="' + msg[post][i].Link + '">' + msg[post][i].Title + '</a></td>';
         row += '<td>' + msg[post][i].Description + '</td>';        
         row += '</tr>';        
         table += row;
       }
   }
   table += '</tbody></table>';
   
   $('#Container').html(table);
 }

 

如果你觉得这些代码看上去丑是因为页面表达和逻辑没有分开。尽管这些都是在客户端的，代码分离仍然是非常重要的谨记的目标。

为了达到分离，我们最需要的是使用模板解决。当这个问题被提出时，有一个非常棒的叫jTemplates的jQuery插件，可以实现这个功能。

我们创建一个非常简单的HTML模板来使用jTemplates插件。 

 

<table>
  <thead>
    <tr>
      <th>Date</th>
      <th>Title</th>
      <th>Excerpt</th>
    </tr>
  </thead>
  <tbody>
    {#foreach $T.d as post}
    <tr>
      <td>{$T.post.Date}</td>
      <td><a href="{$T.post.Link}">{$T.post.Title}</a></td>
      <td>{$T.post.Description}</td>
    </tr>
    {#/for}
  </tbody>
</table>

在HTML模板创建好后，我们使用一对jTemplates的方法应用模板并将结果返回给container标签中。 

function ApplyTemplate(msg) 
{
  $('#Container').setTemplateURL('RSSTable.tpl',null, { filter_data: false});
  $('#Container').processTemplate(msg);
}

返回的结果我上文中用手工方法实现的是一样的，但代码非常干净。在这种情况下，我认为这种方法可以类似的称为客户端的Repeater。

 

说明：1、本人在翻译该文章时，省去了部分的句子，而且很多句子因为英语水平有限翻译的很差。

        2、该篇文章的例子已经调试通过，但在原文中的手工生成Table的js代码有一点错误，已经改正。

        3、在转载文章时注明 Nimeux's Blog

        4、下载源代码