Cómo eliminar registros de un GridView usando ASP.Net Ajax y jQuery

asp.net eliminar fila de gridview con jquery y ajax

En este artículo te mostrare como eliminar filas de un GridView mediante Ajax utilizando jQuery y ASP.NET. EL gridview se alimentara de una base de datos y cuando demos clic en eliminar, el registro se borrara de la base de datos.

Primero debemos crear una tabla Empleados en la base de datos

CREATE TABLE tbl_Emp(Empid int NULL,EmpName varchar(250) NULL, Gender varchar(20), EmpAddress varchar(500) NULL,City varchar(250) NULL,Salary int NULL, Fk_DepId int)

Insertas unos registros de prueba

INSERT INTO tbl_Emp(Empid, EmpName, Gender, EmpAddress, City, Salary, Fk_DepId)VALUES(1, 'Jitendra' , 'Male', 'Demo Address', 'Agra', 4000, 3)  
INSERT INTO tbl_Emp(Empid, EmpName, Gender, EmpAddress, City, Salary, Fk_DepId)VALUES(2, 'Aman' , 'Male', 'Demo Address', 'Ghaziabad', 0, 2)  
INSERT INTO tbl_Emp(Empid, EmpName, Gender, EmpAddress, City, Salary, Fk_DepId)VALUES(3, 'Niman' , 'Male', 'Demo Address', 'Agra', 1000, 2)  
INSERT INTO tbl_Emp(Empid, EmpName, Gender, EmpAddress, City, Salary, Fk_DepId)VALUES(4, 'Rita' , 'Female', 'Demo Address', 'Mathura', 1000, 2)  
INSERT INTO tbl_Emp(Empid, EmpName, Gender, EmpAddress, City, Salary, Fk_DepId)VALUES(5, 'Sita' , 'Female', 'Demo Address', 'Agra', 4000, 3)  
INSERT INTO tbl_Emp(Empid, EmpName, Gender, EmpAddress, City, Salary, Fk_DepId)VALUES(6, 'Rohan' , 'Male', 'Demo Address', 'Agra', 5000, 2)  
INSERT INTO tbl_Emp(Empid, EmpName, Gender, EmpAddress, City, Salary, Fk_DepId)VALUES(7, 'Sohan' , 'Male', 'Demo Address', 'Noida', 4000, 1)  
INSERT INTO tbl_Emp(Empid, EmpName, Gender, EmpAddress, City, Salary, Fk_DepId)VALUES(8, 'Mohan' , 'Male', 'Demo Address', 'Agra', 4000, 5)  
INSERT INTO tbl_Emp(Empid, EmpName, Gender, EmpAddress, City, Salary, Fk_DepId)VALUES(9, 'Ram' , 'Male', 'Demo Address', 'Noida', 5000, 1)

Después de crear la tabla e insertar los registros, creas la aplicación en el Visual Studio. Nuevo -> Sitio Web.

eliminar registros sql mediante ajax

A continuación, creas un nuevo elemento, agregas la nueva página.

eliminar filas gridview mediante jquery ajax

El HTML de la página queda de la siguiente manera.

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Prueba.aspx.vb" Inherits="Demos.Prueba" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/style.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="gridEmpleados" runat="server" AutoGenerateColumns="false" >
            <Columns>  
                    <asp:BoundField HeaderText="EmpId" DataField="EmpId" />  
                    <asp:BoundField HeaderText="EmpName" DataField="EmpName" />  
                    <asp:BoundField HeaderText="Gender" DataField="Gender" />  
                    <asp:BoundField HeaderText="EmpAddress" DataField="EmpAddress" />  
                    <asp:TemplateField HeaderText="Herramientas">  
                        <ItemTemplate>  
                            <asp:HiddenField ID="hdnEmpId" runat="server" Value='<%#Eval("EmpId") %>'></asp:HiddenField>  
                            <asp:LinkButton ID="btnDelete" Text="Delete Emp" runat="server" OnClientClick="return DeleteConfirmbox(this.id);"></asp:LinkButton>  
                        </ItemTemplate>  
                    </asp:TemplateField>  
                </Columns>  
                <HeaderStyle   CssClass="row header blue"/>   
            <RowStyle CssClass="row cell" />
        </asp:GridView>
    </div>
    </form>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script type="text/javascript">  
        var row
        function DeleteConfirmbox(val) {  
  
            // confirm meg check for delete  
            var result = confirm('Esta seguro que quiere eliminar el empleado?');  
            if (result) {  
  
              // this is for get hdnvalue id  
                var value = val.replace("btnDelete", "hdnEmpId");  
                row = $("#" + val).closest("tr");
                $.ajax({  
                    type: "POST",  
                    contentType: "application/json; charset=utf-8",  
                    url: "Prueba.aspx/BorrarInfo", // this for calling the web method function in cs code.  
                    data: '{empid: "' + $("#" + value).val() + '" }',// empid value                      
                    dataType: "json",  
                    success: OnSuccess,  
                    failure: function (data) {  
                        alert(data);
                        return false;
                    }  
  
                      
                });    
            }
            return false;
        }  
  
        // function OnSuccess  
        function OnSuccess(response) {  
            if (response.d == 'true')  
            {  
                row.remove();
                if ($("[id*=gridEmpleados] td").length == 0) {
                    $("[id*=gridEmpleados] tbody").append("<tr><td colspan = '4' align = 'center'>No records found.</td></tr>")
                }
                alert("Empleado eliminado");
                
                return false;
            }  
            return false;
        }  
    </script>   
</body>
</html>

Por último el código del servidor queda de la siguiente forma:

Imports System.Data.SqlClient

Public Class Prueba
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            LoadGrid()
        End If
    End Sub

    Public Sub LoadGrid()
        Dim con As New SqlConnection("data source=localhost;initial catalog=demos;UID=sa;PWD=SQL2008;")

        con.Open()
        Dim cmd As New SqlCommand("Select * from tbl_Emp", con)
        Dim da As New SqlDataAdapter(cmd)
        Dim ds As New DataSet()
        da.Fill(ds)
        con.Close()
        gridEmpleados.DataSource = ds
        gridEmpleados.DataBind()
    End Sub

    <System.Web.Services.WebMethod>
    Public Shared Function BorrarInfo(empid As Integer) As String
        Dim strmsg As String = String.Empty
        Dim con As New SqlConnection("data source=localhost;initial catalog=demos;UID=sa;PWD=SQL2008;")
        Dim cmd As New SqlCommand("delete from tbl_Emp where EmpId= @Empid", con)
        con.Open()
        cmd.Parameters.AddWithValue("@Empid", empid)
        Dim retval As Integer = cmd.ExecuteNonQuery()
        con.Close()
        If retval = 1 Then
            strmsg = "true"
        Else
            strmsg = "false"
        End If
        Return strmsg
    End Function

End Class