基于jTemplates、ascx协同工作的酷UI模板技术

在很久很久以前，也就是asp.net ajax刚引起大众关注不久，asp.net ajax团队成员ScottGu发布了一篇非常实用的文章：

英文：Tip/Trick: Cool UI Templating Technique to use with ASP.NET AJAX for non-UpdatePanel scenarios ，

中文：技巧和诀窍：在不用UpdatePanel的情形下可与ASP.NET AJAX 使用的酷UI模板技术

看完之后，非常受用，并给我留下了非常深刻的映像，之后在很多场景里都借鉴了ScottGu的这种方案。如果你也仔细阅读过这篇文章，那么应该可以明白在这种方式中，是如何将客户端繁琐的拼接html字符串或dom片段的工作，借助asp.net领域的ascx用户控件来方便快捷及优雅的完成的。

在EnjooSite的开发过程中，因为涉及到大量的客户端编码，自然少不了大量的客户端页面建构，因此，我便再次应用了ScottGu的这种方案，只不过根据EnjooSite项目的特点，进行了一定程度的优化和改进，同时引入了jTemplates javascript库进行协同工作。

针对jTemplates的特点，以及ScottGu酷UI模板技术的各自优点，我们来看看我是如何改进的：

第一步：熟悉jTemplates的工作方式

widgetContainer.setTemplate(template, null);
widgetContainer.processTemplate(data);

jTemplates的工作方式非常直观：

第一句setTemplate(template,null)，将jQuery对象widgetContainer设置为可模板化处理对象，模板结构由参数template确定；

第二句processTemplate(data);则对模板化的对象进行数据呈现处理，实际数据由参数data确定。

我之所以特别解释这2句，是因为想引起大家注意，jTemplates的工作过程中，有模板和数据这2个重要的概念。

第二步：获取template和data

既然jTemplates需要模板和数据的协同工作，那么我们可以怎样方便、快捷的提供出这2项内容呢？

template.ascx

 1 <div>
 2   {#if $T.staticHTMLs.length>0 }
 3   {#foreach $T.staticHTMLs as item} 
 4   <div id="StaticHTML_{$T.item.id}_Viewer" commandname="enjoosite_statichtml_item" commandargument="{$T.item.id}">{$T.item.description}</div>
 5   {#/for}
 6   {#/if}
 7   <div id="staticHTML_{$T.widgetId}_Pager" class="pager" commandargument="{$T.maxItems}_{$T.listCount}_{$T.pageCount}_{$T.widgetId}"></div>
 8   <div class="enjoosite_widget_auto_action">
 9     (function($){
10         ensure({js:'/jquery-pager.1.1.js'},function(e){buildStaticHtmlPager('<%= string.Format("staticHTML_{0}_Pager",WidgetId) %>');});
11     })(jQuery)
12   </div>
13 </div>

 

data.ascx

 1 <script type="text/C#" runat="server">
 2     public string GetStaticHTML()
 3     {
 4         IPagedCollection<StaticHTML> pagedStaticHTMLs = StaticHTMLs.GetPaged(WidgetId, 1, ListCount);
 5 
 6         int maxItems = pagedStaticHTMLs.MaxItems;
 7         int pageCount = 10
 8         
 9         StringWriter stringWriter = new StringWriter();
10         JsonWriter jsonWriter = new JsonTextWriter(stringWriter);
11         jsonWriter.WriteStartObject();
12         jsonWriter.WritePropertyName("widgetId");
13         jsonWriter.WriteValue(WidgetId); 
14         jsonWriter.WritePropertyName("maxItems");
15         jsonWriter.WriteValue(pagedStaticHTMLs.MaxItems); 
16         jsonWriter.WriteStartArray();
17         foreach (StaticHTML item in pagedStaticHTMLs)
18         {
19             jsonWriter.WriteStartObject();
20             jsonWriter.WritePropertyName("id");
21             jsonWriter.WriteValue(item.Id);
22             jsonWriter.WritePropertyName("title");
23             jsonWriter.WriteValue(item.Title);         
24             jsonWriter.WriteEndObject();
25         }
26 
27         jsonWriter.WriteEndArray();
28         jsonWriter.WriteEndObject();
29         jsonWriter.Flush();
30         return stringWriter.GetStringBuilder().ToString();
31     }
32 </script>
33 <%= GetStaticHTML() %>

 

请大家仔细浏览template.ascx中c<div class="enjoosite_widget_auto_action"></div>之间的内容，在这里，我将js语句当作普通的html字符串书写了进来，作用就是在异步加载了当前模板后，需要即时执行的客户端动作。

（至于如何将template.ascx和data.ascx通过WebMethod方法返回到客户端，请大家阅读我文章最上部的链接文章）

第三步：在客户端完成template和data的加载

     var template = result.Template;
2     var data = eval("(" + result.Data + ")");
3     widgetContainer.setTemplate(template, null, {filter_data:false});
4     widgetContainer.processTemplate(data);

 

请大家注意第2行，因为我们在data.ascx中，返回的是“[{},{}]”这样的json的结构，所以我们利用eval将data字符串转换成javascript对象，然后再利用jTemplates实现客户端模板的快速呈现。

大家可以看到，在整个过程中，至少在这个流程的处理过程中，我们基本上不需要进行过多的客户端编码，特别是模板和数据的拼接，我们都可以在ascx中，借助VS的智能提示、结构检查等高级功能轻松完成。

希望我的这些不起眼思路，可以对你有所启发。EnjooSite中的所有功能模块的内容注入，大多利用的这种方式，只不过为了根据不同类型的模块自动处理，在业务处理环节增加了对模块类型的判断，然后自动加载对应的template.ascx和data.ascx模块进行处理。