asp.net里面button的submit，or usesubmitbehavior property （转载）

2010-06-02 15:44:51|  分类： .net 阅读384 评论0   字号：大中小 订阅

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

 

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 >

 

在_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;
 }
 }
}

转载于:https://www.cnblogs.com/wwd252/archive/2011/06/22/2086708.html