快速业务通道

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

作者 佚名技术 来源 NET编程 浏览 发布时间 2012-05-20

在很久很久以前,也就是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&qu

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号