Wednesday, December 23, 2015

Dynamically add remove rows in table in ASP.NET using javascript

In this article I am going to explain how to add and delete row of Table in ASP. net c# using JavaScript and use their value in c#.

 Add and delete row in table JavaScript
<script type="text/javascript">
        function AddNewRecord() {
            var grd = document.getElementById("gvEmp");
            var lengthgrd = grd.rows.length - 1;
        
              //validation check
            if (lengthgrd >= 1) {
 
                var Name = grd.rows[lengthgrd].cells[0].getElementsByTagName('input')[0].value;
                if (Name.trim() == "") {
                    alert("Please Fill Name.");
                    return false;
                }
              
                var Gender = grd.rows[lengthgrd].cells[2].getElementsByTagName('select')[0].value;
                if (Gender.trim() == "Select Gender") {
                    alert("Please Select Gender.");
                    return false;
                }
            }
            var tbod = grd.rows[0].parentNode;
            var newRow = grd.rows[grd.rows.length - 1].cloneNode(true);
            tbod.appendChild(newRow);
            addvalue();//new row add with empty value
        }
 
 
        function addvalue() {
            var grd = document.getElementById("gvEmp");
            var no = grd.rows.length - 1
            grd.rows[no].cells[0].getElementsByTagName('input')[0].value = "";
            grd.rows[no].cells[1].getElementsByTagName('input')[0].value = "";
        }
 
 
        //delete row
        function deleteRow(row) {
            var i = row.parentNode.parentNode.rowIndex;
            var x = document.getElementById("gvEmp");
            var xx = x.rows.length - 1;
 
            if (xx != 1) {
                document.getElementById("gvEmp").deleteRow(i);
            }
            if (xx == 1) {
                x.rows[1].cells[0].getElementsByTagName('input')[0].value = "";
                x.rows[1].cells[1].getElementsByTagName('input')[0].value = "";
                x.rows[1].cells[2].getElementsByTagName('select')[0].value = "Select Gender";
            }
        }
    </script> 

aspx code
<%@ 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">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
        function AddNewRecord() {
            var grd = document.getElementById("gvEmp");
            var lengthgrd = grd.rows.length - 1;
        
              //validation check
            if (lengthgrd >= 1) {
 
                var Name = grd.rows[lengthgrd].cells[0].getElementsByTagName('input')[0].value;
                if (Name.trim() == "") {
                    alert("Please Fill Name.");
                    return false;
                }
              
                var Gender = grd.rows[lengthgrd].cells[2].getElementsByTagName('select')[0].value;
                if (Gender.trim() == "Select Gender") {
                    alert("Please Select Gender.");
                    return false;
                }
            }
            var tbod = grd.rows[0].parentNode;
            var newRow = grd.rows[grd.rows.length - 1].cloneNode(true);
            tbod.appendChild(newRow);
            addvalue();//new row add with empty value
        }
 
 
        function addvalue() {
            var grd = document.getElementById("gvEmp");
            var no = grd.rows.length - 1
            grd.rows[no].cells[0].getElementsByTagName('input')[0].value = "";
            grd.rows[no].cells[1].getElementsByTagName('input')[0].value = "";
        }
 
 
        //delete row
        function deleteRow(row) {
            var i = row.parentNode.parentNode.rowIndex;
            var x = document.getElementById("gvEmp");
            var xx = x.rows.length - 1;
 
            if (xx != 1) {
                document.getElementById("gvEmp").deleteRow(i);
            }
            if (xx == 1) {
                x.rows[1].cells[0].getElementsByTagName('input')[0].value = "";
                x.rows[1].cells[1].getElementsByTagName('input')[0].value = "";
                x.rows[1].cells[2].getElementsByTagName('select')[0].value = "Select Gender";
            }
        }
 
 
        //assign value into textbox
 
        function AssignGender(row) {
 
            var rowvalue = $(row).closest('tr').index();
            var grd = document.getElementById("gvEmp");
            var Gender = grd.rows[rowvalue].cells[2].getElementsByTagName('select')[0].value;
            document.getElementById("txtGender").value = Gender;
           
        }
 
    </script>
  
