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

最新推荐文章于 2018-10-13 18:47:03 发布

转载最新推荐文章于 2018-10-13 18:47:03 发布 · 508 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dargon/archive/2012/03/13/2393622.html

文章标签：

#javascript #数据库 #ViewUI

本文介绍如何在ASP.NET开发中使用Button控件进行预提交验证，包括修改按钮行为、添加OnClientClick属性及使用_doPostBack方法实现自定义验证逻辑，确保数据在提交到数据库前满足特定条件。

asp.net开发中，通常需要做一些客户端验证。当我们默认在一个页面中加个button控件时，这个Button被asp.net输出为一个Submit按钮。

<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />

查看前台的HTML源码是：

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源码：

这时候，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" onclick="Button1_Click" />

JS代码如下：

1: function test() 2: { 3: alert("test"); 4: return false ; 5: }

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

我们看到test方法执行是在_doPostBack之前，当我们点按钮时，页面会弹出 test 警告，但是仍然会继续提交数据到服务器。假如不想提交数据到服务器，就要想办法阻止_doPostBack执行。到了这一步，解决办法就很明白了，我们只需要把onclick变成 test();return;_dopostBack('Button1','')就可以了。假如需要test()方法的判定结果才决定是否提交数据到服务器，我们需要这样改动 if(!test())return;_dopostBack('Button1','')。

打开aspx源代码，把OnClientClick改成OnClientClick= "if(!test())return; "我们再看一下HTML的输出：

运行测试，满足要求。

这只是一种解决办法，还有就是重写Button，自己控制onclick的输出或者利用验证控件。

通过 Wiz 发布

转载于:https://www.cnblogs.com/dargon/archive/2012/03/13/2393622.html