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

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

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

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

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

<script type="text/javascript">
function GetClientID()
{
  var btn = document.getElementById("<%=btnValidate.ClientID %>");
  alert(btn.value);
}
</script>

     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{
 3    btnValidate.Attributes.Add("onclick", "return validate()");
 4    DataTable dt = new DataTable();
 5    DataRow dtRow;
 6    dt.Columns.Add("FirstName");
 7    dt.Columns.Add("LastName");
 8    dt.Columns.Add("Email");
 9    dt.Columns.Add("Zip");

    for (int i = 0; i < 4; i++)
    {
        dtRow = dt.NewRow();
        dt.Rows.Add(dtRow);
    }
    JavascriptGrid.DataSource = dt;
    JavascriptGrid.DataBind();
}

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

<input id="JavascriptGrid_ctl02_ChkValidate" type="checkbox" name="JavascriptGrid$ctl02$ChkValidate" />
<input id="JavascriptGrid_ctl03_ChkValidate" type="checkbox" name="JavascriptGrid$ctl03$ChkValidate" />
<input id="JavascriptGrid_ctl04_ChkValidate" type="checkbox" name="JavascriptGrid$ctl04$ChkValidate" />
<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{
 8    ClientScriptManager cs = Page.ClientScript;
 9
    foreach (GridViewRow grdrow in JavascriptGrid.Rows)
    {
        //找出GridView里的每一个服务端空间
        CheckBox txtgrdValidate = (CheckBox)grdrow.FindControl("ChkValidate");
        TextBox txtgrdFirstName = (TextBox)grdrow.FindControl("FirstName");
        TextBox txtgrdLastName = (TextBox)grdrow.FindControl("LastName");
        TextBox txtgrdEmail = (TextBox)grdrow.FindControl("Email");
        TextBox txtgrdZip = (TextBox)grdrow.FindControl("Zip");
        //将相应的服务端控件的ClientID注册到客户端JavaScript数组
        cs.RegisterArrayDeclaration("grd_Cb", String.Concat("'", txtgrdValidate.ClientID, "'"));
        cs.RegisterArrayDeclaration("grdFirstName_Txt", String.Concat("'", txtgrdFirstName.ClientID, "'"));
        cs.RegisterArrayDeclaration("grdLastName_Txt", String.Concat("'", txtgrdLastName.ClientID, "'"));
        cs.RegisterArrayDeclaration("grdEmail_Txt", String.Concat("'", txtgrdEmail.ClientID, "'"));
        cs.RegisterArrayDeclaration("grdZip_Txt", String.Concat("'", txtgrdZip.ClientID, "'"));
    }
}

      通过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',
                                  'JavascriptGrid_ctl05_FirstName');
var grdLastName_Txt =  new Array('JavascriptGrid_ctl02_LastName', 
                                 'JavascriptGrid_ctl03_LastName', 
                                 'JavascriptGrid_ctl04_LastName', 
                                 'JavascriptGrid_ctl05_LastName');
var grdEmail_Txt =  new Array('JavascriptGrid_ctl02_Email', 
                              'JavascriptGrid_ctl03_Email', 
                              'JavascriptGrid_ctl04_Email', 
                              'JavascriptGrid_ctl05_Email');
var grdZip_Txt =  new Array('JavascriptGrid_ctl02_Zip', 
                            'JavascriptGrid_ctl03_Zip', 
                            'JavascriptGrid_ctl04_Zip', 
                            'JavascriptGrid_ctl05_Zip');
