控制Asp.net的Button控件的提交动作

asp.net开发中，通常需要做一些客户端验证。当我们默认在一个页面中加个button控件时，这个Button被asp.net 输出为一个Submit按钮。 asp:Button ID=Button1 runat=server Text=Button on click=Button1_Click /

在_doPostBack方法内，通过theForm.submit()来使数据提交到服务器。

这样很容易看出，如 果我们想要在数据提交到服务器端前做些验证的事情，就要首先在_doPostBack之前做些处理，并使数据验证只有达到了要求 后，才可以调用_doPostBack使数据回传。我们首先给Button加一个 OnClientClick属性，给OnClientClick 属性指定一个JS方法Test():

<asp:Button ID="Button1" OnClientClick="test();" UseSubmitBehavior="false" runat="server"  Text="Button" onclick="Button1_Click" />

JS代码如下：

 1: function test()

 2: {

 3: alert("test");

 4: return false ;

 5: }

 

再看一下经过服务端解析后输出的控件HTML代码:

<input type="button" name="Button1" value="Button" onclick="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" onclick="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=" 注 册 " onclick="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=" 注 册 " onclick="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=" 注 册 " onclick="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=" 注 册 " onclick="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" onclick="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" onclick="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" onclick="Button1_Click" />

输 出HTML源码：

<input type="button" name="Button1" value="Button" onclick="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>