IntroductionI am going to explain the GridView Control Client Side (Javascript) Validation instead of server side validation controls.I have a asp.net gridview which have three textboxes and two dropdownlist fields.Following screen shot showing that. I am checking product code exists or not in database on onblur event. protected void grdBookinStock_RowDataBound(object sender, GridViewRowEventArgs e)
{
TextBox txtProductCode = (TextBox)e.Row.FindControl("txtProductCode");
txtProductCode.Attributes.Add("Onblur", "IsProductCodeExist(this.value);");
}Now Javascript method IsProductCodeExistfunction IsProductCodeExist(txtProductCode) {
if (txtProductCode != "") {
var IsExistsValue = (AjaxFunctions.IsProductCodeExists(txtProductCode)).value;
if (IsExistsValue == false)
alert('Product Code does not exists');
}
}
Html code for gridview:<asp:GridView ID="grdBookinStock" BackColor="LightGoldenrodYellow" BorderColor="Tan"
BorderWidth="1px" CellPadding="2" ForeColor="Black" AutoGenerateColumns="False"
ShowFooter="True" runat="server" OnRowDataBound="grdBookinStock_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="Product Code">
<ItemTemplate>
<asp:TextBox ID="txtProductCode" runat="server" MaxLength="6"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Owner">
<ItemTemplate>
<asp:DropDownList ID="ddlOwner" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlOwner_SelectedIndexChanged">
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Warehouse">
<ItemTemplate>
<asp:DropDownList ID="ddlWarehouse" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlWarehouse_SelectedIndexChanged">
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Bin">
<ItemTemplate>
<asp:TextBox ID="txtBin" runat="server" MaxLength="12" Enabled="False"
autocomplete="off" AutoCompleteType="Disabled"></asp:TextBox>
<cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" ServiceMethod="GetCompletionList"
UseContextKey="True" MinimumPrefixLength="1" CompletionInterval="500" EnableCaching="false"
CompletionSetCount="12" TargetControlID="txtBin">
</cc1:AutoCompleteExtender>
<cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender2" FilterType="Custom" ValidChars="1234567890-"
TargetControlID="txtBin" runat="server">
</cc1:FilteredTextBoxExtender>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Quantity">
<ItemTemplate>
<asp:TextBox ID="txtQuantity" runat="server" MaxLength="8" Enabled="False"></asp:TextBox>
<cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" FilterType="Numbers" TargetControlID="txtQuantity"
runat="server">
</cc1:FilteredTextBoxExtender>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="Tan" />
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<AlternatingRowStyle BackColor="PaleGoldenrod" />
</asp:GridView>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnSave" runat="server" CssClass="control"
OnClick="btnSave_Click" OnClientClick="return ValidateData();" Text="Save" />
<asp:Button ID="btnCancel" runat="server" CssClass="control"
OnClick="btnCancel_Click" Text="Refresh" />
</td>
</tr>
</Table>Now I am validate data on save button. Client side Javascript method ValidateData()function ValidateData() {
var grid = document.getElementById("<%= grdBookinStock.ClientID %>");
var cellProductCode;
var cellOwner;
var cellWarehouse;
var cellBin;
var cellQuantity;
var cellProductCodeValue;
var cellOwnerValue;
var cellWarehouseValue;
var cellBinValue;
var cellQuantityValue;
if (grid.rows.length > 0) {
//loop starts from 1. rows[0] points to the header.
for (i = 1; i < grid.rows.length; i++) {
cellProductCode = grid.rows[i].cells[0];
cellOwner = grid.rows[i].cells[1];
cellWarehouse = grid.rows[i].cells[2];
cellBin = grid.rows[i].cells[3];
cellQuantity = grid.rows[i].cells[4];
for (j = 0; j < cellProductCode.childNodes.length; j++) {
//if childNode type is CheckBox
if (cellProductCode.childNodes[j].type == "text") {
cellProductCodeValue = cellProductCode.childNodes[j].value;
//alert(cellProductCodeValue);
}
}
for (j = 0; j < cellOwner.childNodes.length; j++) {
//if childNode type is CheckBox
if (cellOwner.childNodes[j].tagName == "SELECT") {
cellOwnerValue = cellOwner.childNodes[j].value;
// alert(cellOwnerValue);
}
}
for (j = 0; j < cellWarehouse.childNodes.length; j++) {
if (cellWarehouse.childNodes[j].tagName == "SELECT") {
cellWarehouseValue = cellWarehouse.childNodes[j].value;
//alert(cellWarehouseValue);
}
}
for (j = 0; j < cellBin.childNodes.length; j++) {
if (cellBin.childNodes[j].type == "text") {
cellBinValue = cellBin.childNodes[j].value;
//alert(cellBinValue);
}
}
for (j = 0; j < cellQuantity.childNodes.length; j++) {
if (cellQuantity.childNodes[j].type == "text") {
cellQuantityValue = cellQuantity.childNodes[j].value;
// alert(cellQuantityValue);
}
}
if (cellProductCodeValue != "" || cellOwnerValue != "0" || cellWarehouseValue != "" || cellBinValue != "" || cellQuantityValue != "") {
if (cellProductCodeValue == "")
{ alert('Enter product code');return false; }
if (cellOwnerValue == "0") {
alert('Select owner.'); return false;
}
if (cellWarehouseValue == "0") {
alert('Select warehouse.'); return false;
}
if (cellBinValue == "") {
alert('Enter bin.'); return false;
}
if (cellQuantityValue == "") {
alert('Enter quantity.'); return false;
}
}
function SetWarehouseIdtoHdnField() {
var hdn =document.getElementById('ctl00_ContentPlaceHolder1_hdnWarehouseId')
AjaxFunctions.SetValueWarehouse(hdn.value);
}
}
}
//return true;
if (confirm("Are you sure, you want to save the data?")) {
return true;
}
else {
return false;
}
} hoo, the implementation is finished, now i'm going to test, the test result will be like. ConclusionThat's all, i hope this is help to you all and save the time to perform the server validation. |