ExtAspNet秘密花园（四） — 每个页面需要一个PageManager

最新推荐文章于 2026-03-25 01:27:10 发布

转载最新推荐文章于 2026-03-25 01:27:10 发布 · 6.9k 阅读

标签

#asp.net #button #ajax #asp #html

本篇博客详细解析了使用ExtAspNet控件时页面级别的参数配置及其对表单、AJAX加载和页面布局的影响，并通过示例展示了如何在页面回发时利用ExtAspNet与ASP.NET控件进行交互，特别是针对Label和Literal控件的不同行为进行了深入分析。

每一个使用ExtAspNet控件的页面都必须包含一个PageManager控件，我们可以把PageManager控件看做页面级别的参数配置（相对于Web.config站点级别的参数配置）。

页面级别的参数配置

Theme: 控件主题，目前支持三种主题风格（blue/gray/access，默认值：blue）
Language: 控件语言（en/zh_CN/zh_TW/...，默认值：zh_CN）
FormMessageTarget: 表单字段错误提示信息的显示位置（side/qtip，默认值：side）
FormOffsetRight: 表单字段右侧距离边界的宽度（默认值：20px）
FormLabelWidth: 表单字段标签的宽度（默认值：100px）
FormLabelSeparator: 表单字段标签与内容的分隔符（默认值："："）
EnableAjax: 是否启用AJAX（默认值：true）
AjaxTimeout: AJAX超时时间（单位：秒，默认值：60s）
EnableBigFont: 是否启用大字体，将ExtJS默认11px的字体全部改为12px，否则显示的中文字体太小（默认值：false）

上面这些参数和Web.config中的一样，只不过作用域在页面范围内，覆盖Web.config中的同名配置。

还有一些其他配置属性：

EnablePageLoading：是否启用页面第一次加载提示，默认为居中显示的加载图标（默认值：true）
EnableAjaxLoading：是否启用AJAX加载提示，默认为位于页面上方的文字提示（默认值：true）
ExecuteOnReadyWhenPostBack：是否在每次页面回发时都执行onReady脚本（默认值：true）

虽然ExtAspNet希望开发人员尽可能少地编写JavaScript脚本，但有时恰到好处的脚本可以起到事半功倍的效果，比如示例站点就引入了一个外部的default.js来处理用户点击左侧菜单的事件和地址栏#之后的片段：

   1:  <html>

   2:  <body>

   3:      <form>

   4:      </form>

   5:      <script src="./js/default.js" type="text/javascript"></script>

   6:  </body>

   7:  </html>

而default.js中的所有代码都放在一个 functiononReady() {}

的函数体中。

太棒了

这其实是ExtAspNet的一个约定，ExtAspNet会在ExtJS以及自身的脚本执行完毕后，查找是否存在onReady函数，如果存在就执行此函数。你可以启用Web.config中的DebugMode，观察生成的页面源代码，在最后你会看到这样的脚本：

占据整个页面的面板 - AutoSizePanelID属性

这是一个你一定不会错过的属性，如果希望某个Panel、Window、Tree、TabStrip、RegionPanel或者Form占据整个页面空间，就需要用到这个属性，还是看看示例站点的写法：

让ASP.NET控件也参与ExtAspNet的AJAX回发 - AjaxAspnetControls属性

我们曾在第一篇文章提到，ExtAspNet的一个设计理念是“用心实现80%的功能”，也就是说肯定会遇到一些ExtAspNet提供的控件无法完成的任务，怎么办？我们只好求助于ASP.NET控件，并且ExtAspNet提供了一种优雅的方式让ASP.NET控件也可以参与AJAX回发过程，这就是AjaxAspnetControls属性。

如果想让某个ASP.NET在页面回发时也更新，可以将其ID放在AjaxAspnetControls属性中，多个控件ID以逗号分隔，具体用法请参见示例页面。

太棒了

那么，ExtAspNet是怎么做到这一点的呢？

道理其实很简单，ExtAspNet会在AJAX响应时查找生成的HTML片段中的那些ASP.NET控件，拿到ASP.NET生成的HTML并生成更新脚本，如果你用Firebug等调试工具查看一下AJAX请求，能够很清楚的看到如下交互过程：

太棒了

如果你能理解上面提到的ExtAspNet的工作原理，可以尝试一下这个示例。这个示例主要是考察ASP.NET控件Label和Literal在ExtAspNet的AJAX交互过程中的区别，先来看看代码：

   1:  <ext:PageManager ID="PageManager1" AjaxAspnetControls="Label1,Literal1" runat="server" />

   2:  <asp:Label ID="Label1" Text="Label1" runat="server"></asp:Label>

   3:  <br />

   4:  <asp:Literal ID="Literal1" Text="Literal1" runat="server"></asp:Literal>

   5:  <br />

   6:  <ext:Button ID="Button1" runat="server" Text="更新上面几个文本值" OnClick="Button1_Click">

   7:  </ext:Button>

   1:  protected void Button1_Click(object sender, EventArgs e)

   2:  {

   3:      Label1.Text = "Label1 - " + DateTime.Now.ToLongTimeString();

   4:      Literal1.Text = "Literal1 - " + DateTime.Now.ToLongTimeString();

   5:  }

如果只看这段代码，我们可能会想当然地以为asp:Label和asp:Literal在点击按钮时都被更新了，实际情况却不是这样：

为什么只有Label1的值得到更新，而Literal1没有得到更新，看看生成的HTML源代码，再想想ExtAspNet的内部处理过程，你不难发现其中的奥秘。

生成的HTML源代码：

   1:  <span id="Label1">Label1</span>

   2:  <br />

   3:   Literal1

   4:  <br />

   5:  <div id="Button1_wrapper"></div>

原来asp:Label和asp:Literal生成的HTML代码的格式是不同的，asp:Literal生成的HTML代码没有外部的<span>标签，怪不得ExtAspNet不能通过ID值来查找Literal并更新它的HTML值，那么该怎么呢？

对于这种特殊情况，ExtAspNet没有打算费劲周折来弥补这种缺陷，而是提供了一个简单的解决办法：

是不是很好玩……

小结

每个页面都需要一个PageManager控件，它提供了页面级别的参数配置，可以用来覆盖Web.config中的配置。不过最常到的可能是AutoSizePanelID属性，用来将面板扩展到整个页面。

下一篇文章我们会介绍最常用到的Button控件，ExtAspNet为Button提供了非常丰富的功能。

注：本系列文章由三生石上原创，博客园首发，转载请注明出处。如果你喜欢本系列文章，请一定不要忘记推荐本文或者关注博主。

《ExtAspNet秘密花园》系列文章目录

由于extaspnet中用的都是ajax机制，所以在extaspnet和aspnet标签混用的时候有两种方式，第一个是用PageManage中的EnableAjax="fasle"关闭ajax，另外一种就是文中所说的将asp的ID放入 AjaxAspnetControls中特此备用