asp.net控件开发基础(13)

上一篇讨论了如何为子控件添加集合样式,这次我们讨论如何为服务器控件添加客户端功能 .

1.减轻服务器压力,增加用户体验

服务器功能是强大的,客户端脚本一点也不弱,现在的ajax技术和Atlas技术就是最好的证明,我们总是期待UI有一个好的效果,flash动画给我们带来了很酷的效果,我们至少也可以为我们的服务器控件添加客户端脚本,一方面减少了服务器端的回传,一方面又能为控件提供非常酷的效果.我想我们都很喜欢ATLAS里面很多很酷的控件吧,而且无刷新,服务器控件与客户端脚本交互使用,那会服务器控件变的更加完美.

经过上面的废话,下面我们进入正题

2.简单为服务器控件添加客户端脚本

我们已经了解到服务器控件呈现后的代码仍然为HTML,只要你熟悉此服务器控件呈现后标签和此标签的元素,你就可以直接在服务器控件中添加
属性,事件,样式等等

简单的添加方法如下:

(1)直接在控件添加属性,如为Button控件添加简单的客户端事件

<asp:Button ID="Button2" runat="server" Text="Button" onmouseover="this.value='鼠标经过'" onmouseout="this.value='鼠标离开'" />

(2)使用AttributeCollection在后台添加添加简单的客户端事件,很典型的使用如我们在删除数据的时候总要弹出一个窗口提醒用户是否删除.

Button2.Attributes.Add("onmouseover", "this.value='鼠标经过'");
Button2.Attributes.Add("onmouseout", "this.value='鼠标离开'");

3.复杂客户端功能处理

先不论服务器端的功能,当客户端脚本复杂以后,我们会写在一个js文件里,可以复用,简单的脚本逻辑可以<script>标签内.我们需要封装.

Page类为我们提供了几个方法用于实现以下内容,但需要注意的是,asp.net2.0新加了一个类ClientScriptManager,专门用于管理客户端脚本的方法,使用方法为

ClientScriptManager = Page.ClientScript;

(1)注册脚本库(js文件) RegisterClientScriptInclude 方法

(2)发出位于页面顶部和尾部的脚本 RegisterStartupScript 方法 和 RegisterClientScriptBlock 方法

(3)确保脚本块在页面只出现一次 以Is带头Registered结尾的四个方法

(4)将控件事件处理程序与客户端提交事件关联起来 RegisterOnSubmitStatement 方法

(5)注册一个数组用来存储控件自身变量 RegisterArrayDeclaration方法

(6)注册一个隐藏域 RegisterHiddenField 方法

对于以上方法的具体使用MSDN均给出了具体的示例,刚看的时候感觉方法名比较长,接触后就会感觉简单了,对以上方法的使用一定要了解.如果你不想看MSDN的话,那么推荐看下面几篇文章,相信对你会有很大帮助.还有建议大家可以看下呈现后的HTML代码,这样会加深理解.

从 ASP.NET 服务器控件插入客户端脚本

使用客户端脚本

4.了解预呈现PreRender事件

这里还是要讲控件的生命周期,在控件呈现Render方法之前,还有一个预呈现OnPreRender 方法.其周期是在OnLoad之后的MSDN给出了其解释

在呈现输出之前执行任何更新。可以保存在预呈现阶段对控件状态所做的更改，而在呈现阶段所对的更改则会丢失

总结的话,总是很简单的,要深刻理解的话,还是需要我们去试验一下,再回来体验上面这句话

先看一个简单的例子,在页面上重写了Page_PreRender,在其事件中给label1赋值,然后再定义了button事件,你会发现button事件触发后label的值还是保持不变.

示例一



protected void Page_PreRender(object sender, EventArgs e)

protected void Button1_Click(object sender, EventArgs e)
protected override void OnPreRender(EventArgs e)
[ToolboxData("<{0}:NormalButton runat=server></{0}:NormalButton>")]
public class NormalButton : Button
ConfirmationOnLoad();

WebUIConfirmation.js

//String去空格
String.prototype.Trim = function()

//初始化获取控件ID

//添加onclick事件

//弹出确认窗口

OK,上面的服务器控件代码还是挺简单的,你看的懂JS的话,那这个效果就没问题了.其实说真的,难点在于JavaScript脚本,呵呵.

下面再说一个例子吧,也是asp.net服务器控件开发技术与实例的例子,是一个可伸缩面板控件,其是一个集合属性和客户端脚本一起实现的效果

但此控件却并在呈现页面上用到js脚本,也没重写OnPreRender方法,而是定义了一个HTC,其关键实现是服务器控件的集合属性的实现,还有就是客户端脚本的实现,具体代码可以在后面下载.

其他:
1.客户端脚本在服务器控件中的最频繁的使用则是验证控件的使用了,你也可以自定义验证控件,但我感觉用处不是很大,如果需要你可以了解下System.Web.UI.IValidator 接口和System.Web.UI.WebControls.BaseValidator类

2.另外还有客户端回调,你可以了解下ICallbackEventHandler接口,具体还是看相关文章或者MSDN吧.

好了又写完一篇了,如果你刚接触这些东西的话,对你还是有帮助的,如果你已经了解了,我上面讲的对你来说就很简单了.还是想那样说,关键在于你对JavaScript的熟练程度.一些东西还需要你自己去挖掘.

这里再说一句,如果你没有asp.net服务器控件开发技术与实例此书的话,你则可以去天极看作者金属边缘写的ASP.NET2.0服务器控件,其写的大致跟书上内容90%以上相似.

本次代码为asp.net服务器控件开发技术与实例的例子的代码

代码下载