// -->
</script>

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

 1<script type="text/javascript">
 2function validate()
 3{
 4    for(j=0;j<grd_Cb.length;j++)
 5    {
 6        var obj = document.getElementById(grd_Cb[j]);
 7
 8        if(obj.checked ==true)
 9        {
            Checkbol=1;
            bool=1;
        }
    } 

   if(bool==0)
   {
      return false;
   }

     if (Checkbol==1)
     {
       for(i=0;i<grd_Cb.length;i++)
        {
            var Obj1 = document.getElementById(grd_Cb[i]);
            
            if(Obj1.checked ==true)
            {  
                var objFirstName=document.getElementById(grdFirstName_Txt[i]);
                if(objFirstName.value=="")
                {
                    alert("第"+ [parseInt(i)+1]+ "行的First Name不能为空!");
                    objFirstName.focus();
                    return false;
                }
                
                var objLastName=document.getElementById(grdLastName_Txt[i]);
                if(objLastName.value=="")
                {
                    alert("第"+ [parseInt(i)+1]+ "行的Last name不能为空!");
                    objLastName.focus();
                    return false;
                }
                
                var objEmail=document.getElementById(grdEmail_Txt[i]);
                if(objEmail.value=="")
                {
                    alert("第"+ [parseInt(i)+1]+ "行的E-mail不能为空!");
                    objEmail.focus();
                    return false;
                }
             }
         }
       }
   return true;
}
</script>

     这些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;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        btnValidate.Attributes.Add("onclick", "return validate()");
        DataTable dt = new DataTable();
        DataRow dtRow;
        dt.Columns.Add("FirstName");
        dt.Columns.Add("LastName");
        dt.Columns.Add("Email");
        dt.Columns.Add("Zip");

        for (int i = 0; i < 4; i++)
        {
            dtRow = dt.NewRow();
            dt.Rows.Add(dtRow);
        }
        JavascriptGrid.DataSource = dt;
        JavascriptGrid.DataBind();
    }

    /**//// <summary>
    /// 在呈现该页前激发
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void JavascriptGrid_PreRender(object sender, EventArgs e)
    {
        ClientScriptManager cs = Page.ClientScript;

        foreach (GridViewRow grdrow in JavascriptGrid.Rows)
        {
            //找出GridView里的每一个服务端空间
            CheckBox txtgrdValidate = (CheckBox)grdrow.FindControl("ChkValidate");
            TextBox txtgrdFirstName = (TextBox)grdrow.FindControl("FirstName");
            TextBox txtgrdLastName = (TextBox)grdrow.FindControl("LastName");
            TextBox txtgrdEmail = (TextBox)grdrow.FindControl("Email");
            TextBox txtgrdZip = (TextBox)grdrow.FindControl("Zip");
            //将相应的服务端控件的ClientID注册到客户端JavaScript数组
            cs.RegisterArrayDeclaration("grd_Cb", String.Concat("'", txtgrdValidate.ClientID, "'"));
            cs.RegisterArrayDeclaration("grdFirstName_Txt", String.Concat("'", txtgrdFirstName.ClientID, "'"));
            cs.RegisterArrayDeclaration("grdLastName_Txt", String.Concat("'", txtgrdLastName.ClientID, "'"));
            cs.RegisterArrayDeclaration("grdEmail_Txt", String.Concat("'", txtgrdEmail.ClientID, "'"));
            cs.RegisterArrayDeclaration("grdZip_Txt", String.Concat("'", txtgrdZip.ClientID, "'"));
        }
    }
}

  1<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
  2
  3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4
  5<html xmlns="http://www.w3.org/1999/xhtml" >
  6<head runat="server">
  7<title>无标题页</title>
  8<script type="text/javascript">
  9function validate()
 10{
 11    for(j=0;j<grd_Cb.length;j++)
 12    {
 13        var obj = document.getElementById(grd_Cb[j]);
 14
 15        if(obj.checked ==true)
 16        {
 17            Checkbol=1;
 18            bool=1;
 19        }
 20    } 
 21
 22   if(bool==0)
 23   {
 24      return false;
 25   }
 26
 27     if (Checkbol==1)
 28     {
 29       for(i=0;i<grd_Cb.length;i++)
 30        {
 31            var Obj1 = document.getElementById(grd_Cb[i]);
 32            
 33            if(Obj1.checked ==true)
 34            {  
 35                var objFirstName=document.getElementById(grdFirstName_Txt[i]);
 36                if(objFirstName.value=="")
 37                {
 38                    alert("第"+ [parseInt(i)+1]+ "行的First Name不能为空!");
 39                    objFirstName.focus();
 40                    return false;
 41                }
 42                
 43                var objLastName=document.getElementById(grdLastName_Txt[i]);
 44                if(objLastName.value=="")
 45                {
 46                    alert("第"+ [parseInt(i)+1]+ "行的Last name不能为空!");
 47                    objLastName.focus();
 48                    return false;
 49                }
 50                
 51                var objEmail=document.getElementById(grdEmail_Txt[i]);
 52                if(objEmail.value=="")
 53                {
 54                    alert("第"+ [parseInt(i)+1]+ "行的E-mail不能为空!");
 55                    objEmail.focus();
 56                    return false;
 57                }
 58             }
 59         }
 60       }
 61   return true;
 62}
 63</script>
 64</head>
 65<body>
 66    <form id="form1" runat="server">
 67      <asp:GridView runat="server" ID="JavascriptGrid" AutoGenerateColumns="False" Width="100%" OnPreRender="JavascriptGrid_PreRender">
 68       <Columns>
 69         <asp:TemplateField HeaderText="Validate">
 70           <ItemTemplate>
 71             <asp:CheckBox CssClass="textbox" runat="server" ID="ChkValidate" />
 72           </ItemTemplate>
 73           <ItemStyle Width="10%" />
 74         </asp:TemplateField>
 75         <asp:TemplateField HeaderText="First Name">
 76            <ItemTemplate>
 77                <asp:TextBox ID="FirstName" Text='<%#Eval("FirstName") %>' runat="server" Width="140"></asp:TextBox>
 78            </ItemTemplate>
 79            <ItemStyle Width="150px" />
 80            <HeaderStyle HorizontalAlign="Center" />
 81        </asp:TemplateField>
 82        <asp:TemplateField HeaderText="Last Name">
 83            <ItemTemplate>
 84                <asp:TextBox ID="LastName" Text='<%#Eval("LastName") %>' runat="server" Width="140"></asp:TextBox>
 85            </ItemTemplate>
 86            <ItemStyle Width="140px" />
 87            <HeaderStyle HorizontalAlign="Center" />
 88        </asp:TemplateField>
 89        <asp:TemplateField HeaderText="Email">
 90            <ItemTemplate>
 91                <asp:TextBox ID="Email" Text='<%#Eval("Email") %>' runat="server" Width="140"></asp:TextBox>
 92            </ItemTemplate>
 93            <ItemStyle Width="140px" />
 94            <HeaderStyle HorizontalAlign="Center" />
 95        </asp:TemplateField>
 96        <asp:TemplateField HeaderText="Zip">
 97            <ItemTemplate>
 98                <asp:TextBox ID="Zip" Text='<%#Eval("Zip") %>' runat="server" Width="50"></asp:TextBox>
 99            </ItemTemplate>
            <HeaderStyle HorizontalAlign="Center" />
        </asp:TemplateField>
       </Columns>
      </asp:GridView>
      <asp:Button ID="btnValidate" runat="server" Text="ValidateGrid" />
        <input id="btnGetClientID" type="button" value="GetClientID" onclick="GetClientID();" />
        <script type="text/javascript">
        function GetClientID()
        {
          var btn = document.getElementById("<%=btnValidate.ClientID %>");
          alert(btn.value);
        }
        </script>
    </form>
</body>
</html>

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