[原创]全球首款不使用ViewState的Asp.Net2.0控件库

首先来张效果图:

ViewState在Asp.Net中举足轻重的作用:

ViewState是Asp.Net的一个非常重要的特性,用来在页面回发过程中维护控件的服务器端状态,这样我们就能方便的在按钮的点击事件处理函数中写代码:

Label1.Text = TextBox1.Text;

对ViewState的详细描述一篇经典文章可以参考,相信很多人都看过。简单概括如下:

1.  页面第一次加载时,服务器控件把自身的属性保存在页面上的一个隐藏字段 __VIEWSTATE 中.

2.  页面PostBack时,表单提交的同时 __VIEWSTATE  的值也被提交到后台,Asp.Net会从这个隐藏字段中恢复这些属性

在传统的网站开发中,ViewState的这一工作原理无可厚非,并且极大的简化了程序员的工作量。但是随着AJAX的兴起,特别是纯JavaScript渲染的客户端界面的应用程序中,

ViewState的实现显得有点捉襟见肘。

使用ExtAspNet创建的页面:

在使用ExtAspNet创建的页面中,所有的页面内容都是有JavaScript中客户端渲染的,我们就以下面一个典型的页面为例:

如果你打开页面源代码,你会发现在<body>和</body>之间除了聊聊几行HTML代码外,大部分是服务器端生成的JavaScript代码:

不过不用担心,程序员无需写这些代码(这些是ExtAspNet自动生成的),程序员所要关注的就是ASPX标签和C#代码:

ViewState在富客户端应用的缺点:

在上面的例子中,如果继续使用Asp.Net的ViewState模式,我们来看下会发生什么事情:

1. 页面第一次加载,由于页面上面的富文本框的内容是通过C#代码设置的,所以这个属性会出现在 __VIEWSTATE 字段中:

同时,由于整个页面是由JavaScript渲染的,这个属性同样会传递到页面上的JavaScript脚本中,如下图所示:

可见,在页面第一次加载时就已经有数据重复的问题了。

2. 点击“Get html editor content”按钮,会把上面富文本框的内容设置到下面TextArea中,此时的效果图和C#源代码如下:

我们再来看这次AJAX响应的数据,由于需要把TextArea的数据改变反映到前段,同样需要更新JavaScript和ViewState两份数据:

这就又一次的造成了数据传输的浪费,在一个使用大量服务器控件的页面中,这种浪费有时是惊人的。

放弃ViewState,ExtAspNet怎么办?

在一个提倡简单编程的全新客户端框架中放弃ViewState,是否就意味着放弃在PostBack中使用C#操作服务器控件的便利呢?显然这是不可能的!

唯一的办法就是自己实现适合于AJAX数据传输的ViewState机制,ExtAspNet在这一方面领先一步,创建了全新的XState概念,使得在不放弃PostBack中C#操作服务器控件便利的同时,拒绝了任何的数据传输的浪费。

下面同样以上面的那个页面为例,简单阐述一下在最新的ExtAspNet v2.3.1 版本中,XState的实现过程:

1. 页面第一次加载,富文本框的数据只在生成的JavaScript有一份,由于不使用ViewState,所以 __VIEWSTATE 只是保存了一个ControlState的属性:

2. 点击“Get html editor content”按钮,此时AJAX响应数据也没有重复的部分:

使用ViewState与不使用ViewState的数据对比:

还是上面一个例子,我们分别从页面第一加载和PostBack的数据传输量两个方面着手:

         响应数据(使用ViewState)     响应数据(不使用ViewState)

第一次加载    5068              4922

点击第一个按钮  1251              709

附记:

ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果,
目标是创建没有ViewState,没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。

示例: http://extasp.net/
开源: http://extaspnet.codeplex.com/

如果你喜爱ExtAspNet,可以通过如下QQ群和大家交流:

ExtAspNet技术交流群1:158028499(已饱和),100人,创始人:sanshi  
ExtAspNet技术交流群2:111870015(已饱和),200人,创始人:爱淘课
ExtAspNet技术交流群3:102333298(已饱和),200人,创始人:爱淘课
ExtAspNet技术交流群4:123899180(已饱和),200人,创始人:爱淘课  
ExtAspNet技术交流群5:105052447(未饱和),500人,创始人:╰☆阿波◆罗
注:
1. 所有群为技术交流,拒绝任何形式的广告,一经发现,立即踢出群。
2. 如果你想为ExtAspNet贡献群,请创建后把群号发给我的Gmail邮箱(只接受高级群和超级群,谢谢)。

posted @ 2010-06-30 22:34  三生石上(FineUI控件)  阅读(5705)  评论(33编辑  收藏  举报