在隐藏的div中慎用asp.net验证控件

这两天被asp.net的验证控件给弄得焦头烂额。并不是asp.net的验证控件本身有什么问题,而是我的用法导致了一个被隐藏的验证。问题如下:

在一个页面中有DIV a和DIV b:

div a有如下asp.net控件:TextBox,RequireFieldValidator(验证TextBox),Button

div b有如下asp.net控件:TextBox,RequireFieldValidator(验证TextBox),Button

div a默认状态时visible,div b的默认状态时隐藏。

在页面初始化完成后,在div a中TextBox中输入数据,然后点击Button.结果却无论如何也不能引发服务器提交。但是button还是能够响应客户端onclick事件。

经过一番摸索发现如果将Button的OnClientClick事件写上return true;的javascript语句,结果却能正常引发服务器提交。

分析了一下应该是在Client引发Click事件后到页面引发提交之间的某个环节导致了页面取消了提交。于是在IE浏览器中查看ASP.NET生成的客户端源代码,通过调试客户端javascript(感谢IE8,居然提供了可以像使用VS Debug功能一样来调试javascript),终于发现是在验证页面的时候有一个流程中导致验证失败。通过查看导致验证失败的控件ID,发现该控件居然是div b中的控件。

顿时间恍然大悟,虽然 div b此时处于隐藏状态,但是div a中的button空间引发页面提交的时候也会导致div b中的验证控件进行验证。由于div b 中的TextBox处于初始状态(没有值),这样肯定会导致RequireFieldValidator验证失败,从而导致页面取消提交。

把div b中的验证控件去掉后,一切恢复正常。

其实验证控件是以个很有用的控件,但是再有用的东西如果使用方法不恰当有时候会为你带来很多的麻烦。因此我们应该学会在适当的地方去利用适当的控件,这样才能使我们事半功倍。

在有可能会被隐藏的div中最好不用验证控件,因为页面上其他地方的页面提交页会导致该div中的验证控件的页面验证,并且验证结果很大可能会是失败(div 被隐藏,很有可能div中的TextBox中没有输入任何值),但是验证结果且不能在UI上体现出来(div被隐藏)。因此页面会取消提交,但是从UI上却看不出来原因,因此会很奇怪。