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

2009-11-24 作者：beniao 来源：beniao的BLOG

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

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

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

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

function 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)：

protected 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

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为例,在客户端生成的是如下代码片段：

<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

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

/// <summary>
2

/// 在呈现该页前激发
3

/// </summary>
4

/// <param name="sender"></param>
5

/// <param name="e"></param>
6

protected void JavascriptGrid_PreRender(object sender, EventArgs e)
7

{
8

ClientScriptManager cs = Page.ClientScript;
9

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代码(格式我作了调整) ：

<!--
3

var grd_Cb = new Array('JavascriptGrid_ctl02_ChkValidate',
4

'JavascriptGrid_ctl03_ChkValidate',
5

'JavascriptGrid_ctl04_ChkValidate',
6

'JavascriptGrid_ctl05_ChkValidate');
7

var grdFirstName_Txt = new Array('JavascriptGrid_ctl02_FirstName',
8

'JavascriptGrid_ctl03_FirstName',
9

'JavascriptGrid_ctl04_FirstName',
10

'JavascriptGrid_ctl05_FirstName');
11

var grdLastName_Txt = new Array('JavascriptGrid_ctl02_LastName',
12

'JavascriptGrid_ctl03_LastName',
13

'JavascriptGrid_ctl04_LastName',
14

'JavascriptGrid_ctl05_LastName');
15

var grdEmail_Txt = new Array('JavascriptGrid_ctl02_Email',
16

'JavascriptGrid_ctl03_Email',
17

'JavascriptGrid_ctl04_Email',
18

'JavascriptGrid_ctl05_Email');
19

var 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是否选中就可以决定那一行数据需要进行验证了。

function validate()
3

{
4

for(j=0;j<grd_Cb.length;j++)
5

{
6

var obj = document.getElementById(grd_Cb[j]);
7

if(obj.checked ==true)
9

{
10

Checkbol=1;
11

bool=1;
12

}
13

}
14

if(bool==0)
16

{
17

return false;
18

}
19

if (Checkbol==1)
21

{
22

for(i=0;i<grd_Cb.length;i++)
23

{
24

var Obj1 = document.getElementById(grd_Cb[i]);
25

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

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

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，那我们来作个测试，看看之前所做的是否?????

成功了! 详细的代码定义如下：

using System;
2

using System.Data;
3

using System.Configuration;
4

using System.Web;
5

using System.Web.Security;
6

using System.Web.UI;
7

using System.Web.UI.WebControls;
8

using System.Web.UI.WebControls.WebParts;
9

using System.Web.UI.HtmlControls;
10

public 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

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

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

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

}

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4

<html xmlns="http://www.w3.org/1999/xhtml" >
6

<head runat="server">
7

<title>无标题页</title>
8

function validate()
10

{
11

for(j=0;j<grd_Cb.length;j++)
12

{
13

var obj = document.getElementById(grd_Cb[j]);
14

if(obj.checked ==true)
16

{
17

Checkbol=1;
18

bool=1;
19

}
20

}
21

if(bool==0)
23

{
24

return false;
25

}
26

if (Checkbol==1)
28

{
29

for(i=0;i<grd_Cb.length;i++)
30

{
31

var Obj1 = document.getElementById(grd_Cb[i]);
32

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

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

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

function GetClientID()
108

{
109

var btn = document.getElementById("<%=btnValidate.ClientID %>");
110

alert(btn.value);
111

}
112

</script>
113

</form>
114

</body>
115

</html>

| 联系我们 | 招聘信息 | 火龙果软件 |

火龙果软件/UML软件工程组织致力于提高您的软件工程实践能力，我们不断地吸取业界的宝贵经验，向您提供经过数百家企业验证的有效的工程技术实践经验，同时关注最新的理论进展，帮助您“领跑您所在行业的软件世界”。