【转】使用JavaScript在客户端验证GridView控件

本文转自：http://www.cnblogs.com/beniao/archive/2008/07/05/1236104.html

或许许多人都会问，怎样使用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;

using System.Collections;

using System.Configuration;

using System.Data;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

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, "'"));

}

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

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

<title>Untitled Page</title>

function validate()

{

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

{

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

if(obj.checked ==true)

{

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>

</head>

<body>

<asp:GridView runat="server" ID="JavascriptGrid" AutoGenerateColumns="False" Width="100%" OnPreRender="JavascriptGrid_PreRender">

<asp:TemplateField HeaderText="Validate">

<asp:CheckBox runat="server" ID="ChkValidate" />

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="First Name">

<asp:TextBox ID="FirstName" Text='<%#Eval("FirstName") %>' runat="server" Width="140"></asp:TextBox>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Last Name">

<asp:TextBox ID="LastName" Text='<%#Eval("LastName") %>' runat="server" Width="140"></asp:TextBox>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Email">

<asp:TextBox ID="Email" Text='<%#Eval("Email") %>' runat="server" Width="140"></asp:TextBox>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Zip">

<asp:TextBox ID="Zip" Text='<%#Eval("Zip") %>' runat="server" Width="50"></asp:TextBox>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

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

function GetClientID()

{

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

alert(btn.value);

}

</script>

</form>

</body>

</html>

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

posted on 2008-07-05 12:58 王丹小筑阅读(781) 评论(0) 收藏举报

刷新页面返回顶部

【转】使用JavaScript在客户端验证GridView控件

导航

公告