对于Button控件的UseSubmitBehavior属性以前一直存在一些理解上的误区,特别是它和OnClientClick事件一起使用时。
下面就对Button控件的UseSubmitBehavior属性和OnClientClick事件的使用做一个详细的说明:
首先说一下UseSubmitBehavior属性的定义:
UseSubmitBehavior为true时(默认),Button控件(类)会被呈现为 <input type="submit">标签,利用浏览器的提交机制进行回发。
UseSubmitBehavior为false时,Button控件(类)会被呈现为 <input type="button">标签,这种情况下,该Button控件仍为回发按钮,该控件的onclick客户端事件处理程序会绑定到一段由ASP.NET回发机制提供的JavaScript代码上(__doPostBack函数),LinkButton和ImageButton控件也同样如此。即Button控件被呈现为
<input type="button" οnclick="__doPostBack(Button, '')" id="Button" />
__doPostBack函数如下:
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
示例代码如下:
<script type="text/javascript" language="javascript">
function SubmitButton_Client_True_click() {
alert("SubmitButton_Client_True client click!");
return true;
}
function SubmitButton_Client_False_click() {
alert("SubmitButton_Client_False client click!");
return false;
}
function GeneralButton_Client_True_click() {
alert("GeneralButton_Client_True client click!");
return true;
}
function GeneralButton_Client_False_click() {
alert("GeneralButton_Client_False client click!");
return false;
}
</script>
<asp:Button ID="SubmitButton_Client_True" runat="server" Text="SubmitButton_Client_True"
UseSubmitBehavior="true" OnClientClick="return SubmitButton_Client_True_click();"
OnClick="SubmitButton_Click" />
<asp:Button ID="SubmitButton_Client_True2" runat="server" Text="SubmitButton_Client_True2"
UseSubmitBehavior="true" OnClientClick="SubmitButton_Client_True_click();"
OnClick="SubmitButton_Click" />
<asp:Button ID="SubmitButton_Client_False" runat="server" Text="SubmitButton_Client_False"
UseSubmitBehavior="true" OnClientClick="return SubmitButton_Client_False_click();"
OnClick="SubmitButton_Click" />
<asp:Button ID="SubmitButton_Client_False2" runat="server" Text="SubmitButton_Client_False2"
UseSubmitBehavior="true" OnClientClick="SubmitButton_Client_False_click();" OnClick="SubmitButton_Click" />
<asp:Button ID="GeneralButton_Client_True" runat="server" Text="GeneralButton_Client_True"
UseSubmitBehavior="false" OnClientClick="return GeneralButton_Client_True_click();"
OnClick="GeneralButtonClick" />
<asp:Button ID="GeneralButton_Client_True2" runat="server" Text="GeneralButton_Client_True2"
UseSubmitBehavior="false" OnClientClick=" GeneralButton_Client_True_click();"
OnClick="GeneralButtonClick" />
<asp:Button ID="GeneralButton_Client_False" runat="server" Text="GeneralButton_Client_False"
UseSubmitBehavior="false" OnClientClick="return GeneralButton_Client_False_click();"
OnClick="GeneralButtonClick" />
<asp:Button ID="GeneralButton_Client_False2" runat="server" Text="GeneralButton_Client_False2"
UseSubmitBehavior="false" OnClientClick=" GeneralButton_Client_False_click();"
OnClick="GeneralButtonClick" />
页面被呈现的HTML如下:
<input type="submit" name="SubmitButton_Client_True" value="SubmitButton_Client_True" οnclick="return SubmitButton_Client_True_click();" id="SubmitButton_Client_True" />
<input type="submit" name="SubmitButton_Client_True2" value="SubmitButton_Client_True2" οnclick="SubmitButton_Client_True_click();" id="SubmitButton_Client_True2" />
<input type="submit" name="SubmitButton_Client_False" value="SubmitButton_Client_False" οnclick="return SubmitButton_Client_False_click();" id="SubmitButton_Client_False" />
<input type="submit" name="SubmitButton_Client_False2" value="SubmitButton_Client_False2" οnclick="SubmitButton_Client_False_click();" id="SubmitButton_Client_False2" />
<input type="button" name="GeneralButton_Client_True" value="GeneralButton_Client_True" οnclick="return GeneralButton_Client_True_click();__doPostBack('GeneralButton_Client_True','')" id="GeneralButton_Client_True" />
<input type="button" name="GeneralButton_Client_True2" value="GeneralButton_Client_True2" οnclick=" GeneralButton_Client_True_click();__doPostBack('GeneralButton_Client_True2','')" id="GeneralButton_Client_True2" />
<input type="button" name="GeneralButton_Client_False" value="GeneralButton_Client_False" οnclick="return GeneralButton_Client_False_click();__doPostBack('GeneralButton_Client_False','')" id="GeneralButton_Client_False" />
<input type="button" name="GeneralButton_Client_False2" value="GeneralButton_Client_False2" οnclick=" GeneralButton_Client_False_click();__doPostBack('GeneralButton_Client_False2','')" id="GeneralButton_Client_False2" />
逐个单击之后不难发现其中当Button控件OnClientClick="return GeneralButton_Client_False_click();" 中是否使用return对回发有直接影响。
1. 当UseSubmitBehavior为true时
a. 若使用return,只有客户端JS函数返回true时,才会回发。
b. 若不使用return, 不管客户端脚本运行结果如何,始终会回发。
2. 当UseSubmitBehavior为false时
a. 若使用return,不管客户端脚本运行结果如何,始终都不会回发。(因为__doPostBack函数在return语句之后,永远不会执行)
b. 若不使用return, 不管客户端脚本运行结果如何,始终会回发。