</head>
<body>
    <form id="form1" runat="server">
  <fieldset style="border:1px solid #cccccc; position:relative;">
<legend style="font-size:14px; font-weight:bold; color:#395b77; margin-left:4px; padding:0px 5px;">Employee Detail</legend>
 
 
<input type="button" id="Add Employee" value="Add More Row" onclick="AddNewRecord()" class="btnaddmor" />
 
<table id="gvEmp" border="1" runat="server">
 
<tr>
<td class="hed">Name</td>
<td class="hed">Age</td>
<td class="hed">Gender</td>
<td class="hed">Delete</td>
</tr>
 
<tr>
<td>
<asp:TextBox ID="txtName" runat="server" MaxLength="50" onkeypress="return ValidateText(event)" onpaste="return false" >
</asp:TextBox>
</td>
 
<td>
<asp:TextBox ID="txtAge" runat="server" MaxLength="2" ></asp:TextBox>
</td>
 
 
 
<td align="center">
<asp:DropDownList ID="ddlGender" runat="server" onchange="AssignGender(this)">
<asp:ListItem>Select Gender</asp:ListItem>
<asp:ListItem>Male</asp:ListItem>
<asp:ListItem>Female</asp:ListItem>
</asp:DropDownList>
<asp:TextBox ID="txtGender" runat="server" style="display:none;"></asp:TextBox>
</td>
 
 
<td align="center"><input type="button" id="delbutton" value="Delete" onclick="deleteRow(this)" class="btndel" /></td>
</tr>
</table>
 
<asp:Button ID="btnGettableValue" Text="Get Value" runat="server"
          onclick="btnGettableValue_Click" />
      <asp:GridView ID="GridView1" runat="server">
      </asp:GridView>
</fieldset>
    </form>
</body>
</html>

cs code


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
 
    }
    protected void btnGettableValue_Click(object sender, EventArgs e)
    {
 
        // get all aspx table value in c#
        DataTable dt = new DataTable();
        dt.Columns.Add("Name");
        dt.Columns.Add("Age");
        dt.Columns.Add("Gender");
        int GridRow = gvEmp.Rows.Count;
        if (GridRow > 0)
        {
            TextBox Name = (TextBox)gvEmp.Rows[0].FindControl("txtName");
            TextBox Age = (TextBox)gvEmp.Rows[0].FindControl("txtAge");
            TextBox Gender = (TextBox)gvEmp.Rows[0].FindControl("txtGender");
            DropDownList dGender = (DropDownList)gvEmp.Rows[0].FindControl("ddlGender");
 
 
            string[] SplitName = Name.Text.Split(',');
            string[] SplitAge = Age.Text.Split(',');
            string[] SplitGender = Gender.Text.Split(',');
 
            for (int iCount = 0; iCount < SplitName.Length; iCount++)
            {
                if (!string.IsNullOrEmpty(SplitName[iCount].Trim()))
                {
 
                    int updatevalue = iCount;
                    ++updatevalue;
                    DataRow rr = dt.NewRow();
                    rr["Name"] = SplitName[iCount];
                    rr["Age"] = SplitAge[iCount];
                    rr["Gender"] = SplitGender[iCount];
                    dt.Rows.Add(rr);
                }
            }
 
 
            //empty table rows
            Name.Text = "";
            Age.Text = "";
            Gender.Text = "";
            dGender.SelectedIndex = 0;
        }
 
 
        // show table value in gridview
        GridView1.DataSource = dt;
        GridView1.DataBind();
 
    }
}
Posted by at No comments:
Labels: , , ,

Tuesday, December 22, 2015

Client Side Validation using JavaScript in ASP.NET C#

In this article, I am going to explain how to validate value in JavaScript in ASP.NET C#.

 Check Value is integer or not (like Age)
    <script type="text/javascript">
        function isNumber(evt) {
            evt = (evt) ? evt : window.event;
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if (charCode > 31 && (charCode < 48 || charCode > 57)) {
                return false;
            }
            return true;
        }
    </script>

aspx textbox

<asp:TextBox ID="txtAge" runat="server"  onkeypress="return isNumber(event)" onpaste="return false"></asp:TextBox>

onkeypress="return isNumber(event)"  allow you only enter the integer value only.

