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

zoukankan html css js c++ java

使用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
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/

查看全文

相关阅读:
记一次centos7.2下用crontab执行定时任务的过程（初级）
海外手机号码正则匹配
 装了wamp之后，80端口被占用解决办法
 newtonsoft动态修改JObject
.net正则提取手机号码，并替换带有手机号码的a标签
 .vs目录有什么用？
centos7安装nginx-1.13.6 新手入门，图文解析
 centos7安装kafka_2.11-1.0.0 新手入门
 centos7安装apache 新手入门图文教程
 面向对象——案例练习（4）判断点是否在圆的内部

原文地址：https://www.cnblogs.com/beniao/p/1236104.html