页面会用一个数组来记录这些Control的ID。
通过.Form的Key传递回来的ID,和这些ID进行匹配,然后判断转向适当的Click事件。
回复
__doPostBack是一个纯粹并且是非常简单的javascript函数,大部分的页面PostBack都是由它触发的。注意,这里是“大部分”,因为只有两个Web Server Control 会自己触发页面的PostBack,其它的所以控件都是通过__doPostBack函数触发页面的PostBack,那先来看一下这个函数的定义吧:
CODE1:
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
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事件。那上面也说了,大部分的控件都是调用这个方法来引了页面的PostBack,只有两个控件是例外,Button 和 ImageButton,正是因为它们不是通过调用__doPostBack来回发事件,所以通过表单隐含变量__EVENTTARGET和__EVENTARGUMENT是无法获取得到引发PostBack的Button或ImageButton的ID和参数值的,只有通过下面的方式才能得它们的实例,进而判断是哪个控件引发的PostBack的:
CODE2:
foreach (string str in Request.Form)
{
Control c = Page.FindControl(str);
if (c is Button)
{
control = c;
break;
}
}
为什么能通过枚举Request.Form集合的Key值,查找到的回发事件源呢?在这里Button和ImageButton又有一些不同。Button控件引发的PostBack,会将Button本身的ID作为Request.Form的一个Key,它的Value是Button的Text属性值,回传给服务器,这样服务器就可以通过枚举Request.Form的Key值,去查找出控件实例,判断是否为Button控件,进而得到是哪个控件引发的PostBack事件。而ImageButton的不同就在于,它不仅仅是用ImageButton的ID作为Request.Form的Key,它是用ImageButton的ID加上.x和.y,作为Key,在Request.Form添加两上键值对,这两个键值对的值应该是标识ImageButton的图片大小。同样的,了解了这个规律后,我们仍然可以通过一定的方式得到是否是由ImageButton引发的PostBack。
总结:理解并掌握__doPostBack原理对我们更加了解Page的事件模型有非常大的帮助,并且也是我们进一步利用好页面的PostBack事件的一个重要基础。在整个asp.net页面PostBack模型中,只有Button和ImageButton是个例外,其它的控件都是一样的,也就是使用__doPostBack函数。在当我们需要通过__EVENTTARGET取得到事件源控件的话,这点是特别要注意的。
Understanding the JavaScript __doPostBack Function | |||||||||||||||||||
Published: 20 Jun 2006 Abstract In this article we will look into the __doPostBack function of JavaScript. Read the article to find some insights about the function. | |||||||||||||||||||
Feedback | |||||||||||||||||||
Average Rating: This article has not yet been rated. Views (Total / Last 10 Days): 8409/ 686 | |||||||||||||||||||
| |||||||||||||||||||
Introduction | |||||||||||||||||||
[
Back To Top ]
It is quite amazing to note that only two of the ASP.NET web server controls cause a postback. All the other controls use the JavaScript __doPostBack function to trigger the postback. In this article you will learn about the __doPostBack function and how it works.
| |||||||||||||||||||
_doPostBack Function | |||||||||||||||||||
[
Back To Top ]
The best way to understand the working of the __doPostBack function is to dissect the function into small pieces and explore each piece one at a time. Let us take a look at the function.
Listing 1 - _The __doPostBack function
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
Analysis
The __doPostBack function takes two arguments, eventTarget and eventArgument. The eventTarget contains the ID of the control that causes the postback and the eventArgument contains any additional data associated with the control. Note that the two hidden fields, “__EVENTTARGET” and “__EVENTARGUMENT,” are automatically declared. The value of the eventTarget and eventArgument are stored in the hidden fields. The two hidden variables can be accessed from the code behind using the forms/params collection.
| |||||||||||||||||||
Finding the control that caused the postback | |||||||||||||||||||
[
Back To Top ]
Using the hidden variables you can also find the ID of the control which causes the postback. All you need to do is to retrieve the value of the __EVENTTARGET from the form parameter collection. Take a look at the code below.
Listing 2 – Getting the _EVENTTARGET hidden field
protected void Page_Load(object sender, EventArgs e)
{
string controlName = Request.Params.Get("__EVENTTARGET");
}
Analysis
For this code to work you need to add any web server control on the form except for Button and ImageButton control (I will tell you why later in this article). Let us add the DropDownList control and set the AutoPostBack property to true and populate the DropDownList with some dummy data. Now, run the page and view the source of the page.
You will see the following line of code.
Listing 3 – DropDownList calling __doPostBack function
<select name="DropDownList1"
onchange="javascript:setTimeout('__doPostBack(/'DropDownList1/',/'/')', 0)"
id="DropDownList1">
<option selected="selected" value="One">One</option>
<option value="Two">Two</option>
</select>
The onchange event of the DropDownList calls the __doPostBack function. The ID of the control, “DropDownList1,” is also passed to the _doPostBack function and stored in the _EVENTTARGET hidden field. In the Page_Load I fetch the value of the _EVENTTARGET variable which in this case is the ID of the DropDownList. This way we can find out that which control caused the postback.
| |||||||||||||||||||
What about Buttons and ImageButtons? | |||||||||||||||||||
[
Back To Top ]
You might be wondering about the POSTBACK triggered by the Buttons and the ImageButtons. Well, let us see the code generated by the Buttons.
Listing 4 – Code generated by the Button server control
<input type="submit" name="Button1" value="Do PostBack" id="Button1" />
As demonstrated in the code above, the Button control does not call the __doPostBack function. Because of this, the _EVENTTARGET will always be empty. However, you can find out the ID of the Button by looping through the form controls collection. Take a look at the code below.
Listing 5 – Finding the Button control in the form collection
foreach (string str in Request.Form)
{
Control c = Page.FindControl(str);
if (c is Button)
{
control = c;
break;
}
}
Analysis
In the code above I iterated through the controls on the page. If the control is of type Button then the loop breaks and the control is returned back to the user.
| |||||||||||||||||||
Passing Arguments | |||||||||||||||||||
[
Back To Top ]
If you look closely at the __doPostBack function you will notice that the second argument is called the eventArgument. You can allow controls to pass arguments to the doPostBack function. Check out the code below.
Listing 6 – Passing arguments to the __doPostBack function
<input type="button" id="Button2" value="Press me" onclick="DoPostBack()" />
<script language="javascript" type="text/javascript">
function DoPostBack()
{
__doPostBack('Button2','My Argument');
}
</script>
string passedArgument = Request.Params.Get("__EVENTARGUMENT");
Analysis
The “Button2” when clicked fires the DoPostBack function which in turn calls the __doPostBack. The __doPostBack function contains two arguments, eventTarget and eventArgument. The eventTarget is “Button2” and the eventArgument is “My Argument.” Later, in the C# code behind, I have accessed the eventArgument using the Request.Params collection. The passedArgument variable will contain the value “My Argument.”
| |||||||||||||||||||
Downloads | |||||||||||||||||||
[
Back To Top ]
| |||||||||||||||||||
Conclusion | |||||||||||||||||||
[
Back To Top ]
In this article I demonstrated how the ASP.NET PostBack architecture works with the ASP.NET server controls.
| |||||||||||||||||||
| |||||||||||||||||||
Article Feedback
User Comments
|
评论