Check Value is character or not

If you want textbox only accepts the character you can use the given below function

<script type="text/javascript">
        function checkChar(e) {
            var key;
            if (e.keyCode) key = e.keyCode;
            else if (e.which) key = e.which;
            if (/[^A-Za-z0-9]/.test(String.fromCharCode(key))) {
                return false;
            }
 
        }
    </script>

aspx textbox

<asp:TextBox ID="txtchar" runat="server"   onkeypress = "return checkChar(event)"></asp:TextBox>
 
Check Value is String or not (Like Name)

If you want textbox only accepts the strings you can use the given below function

<script type="text/javascript">
        function ValidateText(evt) {
            var keyCode = (evt.which) ? evt.which : evt.keyCode
            if ((keyCode < 65 || keyCode > 90) && (keyCode < 97 || keyCode >= 123) && keyCode != 32)
                return false;
            return true;
        }
    </script>

aspx textbox

<asp:TextBox ID="txtName" runat="server"  onkeypress="return ValidateText(event)" onpaste="return false" >
</asp:TextBox>

Check validate PAN Number

<script type="text/javascript">
        function fnValidatePAN(Obj) {
            if (Obj == null) Obj = window.event.srcElement;
            if (Obj.value != "") {
                ObjVal = Obj.value;
                var panPat = /^([a-zA-Z]{5})(\d{4})([a-zA-Z]{1})$/;
                var code = /([C,P,H,F,A,T,B,L,J,G,M])/;
                var code_chk = ObjVal.substring(3, 4);
                if (ObjVal.search(panPat) == -1) {
                    alert("Invalid Pan No");
                    Obj.focus();
                    return false;
                }
 
            }
        }
    </script>

aspx textbox

<asp:TextBox ID="txtPanNumber" runat="server" MaxLength="10"  onblur="fnValidatePAN(this);" style="text-transform:uppercase"  onpaste="return false" ></asp:TextBox>

Check validate Email ID

function checkEmail(Obj) {
            if (Obj.value != "") {
                if (/[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test(Obj.value)) {
 
                }
                else {
 
                    alert("Enter a valid email address!")
                    Obj.focus();
                    return (false)
                }
            }
        }

aspx textbox

<asp:TextBox ID="txtEmailID" runat="server" MaxLength="50" onpaste="return false"  onblur="checkEmail(this)"></asp:TextBox>

Check at least one radio button list is checked

<script type="text/javascript">
        function EmptyData() {
            var checkData = "No";
            var Listpaytype = document.getElementById("rbtnListpaytype");
            var inputs = Listpaytype.getElementsByTagName('input');
            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].checked == true) {
                    checkData = "Yes";
                    PaymentCheckValue = inputs[i].value;
                    break;
                }
            }
            if (checkData == "No") {
                alert("Please Select At least a Gender");
                return false;
            }  
        }
</script>


aspx RadioButtonList ( when you click on button it checks at least one radio button list is cheeked or not).

<asp:RadioButtonList ID="rbtnListGendertype" runat="server" CssClass="rdolbl" RepeatDirection="Horizontal">
        <asp:ListItem>Male</asp:ListItem>
        <asp:ListItem>Female</asp:ListItem>
        <asp:ListItem>Other</asp:ListItem>       
</asp:RadioButtonList></td>
<asp:Button ID="btnCheck" runat="server" Text="Check"  OnClientClick="return EmptyData();"/>
 
Check Valid Amount or not
The given below function checks you enter the valid amount or not, it also not accepts the double dot.
<script type="text/javascript">
        function isNumberKey(evt, obj) {
 
            var charCode = (evt.which) ? evt.which : event.keyCode
            var value = obj.value;
            var dotcontains = value.indexOf(".") != -1;
            if (dotcontains)
                if (charCode == 46) return false;
            if (charCode == 46) return true;
            if (charCode > 31 && (charCode < 48 || charCode > 57))
                return false;
            return true;
        }
</script>

aspx textbox


<asp:TextBox ID="txtAmount" runat="server" onkeypress="return isNumberKey(event,this)" onpaste="return false"></asp:TextBox>
Posted by at No comments:
Labels: , , , ,
Subscribe to: Posts (Atom)