使用JavaScript在客户端验证GridView控件的数据项

      或许许多人都会问，怎样使用JavaScript在客户端验证GridView控件呢？在客户端又怎么去得到一个服务端控件的客户端ID呢？本文将介绍如何在客户端使用JavaScript 去创建一个验证方法，以及怎样在ASP.NET的CodeFile后去使用这个验证方法。

      此时，或许有人会说，可以使用表达式语句来获取服务端控件的ClientID,那应该怎么实现呢？我们先来看一个示例，页面上有一个服务端的按扭，定义如下：

<asp:Button ID="btnValidate" runat="server" Text="ValidateGrid" />

     我们可以通过表达式语句和JavaScript组合得到这个控件的客户端ID，如下：

1<script type="text/javascript">
2function GetClientID()
3script>

     OK，这好象可以满足我们的需求，我们可以测试GetClientID方法以验证此方案的正确性，结果为ValidateGrid。

     下面我们进入主题，使用JavaScript在客户端验证GridView控件，那具体怎么实现呢？GridView里的每一项数据怎么才能够得到正确的验证呢？如果在GridView里嵌入了普通的控件(TextBox、CheckBox等)或是嵌套了GridView/DataList等复杂的类型控件，这些复杂的控件里又继续嵌套普通的控件，这样负责的嵌套关系，我们应该怎样做才能正确的得到相应的客户端ID呢？
      显然用上面所介绍的表达式和JavaScript组合的方案是此处是无用武之地了, 我们得另寻宝地掏金，寻求一种新的解决方案来应对目前的需求。OK，下面我就通过一个示例来介绍这个需求的实现。
                
      如上图示，示例中我们通过选择CheckBox来决定要对那一行的相应TextBox的数据在客户端使用JavaScript来进行验证。首先我们得做好进行验证的准备工作，在服务端动态的构造一个DataTable，并为其添加4行空白数据行(DataRow)：

 1protected void Page_Load(object sender, EventArgs e)
 2}

      在为Gridview绑定数据的同时还为btnValidate按扭添加了一属性，让其执行客户端onclick事件调用validate方法。到此我们还需要做一件事，可以先分析下，GridView在实际开发中不可能只有1、2、3.....8或是9条这样固定的记录条数，如果是固定的记录条数我们可以在用死编码的方法去解决，那么对于数据记录不固定的情况下应该怎么解决呢？
      对的，问题就在这里，其实大家可以看看通过上面的数据绑定后的这个页面，在运行后的源文件里生成的html代码，以CheckBox为例,在客户端生成的是如下代码片段：

1<input id="JavascriptGrid_ctl02_ChkValidate" type="checkbox" name="JavascriptGrid$ctl02$ChkValidate" />
2<input id="JavascriptGrid_ctl03_ChkValidate" type="checkbox" name="JavascriptGrid$ctl03$ChkValidate" />
3<input id="JavascriptGrid_ctl04_ChkValidate" type="checkbox" name="JavascriptGrid$ctl04$ChkValidate" />
4<input id="JavascriptGrid_ctl05_ChkValidate" type="checkbox" name="JavascriptGrid$ctl05$ChkValidate" />

      看上去好象是有一些规律，可在JavaScript中好象好是不太方便去操作，因为无法直接得到GridView的记录总的条数，我们也无法确定在客户端所生成的ID就一定的通过这样的规律来生成，这样做起也比较复杂。那有没有一种比较简练的解决方案呢？答案是肯定的，其实我们完全可以使用在服务器端生成客户端代理的方式来处理，也就是说我们在服务器通过程序把每个控件的ClientID取出来生成客户端的代理。然而在本示例中所涉及的不是单一的控件，而是一系列的控件，呵呵，我们还有一招没使呢--数组，通过在服务端生成客户端的数组代理，OK，就这么做。代码定义如下：

 1/// <summary>
 2/// 在呈现该页前激发
 3/// </summary>
 4/// <param name="sender"></param>
 5/// <param name="e"></param>
 6protected void JavascriptGrid_PreRender(object sender, EventArgs e)
 7}

      通过Gridview控件的PreRender事件来处理，在页面呈现之前就把所有服务端控件的ClientID生成客户端代理，这样在客户端就可以很轻松的对这个控件进行相应的操作了。此时，我们在次去查看页面运行后的html便会发现多出了以下JavaScript的代码定义，这就是在服务端所生成的客户端代理的JavaScript代码(格式我作了调整) ：

 1<script type="text/javascript">
 2<!--
 3var grd_Cb =  new Array('JavascriptGrid_ctl02_ChkValidate', 
 4                        'JavascriptGrid_ctl03_ChkValidate', 
 5                        'JavascriptGrid_ctl04_ChkValidate', 
 6                        'JavascriptGrid_ctl05_ChkValidate');
 7var grdFirstName_Txt =  new Array('JavascriptGrid_ctl02_FirstName', 
 8                                  'JavascriptGrid_ctl03_FirstName', 
 9                                  'JavascriptGrid_ctl04_FirstName',
10                                  'JavascriptGrid_ctl05_FirstName');
11var grdLastName_Txt =  new Array('JavascriptGrid_ctl02_LastName', 
12                                 'JavascriptGrid_ctl03_LastName', 
13                                 'JavascriptGrid_ctl04_LastName', 
14                                 'JavascriptGrid_ctl05_LastName');
15var grdEmail_Txt =  new Array('JavascriptGrid_ctl02_Email', 
16                              'JavascriptGrid_ctl03_Email', 
17                              'JavascriptGrid_ctl04_Email', 
18                              'JavascriptGrid_ctl05_Email');
19var grdZip_Txt =  new Array('JavascriptGrid_ctl02_Zip', 
20                            'JavascriptGrid_ctl03_Zip', 
21                            'JavascriptGrid_ctl04_Zip', 
22                            'JavascriptGrid_ctl05_Zip');
23// -->
24</script>

    OK，有了上面的定义，接下来就很简单了，只需要判断grd_cd是否选中就可以决定那一行数据需要进行验证了。

 1<script type="text/javascript">
 2function validate()
 3script>

     这些JavaScript代码非简单我就不做过多的解释了，这里只是作了非空验证，要想进行其他的验证就此基础上扩展便可，OK，那我们来作个测试，看看之前所做的是否？？？？？ 
              
      成功了! 详细的代码定义如下：

 1using System;
 2using System.Data;
 3using System.Configuration;
 4using System.Web;
 5using System.Web.Security;
 6using System.Web.UI;
 7using System.Web.UI.WebControls;
 8using System.Web.UI.WebControls.WebParts;
 9using System.Web.UI.HtmlControls;
10
11public partial class _Default : System.Web.UI.Page 
12}

  1>

注：转载请注明出处：http://beniao.cnblogs.com/  或着  http://www.cnblogs.com/