Delete multiple Rows using CheckBox in AngularJS in ASP.Net

Last Reply one month ago By dharmendr

Posted one month ago

How to delete multiple records from daatabase with the help of CheckBox checked using Angularjs in ASP.Net.

Posted one month ago

Hi rani,

Check this example. Now please take its reference and correct your code.

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 the database table SQL by clicking the download link below.

Download SQL file

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', []);
        app.controller('MyController', function ($scope, $http, $window) {
            PopulateCustomers();
            function PopulateCustomers() {
                $http.post("Default.aspx/BindCustomers", { headers: { 'Content-Type': 'application/json'} })
                .then(function (response) {
                    $scope.Customers = eval(response.data.d);
                });
            }
            $scope.Delete = function () {
                var selected = "";
                for (var i = 0; i < $scope.Customers.length; i++) {
                    if ($scope.Customers[i].Selected != undefined && $scope.Customers[i].Selected) {
                        selected += $scope.Customers[i].Id + ",";
                    }
                }

                $http.post("Default.aspx/Delete", { ids: selected }, { headers: { 'Content-Type': 'application/json'} })
                .then(function (response) {
                    PopulateCustomers();
                });
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div ng-app="MyApp" ng-controller="MyController">
        <table>
            <thead>
                <tr>
                    <th>Action</th>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Country</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="customer in Customers">
                    <td><input type="checkbox" name="Selected" ng-model="customer.Selected" /></td>
                    <td>{{ customer.Id }}</td>
                    <td>{{ customer.Name }}</td>
                    <td>{{ customer.Country }}</td>
                </tr>
            </tbody>
        </table>
        <br />
        <input type="button" value="Delete Selected" ng-click="Delete()" />
    </div>
    </form>
</body>
</html>

Namespaces

C#

using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Web.Services;

VB.Net

Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Web.Script.Serialization
Imports System.Web.Services

Code

C#

[WebMethod]
public static string BindCustomers()
{
    List<object> customers = new List<object>();
    string sql = "SELECT * FROM Customers";
    using (SqlConnection conn = new SqlConnection())
    {
        conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlCommand cmd = new SqlCommand(sql))
        {
            cmd.Connection = conn;
            conn.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    customers.Add(new
                    {
                        Id = sdr["CustomerId"],
                        Name = sdr["Name"],
                        Country = sdr["Country"]
                    });
                }
            }
            conn.Close();
        }
        return (new JavaScriptSerializer().Serialize(customers));
    }
}

[WebMethod]
public static void Delete(string ids)
{
    using (SqlConnection conn = new SqlConnection())
    {
        conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlCommand cmd = new SqlCommand("DELETE FROM Customers WHERE CustomerID IN (" + ids.TrimEnd(',') + ")"))
        {
            cmd.Connection = conn;
            conn.Open();
            cmd.ExecuteNonQuery();
            conn.Close();
        }
    }
}

VB.Net

<WebMethod()>
Public Shared Function BindCustomers() As String
    Dim customers As List(Of Object) = New List(Of Object)()
    Dim sql As String = "SELECT * FROM Customers"
    Using conn As SqlConnection = New SqlConnection()
        conn.ConnectionString = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Using cmd As SqlCommand = New SqlCommand(sql)
            cmd.Connection = conn
            conn.Open()
            Using sdr As SqlDataReader = cmd.ExecuteReader()
                While sdr.Read()
                    customers.Add(New With {
                        .Id = sdr("CustomerId"),
                        .Name = sdr("Name"),
                        .Country = sdr("Country")
                    })
                End While
            End Using
            conn.Close()
        End Using
        Return (New JavaScriptSerializer().Serialize(customers))
    End Using
End Function

<WebMethod()>
Public Shared Sub Delete(ByVal ids As String)
    Using conn As SqlConnection = New SqlConnection()
        conn.ConnectionString = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Using cmd As SqlCommand = New SqlCommand("DELETE FROM Customers WHERE CustomerID IN (" & ids.TrimEnd(","c) & ")")
            cmd.Connection = conn
            conn.Open()
            cmd.ExecuteNonQuery()
            conn.Close()
        End Using
    End Using
End Sub

Screenshot