您现在的位置: 365建站网 > 365学习 > 基于jTemplates、ascx协同工作的酷UI模板技术

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

文章来源:365jz.com     点击数:124    更新时间:2009-09-12 14:57   参与评论

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

Code

 

data.ascx

Code

 

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

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

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

1     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模块进行处理。

Tag标签: EnjooSite,快乐建站

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

发表评论 (124人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------

快速入口

· 365软件
· 建站公司
· 杰创官网
· 建站工具

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2022 版权所有 鄂ICP备17013400号-1