Database
I have made use of the following table Customers with the schema as follows.
I have already inserted few records in the table.
You can download database SQL from here.
jQuery
I have change this line
$("[id*=GridView1] tbody").append(row);
To
$("[id*=GridView1] tbody tr:first").after(row);
Please refer the complete code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"> </script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/json2/20130526/json2.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=btnAddRow]").click(function () {
var id = $("[id*=txtId]").val();
var name = $("[id*=txtName]").val();
var country = $("[id*=txtCountry]").val();
if (id != "" && name != "" && country != "") {
var row = $("[id*=GridView1] tr:last").clone();
$("td:nth-child(1)", row).html(id);
$("td:nth-child(2)", row).html(name);
$("td:nth-child(3)", row).html(country);
$("[id*=GridView1] tbody tr:first").after(row);
}
$("[id*=txtId]").val('');
$("[id*=txtName]").val('');
$("[id*=txtCountry]").val('');
return false;
});
$("[id*=btnSave]").click(function () {
$("[id*=GridView1] tr:has(td)").each(function () {
var customer = {};
customer.customerId = $(this).find("td:nth-child(1)").html();
customer.name = $(this).find("td:nth-child(2)").html();
customer.country = $(this).find("td:nth-child(3)").html();
$.ajax({
type: "POST",
url: "GridView_AddRow_SaveAll.aspx/SaveGridViewRowData",
data: JSON.stringify(customer),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
}
});
});
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
Id
</td>
<td>
<asp:TextBox ID="txtId" runat="server" />
</td>
</tr>
<tr>
<td>
Name
</td>
<td>
<asp:TextBox ID="txtName" runat="server" />
</td>
</tr>
<tr>
<td>
Country
</td>
<td>
<asp:TextBox ID="txtCountry" runat="server" />
</td>
</tr>
</table>
<br />
<asp:Button ID="btnAddRow" Text="Add Row" runat="server" />
<br />
<br />
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="CustomerId" HeaderText="Id" ItemStyle-Width="30" />
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
<asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
</Columns>
</asp:GridView>
<br />
<asp:Button ID="btnSave" Text="Save" runat="server" />
</div>
</form>
</body>
</html>
Namespaces
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.PopulateCustomers();
}
}
private void PopulateCustomers()
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection conn = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT * FROM Customers", conn))
{
using (SqlDataAdapter da = new SqlDataAdapter(cmd))
{
DataSet ds = new DataSet();
da.Fill(ds);
GridView1.DataSource = ds;
GridView1.DataBind();
}
}
}
}
[System.Web.Services.WebMethod]
public static string SaveGridViewRowData(int customerId, string name, string country)
{
//Write your code here to save each row in database
return "";
}
Screenshot
After addition of a row in GridView