服务端控件 onclientclick 页面刷新问题

一

做网页经常要和JavaScript打交道，经常要用JavaScript做一些客户端的验证，但是如果我们的按钮用的是HTML控件的话，验证通过后无 法调用后台代码，如果用服务器端控件，验证不通过有要刷新页面，这个有时候挺烦人的，能不能让服务器段的按钮调用客户端的验证，如果验证成功后在调用服务 器端的方法，这样既减少了网路传输，给用户感觉也好。

这个问题解决方法就是在onclientclick调用的js方法中加上return false；如果加上return true也是要提交页面，也就是会执行服务端程序。

例如：

function CheckUser()

{

bool result = true;

//验证客户端输入是否符合规则

if(验证未通过)

{

result = false;

alert("请检查您的输入是否正确");

}

//否则验证通过提交，并执行服务端代码

return result;

}

那么我们把button OnClientClick设置成 return CheckUser();就可以了！

如：

<ccc:XButton ID="btnPlaceMgr" runat="server" Text="lbl03005" IsMultiLang="true"

OnClientClick="return CheckUser();"
CssClass="btnNoPlaceMgr" />

注意：标红的return一定要加上，否则没有效果。

二

一、事件
　　这是一个长期被我忽略或者是没有发现的问题，问题是这样的：
　　在一个页面中，当有验证控件的时候，当Button控件触发OnClientClick事件，并且这个事件会返回true和false的时候，验证控件就会失效，不起作用了。具体描述如下：
　　.Net页面如下：



<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<div>

<asp:TextBox ID="TextBoxTest" runat="server"></asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBoxTest"

ErrorMessage="不能为空" Display="None"></asp:RequiredFieldValidator><ajaxToolkit:ValidatorCalloutExtender

ID="ValidatorCalloutExtender1" TargetControlID="RequiredFieldValidator1" runat="server">

</ajaxToolkit:ValidatorCalloutExtender>

<asp:Button ID="ButtonText" runat="server" Text="测试" OnClientClick="return confirm('你确定要提交吗？');" />

</div>

</form>　　

　　如上，在页面中加入RequireFieldValidator验证控件，使TextBoxTest的值不能为空，在ButtonText提交页面时，要用户确认是否需要提交。很简单的一个页面，貌似也没有什么问题。可是当TextBoxTest的值为空的时候，验证控件竟然不起作用，提交页面成功。这是什么原因呢？
二、响应事件
　　这是怎么回事呢？首先我将ButtonTest的OnClientClick事件去掉后，验证控件是起作用的。这又是为什么呢？我查看了页面的源代码，发现ButtonTest控件生成如下源代码：
<input type="submit" name="ButtonText"
value="测试" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ButtonText", "", true, "", "", false, false))" id="ButtonText" />
从这行源代码可以看出，验证控件在客户端生成了一段javascript代码，验证TextBox中的值是否为空。当我加上ButtonTest的OnClientClick后，我重新查看了源代码，ButtonTest控件生成的源代码如下：
<input type="submit" name="ButtonText" value="测试" onclick="return
confirm('你确定要提交吗？');WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ButtonText", "", true, "", "", false, false))" id="ButtonText" />
从这行代码中，可以非常清楚的看到问题处在什么地方了，在客户端，首先执行的是自定义的javascript，然后在执行验证控件生成的这一段javascript，显然，在这种情况下，验证控件就失去任何意义了。
三、响应控件
　　知道了问题处在什么地方，就好办了，我的解决办法是：在执行自定义的javascript（return confirm('你确定要提交吗？‘）前
，就要验证页面中的控件是否符合规则，于是我将ButtonTest的OnClientClick事件修改如下：



<asp:Button ID="ButtonText" runat="server" Text="测试" OnClientClick="if(CheckClientValidate()) return Confirm('你确定要提交页面吗？');" />
CheckClientValidate()方法的代码如下：


Code

<script language="javascript" type="text/javascript">

function CheckClientValidate(){

Page_ClientValidate();

if (Page_IsValid){

return true;

}else{

return false;

}

}

</script>

运行，测试。验证控件发挥作用。问题解决。
四、后记
　　这就是被我已知忽略的问题和解决方案，当我发觉这个问题的时候，冒出了一身冷汗，幸亏做了严格的服务器端验证，不然可就惨了。从这里也可以看出指定严格的服务器端验证是多么的有必要啊:-)。它不仅可以防止”黑客“绕过客户端验证，还可以防止因为自己没有发觉的错误，造成数据的不准确。

注：

Page_ClientValidate(),本函数用于在包含微软验证控件的aspx页面中，根据用户输入操作是否合法,返回True或者False

可直接判断。

if(Page_ClientValidate())

{

return true;

}

else

{

return false;

}