在_doPostBack方法内,通过theForm.submit()来使数据提交到服务器。
这样很容易看出,如 果我们想要在数据提交到服务器端前做些验证的事情,就要首先在_doPostBack之前做些处理,并使数据验证只有达到了要求 后,才可以调用_doPostBack使数据回传。我们首先给Button加一个 OnClientClick属性,给OnClientClick 属性指定一个JS方法Test():
<asp:Button ID="Button1" OnClientClick="test();" UseSubmitBehavior="false" runat="server" Text="Button" οnclick="Button1_Click" />
JS代码如下:
1: function test()
2: {
3: alert("test");
4: return false ;
5: }
再看一下经过服务端解析后输出的控件HTML代码:
<input type="button" name="Button1" value="Button" οnclick="test();__doPostBack('Button1','')" id="Button1" />
我们看到test方法执行是在_doPostBack之前,当我们点按钮时, 页面会弹出 test 警告,但是仍然会继续提交数据到服务器。如果不想提交数据到服务器,就要想办法阻止_doPostBack执行。到了这一步,解决办法就很明白了,我们只 需要把onclick变成 test();return;_dopostBack('Button1','')就可以了。如果需要test()方法的判断结果才决定是否提交数据到服 务器,我们需要这样改动 if(!test())return;_dopostBack('Button1','')。
打开aspx源 代码,把OnClientClick改成OnClientClick= "if(!test())return; "我们再看一下HTML的输出:
<input type="button" name="Button1" value="Button" οnclick="if(!test())return;__doPostBack('Button1','')" id="Button1" />
运行测试,满足要求。
这只是一种解决办法,还有就是重写 Button,自己控制onclick的输出或者利用验证控件。
还有如下方式也可解决:
---------------------------------------------------------------------------------------------------------------
一个页面,有一个文本框和一个提交按钮,同时有一个验证控件来验证文本框中的输入,单击BUTTON时同时要触发一个javascript 脚本。
在PageLoad中加入:Button1.Attribute.Add("onclick","return CheckOther()");
运行时提示发生脚本错误,缺少";"
生成的HTML:<input type="submit" name="btCheck" value=" 注 册 " οnclick="return CheckAgree()if (typeof(Page_ClientValidate) == 'function') Page_ClientValidate(); " language="javascript" id="btCheck" />
可 以发现:CheckAgree()后的确是缺少了";"
改为:Button1.Attribute.Add("onclick","return CheckOther();");
运行时不提示脚本错误,但验证控件不起作用了。
生成的HTML:<input type="submit" name="btCheck" value=" 注 册 " οnclick="return CheckAgree();if (typeof(Page_ClientValidate) == 'function') Page_ClientValidate(); " language="javascript" id="btCheck" />
可 以发现:onclick时调用完CheckAgree()函数直接就返回了,根本就没有调用验证脚本。
改 为:Button1.Attribute.Add("onclick","if(Page_ClientValidate()) return CheckAgree();");
运行时不提示脚本错误,并且验证控件也起作用了,但是页面验证了两次
生成的 HTML:<input type="submit" name="btCheck" value=" 注 册 " οnclick="if(Page_ClientValidate()) return CheckAgree();if (typeof(Page_ClientValidate) == 'function') Page_ClientValidate(); " language="javascript" id="btCheck" />
可 以发现:在调用Checkgree()函数前先验证了一次页面,但如果页面没有通过验证,就会执行下面的if (typeof(Page_ClientValidate) == 'function') Page_ClientValidate();又执行了一次验证。
改为:Button1.Attribute.Add("onclick","if(Page_ClientValidate()) {eturn CheckAgree();}else{return false;}");
问题解决
生成的 HTML:<input type="submit" name="btCheck" value=" 注 册 " οnclick="if(Page_ClientValidate()){return CheckAgree();}else{return false;}if (typeof(Page_ClientValidate) == 'function') Page_ClientValidate(); " language="javascript" id="btCheck" />
不过可以看到if (typeof(Page_ClientValidate) == 'function') Page_ClientValidate(); 是垃圾代码,根本就不会执行
把Button1的 CausesValidation设置为false,生成的HTML:
<input type="submit" name="btCheck" value=" 注 册 " id="btCheck" οnclick="if(Page_ClientValidate()){return CheckAgree();}else{return false;}" />
可以看到,没有垃圾代码了。
但是我想先执 行CheckAgree(),如果返回true再验证页面,就可以这样写:
Button1.Attribute.Add("onclick","return CheckAgree()");
function CheckAgree()
{
if(!document.all["checkbox"].checked)
{
alert(" 如果继续注册,必须先同意协议!");
return false;
}
else
{
if(Page_ClientValidate())
{
return true;
}
else
{
return false;
}
}
}
asp.net开发中,通常需要做一些客户端验证。当我们默认在一个页面中加个button控件时,这个Button被asp.net 输出为一个Submit按钮。
<asp:Button ID="Button1" runat="server" Text="Button" οnclick="Button1_Click" />
查看前台的HTML源码是:
<input type="submit" name="Button1" value="Button" id="Button1" />
Button 有一个OnClientClick 属性,这个属性可以在提交的同时做一些提示,但是不能阻挡数据的回传。而我们需要的是在前台做一些验证,如果数据符合要 求,才允许提交到数据库。我们如果想要在Button控件提交前做一些验证的事情,就首先要Submit改成Button。对于这个改动,在 asp.net上是很简单的。只需要加上UseSubmitBehavior="false" 属性,这样submit就会变成button控件。
<asp:Button ID="Button1" UseSubmitBehavior="false" runat="server" Text="Button" οnclick="Button1_Click" />
输 出HTML源码:
<input type="button" name="Button1" value="Button" οnclick="javascript:__doPostBack('Button1','')" id="Button1" />
这时候,asp.net提交不再是通过submit了,而是要首先经过一个 _doPostBack的JS方法后,再提交,我们来看一下_doPostBack方法:
1: <script type="text/javascript">1:
2: //<![CDATA[3: var theForm = document.forms['form1'];4: if (!theForm) {5: theForm = document.form1;
6: }
7: function __doPostBack(eventTarget, eventArgument) {8: if (!theForm.onsubmit || (theForm.onsubmit() != false)) {9: theForm.__EVENTTARGET.value = eventTarget;
10: theForm.__EVENTARGUMENT.value = eventArgument;
11: theForm.submit();
12: }
13: }
14: //]]></script>