zoukankan      html  css  js  c++  java
  • [原创]全球首款不使用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邮箱(只接受高级群和超级群,谢谢)。

  • 相关阅读:
    Android 4 学习(21):对话框
    Android 4 学习(20):ActionBar
    Android 4 学习(19):Services
    Android 4 学习(18):搜索
    Android 4 学习(17):使用Content Resolver
    【转】Max2013脚本工具的乱码问题
    【转】巧用DOS tree命令+批处理 实现 指定文件 批量复制!
    【转】PHP 杂谈 坑爹的file_exists
    【转】MySQL:日期函数、时间函数总结(MySQL 5.X)
    【转】pam_mysql
  • 原文地址:https://www.cnblogs.com/sanshi/p/1768639.html
Copyright © 2011-2022 走看看