Add new row when user click on last row in ASP.Net GridView using jQuery AJAX

Hi mahjoubi,

You need to make Ajax call to save the GridView rows in database.

Refer below example.

HTML

<asp:GridView ID="gvCustomers" runat="server" Height="100%" Width="100%" BackColor="LightGoldenrodYellow"
    BorderColor="Tan" BorderWidth="1px" CellPadding="2" ForeColor="Black" AutoGenerateColumns="False">
    <Columns>
        <asp:TemplateField ControlStyle-Width="80px" HeaderText="Id">
            <ItemTemplate>
                <asp:TextBox ID="txtCustomerID" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField ControlStyle-Width="80px" HeaderText="Name">
            <ItemTemplate>
                <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField ControlStyle-Width="30px" HeaderText="Country">
            <ItemTemplate>
                <asp:TextBox ID="txtCountry" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>                
</asp:GridView>
<asp:Button Text="Save" runat="server" ID="btnSave" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        var gridView = document.getElementById('<%= gvCustomers.ClientID %>');
        gridView.addEventListener('click', function (e) {
            if (e.target.tagName === 'INPUT' && e.target.parentElement.parentElement === gridView.rows[gridView.rows.length - 1]) {
                // A textbox in the last row was clicked; add a new row
                addRow();
            }
        });

        function addRow() {
            var newRow = gridView.insertRow(gridView.rows.length); // Insert at the end
            var columns = ["CustomerID", "Name", "Country"];

            for (var i = 0; i < columns.length; i++) {
                var cell = newRow.insertCell(i);
                var input = document.createElement('input');
                input.type = 'text';
                input.name = 'new_row_' + columns[i]; // Unique name for new row TextBoxes
                input.id = 'gvCustomers_txt' + columns[i] + i;
                cell.appendChild(input);
            }
        }
    });

    $("body").on("click", "[id*=btnSave]", function () {
        var customers = new Array();
        $("[id$=gvCustomers] tr:has(td)").each(function () {
            var row = $(this);
            var customer = {};
            customer.CustomerId = row.find("[id*=txtCustomerID]").val();
            customer.Name = row.find("[id*=txtName]").val();
            customer.Country = row.find("[id*=txtCountry]").val();
            customers.push(customer);
        });

        $.ajax({
            type: "POST",
            url: "VB.aspx/InsertCustomers",
            data: JSON.stringify({ customers: customers }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {

            },
            error: function (r) {
                alert(r.responseText);
            }
        });

        return false;
    });
</script>

Namespaces

Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Services

Code

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    Dim tb As New DataTable
    tb.Columns.AddRange(New DataColumn() {
                        New DataColumn("CustomerID"),
                        New DataColumn("Name"),
                        New DataColumn("Country")})
    tb.Rows.Add()
    gvCustomers.DataSource = tb
    gvCustomers.DataBind()

End Sub

<WebMethod>
Public Shared Sub InsertCustomers(customers As List(Of Customer))
    For Each customer As Customer In customers
        If Not String.IsNullOrEmpty(customer.CustomerId) _
            AndAlso Not String.IsNullOrEmpty(customer.Name) _
            AndAlso Not String.IsNullOrEmpty(customer.Country) Then
            ' Code to insert each record in database.
        End If
    Next

End Sub

Public Class Customer
    Public Property CustomerId As String
    Public Property Name As String
    Public Property Country As String
End Class

Screenshot