使用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()
3{
4  var btn = document.getElementById("<%=btnValidate.ClientID %>");
5  alert(btn.value);
6}

7</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");
10
11    for (int i = 0; i < 4; i++)
12    {
13        dtRow = dt.NewRow();
14        dt.Rows.Add(dtRow);
15    }

16    JavascriptGrid.DataSource = dt;
17    JavascriptGrid.DataBind();
18}
      在为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{
 8    ClientScriptManager cs = Page.ClientScript;
 9
10    foreach (GridViewRow grdrow in JavascriptGrid.Rows)
11    {
12        //找出GridView里的每一个服务端空间
13        CheckBox txtgrdValidate = (CheckBox)grdrow.FindControl("ChkValidate");
14        TextBox txtgrdFirstName = (TextBox)grdrow.FindControl("FirstName");
15        TextBox txtgrdLastName = (TextBox)grdrow.FindControl("LastName");
16        TextBox txtgrdEmail = (TextBox)grdrow.FindControl("Email");
17        TextBox txtgrdZip = (TextBox)grdrow.FindControl("Zip");
18        //将相应的服务端控件的ClientID注册到客户端JavaScript数组
19        cs.RegisterArrayDeclaration("grd_Cb", String.Concat("'", txtgrdValidate.ClientID, "'"));
20        cs.RegisterArrayDeclaration("grdFirstName_Txt", String.Concat("'", txtgrdFirstName.ClientID, "'"));
21        cs.RegisterArrayDeclaration("grdLastName_Txt", String.Concat("'", txtgrdLastName.ClientID, "'"));
22        cs.RegisterArrayDeclaration("grdEmail_Txt", String.Concat("'", txtgrdEmail.ClientID, "'"));
23        cs.RegisterArrayDeclaration("grdZip_Txt", String.Concat("'", txtgrdZip.ClientID, "'"));
24    }

25}
      通过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()
 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        {
10            Checkbol=1;
11            bool=1;
12        }

13    }
 
14
15   if(bool==0)
16   {
17      return false;
18   }

19
20     if (Checkbol==1)
21     {
22       for(i=0;i<grd_Cb.length;i++)
23        {
24            var Obj1 = document.getElementById(grd_Cb[i]);
25            
26            if(Obj1.checked ==true)
27            {  
28                var objFirstName=document.getElementById(grdFirstName_Txt[i]);
29                if(objFirstName.value=="")
30                {
31                    alert(""+ [parseInt(i)+1]+ "行的First Name不能为空!");
32                    objFirstName.focus();
33                    return false;
34                }

35                
36                var objLastName=document.getElementById(grdLastName_Txt[i]);
37                if(objLastName.value=="")
38                {
39                    alert(""+ [parseInt(i)+1]+ "行的Last name不能为空!");
40                    objLastName.focus();
41                    return false;
42                }

43                
44                var objEmail=document.getElementById(grdEmail_Txt[i]);
45                if(objEmail.value=="")
46                {
47                    alert(""+ [parseInt(i)+1]+ "行的E-mail不能为空!");
48                    objEmail.focus();
49                    return false;
50                }

51             }

52         }

53       }

54   return true;
55}

56</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;
10
11public partial class _Default : System.Web.UI.Page 
12{
13    protected void Page_Load(object sender, EventArgs e)
14    {
15        btnValidate.Attributes.Add("onclick""return validate()");
16        DataTable dt = new DataTable();
17        DataRow dtRow;
18        dt.Columns.Add("FirstName");
19        dt.Columns.Add("LastName");
20        dt.Columns.Add("Email");
21        dt.Columns.Add("Zip");
22
23        for (int i = 0; i < 4; i++)
24        {
25            dtRow = dt.NewRow();
26            dt.Rows.Add(dtRow);
27        }

28        JavascriptGrid.DataSource = dt;
29        JavascriptGrid.DataBind();
30    }

31
32    /// <summary>
33    /// 在呈现该页前激发
34    /// </summary>
35    /// <param name="sender"></param>
36    /// <param name="e"></param>

37    protected void JavascriptGrid_PreRender(object sender, EventArgs e)
38    {
39        ClientScriptManager cs = Page.ClientScript;
40
41        foreach (GridViewRow grdrow in JavascriptGrid.Rows)
42        {
43            //找出GridView里的每一个服务端空间
44            CheckBox txtgrdValidate = (CheckBox)grdrow.FindControl("ChkValidate");
45            TextBox txtgrdFirstName = (TextBox)grdrow.FindControl("FirstName");
46            TextBox txtgrdLastName = (TextBox)grdrow.FindControl("LastName");
47            TextBox txtgrdEmail = (TextBox)grdrow.FindControl("Email");
48            TextBox txtgrdZip = (TextBox)grdrow.FindControl("Zip");
49            //将相应的服务端控件的ClientID注册到客户端JavaScript数组
50            cs.RegisterArrayDeclaration("grd_Cb", String.Concat("'", txtgrdValidate.ClientID, "'"));
51            cs.RegisterArrayDeclaration("grdFirstName_Txt", String.Concat("'", txtgrdFirstName.ClientID, "'"));
52            cs.RegisterArrayDeclaration("grdLastName_Txt", String.Concat("'", txtgrdLastName.ClientID, "'"));
53            cs.RegisterArrayDeclaration("grdEmail_Txt", String.Concat("'", txtgrdEmail.ClientID, "'"));
54            cs.RegisterArrayDeclaration("grdZip_Txt", String.Concat("'", txtgrdZip.ClientID, "'"));
55        }

56    }

57}
  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>
100            <HeaderStyle HorizontalAlign="Center" />
101        </asp:TemplateField>
102       </Columns>
103      </asp:GridView>
104      <asp:Button ID="btnValidate" runat="server" Text="ValidateGrid" />
105        <input id="btnGetClientID" type="button" value="GetClientID" onclick="GetClientID();" />
106        <script type="text/javascript">
107        function GetClientID()
108        {
109          var btn = document.getElementById("<%=btnValidate.ClientID %>");
110          alert(btn.value);
111        }

112        
</script>
113    </form>
114</body>
115</html>

注:转载请注明出处:http://beniao.cnblogs.com/  或着  http://www.cnblogs.com/
posted on 2008-07-05 06:50  Bēniaǒ  阅读(4361)  评论(18编辑  收藏  举报