(转)客户端触发Asp.net中服务端控件事件

最新推荐文章于 2023-07-27 09:57:42 发布

weixin_30748995

最新推荐文章于 2023-07-27 09:57:42 发布

阅读量72

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/aweifly/p/3385420.html

版权

第一章、 Asp.net中服务端控件事件是如何触发的

Asp.net 中在客户端触发服务端事件分为两种情况：
　　
　　一.　　 WebControls中的Button 和HtmlControls中的Type为submit的HtmlInputButton
　　
　　这两种按钮最终到客户端的表现形式为： <input name="Submit1" id="Submit1" type="submit" value=”Submit”>，这是Form表单的提交按钮，点击以后会作为参数发送到服务端，参数是这样的：控件的name属性=控件的value值，对应上面的例子就是：Submit1= Submit。服务端会根据接收到的控件的name属性的这个key来得知是这个按钮被点击了，从而在服务端触发这个按钮的点击事件。
　　
　　二.　　 HtmlControls 中的 Type为button的HtmlInputButton 和其它所有的控件事件，比如LinkButton点击，TextBox的Change事件等等：
　　
　　这些事件在客户端产生后会经过一个统一的机制发送到服务端。
　　
　　1.　　　首先asp.net页框架会使用两个Hidden域来存放表示是哪个控件触发的事件，以及事件的参数：
　　
　　<!―表示触发事件的控件，一般是这个控件的name -->
　　
　　<input type="hidden" name="__EVENTTARGET" value="" />
　　
　　<!―表示触发事件的参数，一般是当某个控件有两个以上的事件时，用来区别是哪个事件 -->
　　
　　<input type="hidden" name="__EVENTARGUMENT" value="" />
　　
　　2.　　　服务端会生成一个jscript的方法来处理所有这些事件的发送，这段代码是：
　　
　　<script language="javascript">
　　
　　
　　
　　</script>
　　
　　3.　　　每个会引发服务端事件的控件都会在响应的客户端事件中调用上面的代码：
　　
　　比如，HtmlControls 中的 Type为button的HtmlInputButton的点击事件
　　
　　<!―客户端的点击事件调用__doPostBack，eventTarget 参数为'Button2'，表示是name为'Button2’控件触发的事件，eventArgument 为空，表示这个Type为button的HtmlInputButton只有一个客户端触发的服务端事件-->
　　
　　<input language="javascript" οnclick="__doPostBack('Button2','')" name="Button2" id="Button2" type="button"　value="Button" />
　　
　　又比如，TextBox控件的Change事件
　　
　　<!―客户端的onchange事件调用__doPostBack，eventTarget 参数为’TextBox1’，表示是name为’TextBox1’控件触发的事件，而TextBox控件只有一个客户端触发的服务端事件TextChanged，故服务器就会去触发这个TextBox的TextChanged事件->
　　
　　<input name="TextBox1" type="text" id="TextBox1" οnchange="__doPostBack('TextBox1','')" language="javascript" />
　　
　　4.　　　客户端触发事件后调用__doPostBack方法，将表示触发的控件源的eventTarget 和事件参数eventArgument分别付给两个隐藏域__EVENTTARGET和__EVENTARGUMENT，然后提交Form，在服务端根据__EVENTTARGET和__EVENTARGUMENT来判断是哪个控件的什么事件触发了。

第二章 PostBack的原理

__doPostBack是一个纯粹并且是非常简单的javascript函数，大部分的页面PostBack都是由它触发的。注意，这里是“大部分”，因为只有两

个Web Server Control 会自己触发页面的PostBack,其它的所以控件都是通过__doPostBack函数触发页面的PostBack，那先来看一下这个函

数的定义吧：

CODE1:

function __doPostBack(eventTarget, eventArgument) {

if (!theForm.onsubmit || (theForm.onsubmit() != false)) {

theForm.__EVENTTARGET.value = eventTarget;

theForm.__EVENTARGUMENT.value = eventArgument;

theForm.submit();

}

通过上面的代码可以看到，__doPostBack带有两个参数，eventTarget是标识将要引发页面PostBack的控件ID，eventArgument参数提供了在引发页面PostBack事件时所带的额外参数。当然这个函数被函数时，这两个参数的值将赋值给页面的两个隐含变量__EVENTTARGET和__EVENTARGUMENT，然后调用页面的submit方法提交页面表单。这就是为什么我们可以通过Request.Form[“__EVENTTARGET”]获取得到引发页面PostBack的控件ID的原因。

了解了__doPostBack函数后，我们可以很容易的利用它非常方便地自己触发自定义的PostBack事件。那上面也说了，大部分的控件都是调用

第三章 Button PostBack做法

引了页面的PostBack，只有两个控件是例外，Button 和 ImageButton，正是因为它们不是通过调用__doPostBack来回发事件，所以通过表单隐含变量__EVENTTARGET和__EVENTARGUMENT是无法获取得到引发PostBack的Button或ImageButton的ID和参数值的，可通过下面的方式实现

1）在页面中加如 LinkButton ，页面就会在页面中加载POSTBACK所需的JS

function __doPostBack(eventTarget, eventArgument) {

if (!theForm.onsubmit || (theForm.onsubmit() != false)) {

theForm.__EVENTTARGET.value = eventTarget;

theForm.__EVENTARGUMENT.value = eventArgument;

theForm.submit();

}

2）利用GetPostBackEventReference给客户端生成__doPostBack()
如：

比如前台页面