Client Side Validation of GridView control with javascript
2008-05-26 12:28
363 查看
Client Side Validation Of GridView with JavaScript.
Many people are asking me how to validate GridView with JavaScript. How to get control client Id on client side. This article and attached code snippet shows you to create a validate method in JavaScript and call it from your ASP.NET page's code behind to validate the controls.
In my sample example, I have taken on GridView with checkbox and TextBox in the gridview. Just copy this code in your aspx page. As you can see in the below code, I have a validate method. Thid methods finds each control in a GridView row using getElementById as an object and then checks if it is checked or not and so on.
<%@ 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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript">
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)
{
alert(" Please enter atleast one Passenger");
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("Line No : "+ [parseInt(i)+1]+ " First name can not be blank");
objFirstName.focus();
return false;
}
var objLastName=document.getElementById(grdLastName_Txt[i]);
if(objLastName.value=="")
{
alert("Line No : "+ [parseInt(i)+1]+ " Last name can not be blank");
objLastName.focus();
return false;
}
}
}
}
return true;
}
</script>
<title>JavaScript Validation on Grid</title>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView runat="server" ID="JavascriptGrid" AutoGenerateColumns="False" Width="100%" OnPreRender="JavascriptGrid_PreRender">
<Columns>
<asp:TemplateField HeaderText="Validate">
<ItemTemplate>
<asp:CheckBox CssClass="textbox" runat="server" ID="ChkValidate" />
</ItemTemplate>
<ItemStyle Width="10px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="First Name">
<ItemTemplate>
<asp:TextBox ID="FirstName" Text='<%#Eval("FirstName") %>' runat="server" Width="140"></asp:TextBox>
</ItemTemplate>
<ItemStyle Width="150px" />
<HeaderStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Last Name">
<ItemTemplate>
<asp:TextBox ID="LastName" Text='<%#Eval("LastName") %>' runat="server" Width="140"></asp:TextBox>
</ItemTemplate>
<ItemStyle Width="140px" />
<HeaderStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Email">
<ItemTemplate>
<asp:TextBox ID="Email" Text='<%#Eval("Email") %>' runat="server" Width="140"></asp:TextBox>
</ItemTemplate>
<ItemStyle Width="140px" />
<HeaderStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Zip">
<ItemTemplate>
<asp:TextBox ID="Zip" Text='<%#Eval("Zip") %>' runat="server" Width="50"></asp:TextBox>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" />
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Button ID="btnValidate" runat="server" Text="ValidateGrid" />
</form>
</body>
</html>
And following code in .cs file of the same page. As you can see on this page, on page's Load event handler, I add an attribute to the button's click event hander onclick and call JavaScript's validate method whenever a button is clicked.
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Collections;
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();
}
protected void JavascriptGrid_PreRender(object sender, EventArgs e)
{
ClientScriptManager cs = Page.ClientScript;
foreach (GridViewRow grdrow in JavascriptGrid.Rows)
{
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");
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, "'"));
}
}
}
Many people are asking me how to validate GridView with JavaScript. How to get control client Id on client side. This article and attached code snippet shows you to create a validate method in JavaScript and call it from your ASP.NET page's code behind to validate the controls.
In my sample example, I have taken on GridView with checkbox and TextBox in the gridview. Just copy this code in your aspx page. As you can see in the below code, I have a validate method. Thid methods finds each control in a GridView row using getElementById as an object and then checks if it is checked or not and so on.
<%@ 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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript">
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)
{
alert(" Please enter atleast one Passenger");
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("Line No : "+ [parseInt(i)+1]+ " First name can not be blank");
objFirstName.focus();
return false;
}
var objLastName=document.getElementById(grdLastName_Txt[i]);
if(objLastName.value=="")
{
alert("Line No : "+ [parseInt(i)+1]+ " Last name can not be blank");
objLastName.focus();
return false;
}
}
}
}
return true;
}
</script>
<title>JavaScript Validation on Grid</title>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView runat="server" ID="JavascriptGrid" AutoGenerateColumns="False" Width="100%" OnPreRender="JavascriptGrid_PreRender">
<Columns>
<asp:TemplateField HeaderText="Validate">
<ItemTemplate>
<asp:CheckBox CssClass="textbox" runat="server" ID="ChkValidate" />
</ItemTemplate>
<ItemStyle Width="10px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="First Name">
<ItemTemplate>
<asp:TextBox ID="FirstName" Text='<%#Eval("FirstName") %>' runat="server" Width="140"></asp:TextBox>
</ItemTemplate>
<ItemStyle Width="150px" />
<HeaderStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Last Name">
<ItemTemplate>
<asp:TextBox ID="LastName" Text='<%#Eval("LastName") %>' runat="server" Width="140"></asp:TextBox>
</ItemTemplate>
<ItemStyle Width="140px" />
<HeaderStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Email">
<ItemTemplate>
<asp:TextBox ID="Email" Text='<%#Eval("Email") %>' runat="server" Width="140"></asp:TextBox>
</ItemTemplate>
<ItemStyle Width="140px" />
<HeaderStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Zip">
<ItemTemplate>
<asp:TextBox ID="Zip" Text='<%#Eval("Zip") %>' runat="server" Width="50"></asp:TextBox>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" />
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Button ID="btnValidate" runat="server" Text="ValidateGrid" />
</form>
</body>
</html>
And following code in .cs file of the same page. As you can see on this page, on page's Load event handler, I add an attribute to the button's click event hander onclick and call JavaScript's validate method whenever a button is clicked.
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Collections;
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();
}
protected void JavascriptGrid_PreRender(object sender, EventArgs e)
{
ClientScriptManager cs = Page.ClientScript;
foreach (GridViewRow grdrow in JavascriptGrid.Rows)
{
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");
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, "'"));
}
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Client Side Validation with JavaScript in ASP.NET
- Client Side Evaluation of Gridview
- Control ‘dg’ of type 'GridView' must be placed inside a form tag with runat=server
- 【原】用使用JavaScript展开/折叠TreeView中所有节点(Expand and Collapse All Nodes of asp.net Treeview on the client with javascript)
- Is it possible to implement a Firebug-like “inspect element” DOM element highlighter with client-side JavaScript?
- 使用JavaScript展开/折叠TreeView中所有节点(Expand and Collapse All Nodes of asp.net Treeview on the client with javascript)
- Client-Side JavaScript Timeline
- Client-Side Javascript Memory Management
- Creating an Extender Control to Associate a Client Behavior with a Web Server Control
- Creating an Extender Control to Associate a Client Behavior with a Web Server Control
- How to access gridview cell values on client side
- Struggling trying to get cookie out of response with HttpClient in .net 4.5
- 困兽之斗！使用JavaScript执行客户端的exe文件(excute the .exe file on client-side machine by JavaScript)
- JavaScript Interactive with ActiveX Control
- Control 'ctl00_Menu1' of type 'Menu' must be placed inside a form tag with runat=server.
- 申请SSL证书验证域名所有权限的其他方法Alternative Methods of Domain Control Validation (DCV)
- Regular Expressions for client-side javascript(正则表达式)
- File Handling at Client Side Using Javascript
- Read and Display Server-Side XML with JavaScript
- Succinct trait of comparing jQuery with JavaScript - DOM