Delete multiple Rows using CheckBox in AngularJS in ASP.Net

Last Reply 5 months ago By dharmendr

Posted 5 months ago

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

You are viewing reply posted by: dharmendr 5 months ago.
Posted 5 months 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