赞助商
上一篇: ExtAspNet应用技巧(六) - ViewState与动态创建控件

引子

在最新发布的 ExtAsp.Net v2.0.6 版本中,有一个重大更新:
------优化AJAX的内部实现,每个页面保存的ViewState现在减少1/3左右(重要更新)。
如果你对v2.0beta5和v2.0.6中一些页面ViewState大小的对比结果感兴趣的话,可以看上一篇文章。

ExtAspNet中的AJAX

在ExtAspNet的产品描述中,有这样一句话“原生的AJAX支持”,其实这也是我们非常推崇的一个特性。

所谓的“原生”就是开发人员不需要做任何设置,ExtAspNet中的PostBack默认就是一个AJAX过程。

考虑一个简单的例子:
  1. <ext:PageManager ID="PageManager1" runat="server" />
  2. <ext:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button">
  3. </ext:Button>
  4. protected void Button1_Click(object sender, EventArgs e)
  5. {
  6.     Button1.Text = "Click:" + DateTime.Now.ToLongTimeString();
  7. }
复制代码
当我们点击按钮时,按钮的值被改变“Click:20:34:42”,你如果仔细观察此次PostBack并不像点击一个普通Asp.net按钮一样,页面并没有刷新,而且在回发过程中页面右上角还显示一个红色的提示框“正在加载....”:

附件: extaspnet7_1.gif


通过HttpWatch我们可以看到返回值为:
  1. box.$0.enable();
  2. box.util.setDisabledControlBeforePostBack('');
  3. box.$0.setText('Click:20:34:42');
  4. box.util.updateViewState('EHgRUZXh0BQ5DbGljazoyMDozNDo0Mh4DJElEBQIkMGRkCbyzBkQ+Ki5LTj9GvIiyaApDFXM=',39);
复制代码
返回的其实是一串字符串,其中包括修改按钮值的JavaScript脚本:box.$0.setText('Click:20:34:42');

ExtAspNet v2.0beta5中AJAX的实现

其实想实现AJAX也很简单,我们只需要知道在本次PostBack中有哪些控件的属性发生了变化,然后对于这些变化的属性生成一段JavaScript脚本就可以了。
在ExtAspNet v2.0beta5也是基于这个简单的考虑。

1. 首先在页面第一次加载时我们把按钮的Text属性保存下来(保存到ViewState)。
  1. // 如果不是ExtAspNetAjax回发,则保存属性到ViewState
  2. if (!IsExtAspNetAjaxPostBack)
  3. {
  4.   ViewState["Text_HashCode"] = Text.GetHashCode().ToString("X8");
  5. }
复制代码
因此也就有你在上一篇文章中看到的这个截图了:

附件: dynamic_menu_continue_3.gif


这里之所以将属性值字符串化后再取Hash值,是为了节约ViewState的大小(你想如果把多行文本框的Text保存在ViewState将会导致ViewState变的很大)。

2. 其次在AJAX回发时,我们取这个属性值和ViewState中的值比较,如果变化了则输出JavaScript脚本。
  1. string currentText = Text.GetHashCode().ToString("X8");
  2. if(currentText != ViewState["Text_HashCode"].ToString())
  3. {
  4.     // 输出 box.$0.setText('Click:20:34:42');
  5.     ViewState["Text_HashCode"] = currentText;
  6. }
复制代码
怎么样,是不是很简单。
赞助商
赞助商
TOP