日期:2011-07-09  浏览次数:20928 次

经常在网上看到类似的问题:如何让ASP.NET服务器端控件响应客户端事件?

ASP.NET服务器端控件能够响应服务器端事件,使我们能够像编写Windows程序一样编写网页。可有时我们并不需要让客户端运行的控件和服务器发生交互,这样做的开销是很大的:不仅占用网络带宽、服务器的CPU资源,还会产生一次PostBack导致客户端浏览器“刷新”影响界面效果。
如果直接在Web窗体的HTML代码内为服务器端控件添加客户端事件代码,就像这样:
<asp:Button id="Button1" Text="按钮1"/>

你会发现,当按下这个按钮时,并没有预定的消息框弹出,而是直接执行服务器端代码内的响应按钮按下事件的Button1_Click方法(假设我们已经为按钮绑定了这个事件)。如果查看客户端页面的源代码,按钮的onClick事件里,根本没有自己写的代码,却变成了"javascript:__doPostBack(...)"。

其实这正是.NET Framework转换工作的一部分。有了这个"javascript:__doPostBack(...)",才能实现按钮提交、服务器端响应事件等一系列动作。(关于这段自动加上的脚本,我会在今后的文章里详细说明。)

想要控件在客户端就响应事件,必须另寻他法。好在.NET已经为我们提供了丰富的接口去实现这些功能。

所有的服务器端控件(Button、Label、TextBox……)都有一个属性Attributes——这是一个很重要的属性,它是服务器端控件在客户端对应HTML元素属性及事件的集合。有了它,我们能够自定义服务器端控件在客户端的行为、外观。

还是刚才的Button1,这次我们在Page_Load事件里加上这么一句(在IsPostBack判断之外):
Button1.Attributes.Add("onclick", "window.alert('按钮被按下了')");

重新生成项目之后再次浏览页面,这次我们终于能够看到“按钮被按下”的消息框被正常弹出了。
回过头来解释这句代码:Attributes是Button1也是所有服务器端控件拥有的属性,Add(...)是Attributes所属的一个方法,作用是为控件在客户端的HTML标记内添加代码,第一个参数是属性的名称,第二个参数是属性的值。在这里我们为按钮的onclick事件添加了一段弹出消息框的代码。在客户端查看页面源代码,可以看到按钮的onclick事件里包含了这段代码(.NET Framework自动生成的"__doPostBack(...)"就跟在后面,我们使用Add就是告诉.NET Framework:“先加入我们的代码!”)。

Attributes还有另一种访问的形式(C#专用):
Button1.Attributes["onclick"] = "window.alert('按钮被按下了')"; // []内是属性的名称,等号右边就是属性的值

这个方法同样可以用于使用服务器端代码为控件改变属性:
Button1.Attributes["style"] = "fontsize: 9pt"; // 改变控件样式的字体为9磅