Select All and Delete using ASP.NET MVC and AngularJS
In my previous article
I illustrated how jQuery can be used to select and delete records in an ASP.NET
MVC application. A few readers asked how the same can be accomplished using
AngularJS instead of jQuery. This article shows just that.
Recollect how our Index view looks like and how it allows you to select all
rows through the header checkbox or individual rows through the respective
checkboxes.
As you can see there are two ways to select records for deletion:
- You select checkboxes for rows to be deleted individually.
- You can check the checkbox placed in the header row to select all the
rows. This checkbox toggles the checked state of the other checkboxes.
Once selected you can click on the Delete Selected Customers button to
actually delete the records.
In order to implement such a functionality using ASP.NET MVC and AngularJS
you will need to modify the Index view as shown below:
@model List<SelectAllDeleteDemo.Models.Customer>
...
...
<html ng-app>
<body ng-controller="MyController">
<h1>List of Customers</h1>
<input type="button" id="delete"
value="Delete Selected Customers"
ng-click="DeleteSelected()" />
<br /><br />
<table border="1" cellpadding="11">
<tr>
<th><input type="checkbox" id="checkAll"
ng-click="ToggleSelectAll()" /></th>
<th>CustomerID</th>
<th>CompanyName</th>
<th>Country</th>
</tr>
@{ int i = 0;}
@foreach (var item in Model)
{
<tr>
<td><input type="checkbox"
class="checkBox"
value="@item.CustomerID"
ng-checked="selectAll"
ng-model="customerIDs[@i].selected" /></td>
<td>@item.CustomerID</td>
<td>@item.CompanyName</td>
<td>@item.Country</td>
</tr>
i++;
}
</table>
</body>
</html>
Notice a few things about this markup:
- The <html> tag has ng-app attribute indicating that this page is an
AngularJS application.
- The <body> tag specifies ng-controller attribute to be MyController. You
will write this controller shortly.
- The Delete Selected Customers button wires a click event handler using
ng-click attribute and it is set to DeleteSelected().
- The header checkbox wires click event handler using ng-click to
ToggleSelectAll(). This event handler is responsible for toggling the state
of all the checkboxes.
- The checkboxes in individual rows are bound with selected property of
objects stored in customerIDs array. This part will be clear once you see
the code shortly.
Now add a script reference to AngularJS and also add a <script> block.
Then write the following jQuery code:
<script src="~/Scripts/angular-1.2.js"></script>
<script>
function MyController($scope, $http) {
$scope.selectAll = false;
$scope.customerIDs = new Array();
@foreach (var item in Model)
{
@:$scope.customerIDs.push({ 'customerID':
'@item.CustomerID', 'selected': false });
}
$scope.DeleteSelected = function () {
var selectedIDs = new Array();
angular.forEach
($scope.customerIDs, function (item) {
if(item.selected)
{
selectedIDs.push(item.customerID);
}
});
var promise = $http.post
("/home/delete", selectedIDs);
promise.success(function (msg) {
alert(msg);
}).error(function () {
alert("Error");
});
}
$scope.ToggleSelectAll = function () {
$scope.selectAll = !$scope.selectAll;
angular.forEach(
$scope.customerIDs, function (item) {
item.selected = $scope.selectAll;
});
}
}
</script>
The code consists of MyController function - the AngularJS controller - with
two model properties and two event handlers.
The selectAll model property is initially set to false indicating that all
the checkboxes are unchecked. Recollect that selectAll property is bound with
the ng-checked attribute of individual checkboxes. The customerIDs array stores
JavaScript objects, each holding a CustomerID and its checked state. Notice how
this array is filled by dynamically emitting push() script calls through Razor
code block. Recollect that checkboxes from the individual rows are model bound
with customerIDs[i].selected property. This way checking or unchecking a
checkbox individually (rather than header checkbox) toggles the corresponding
entry from the customerIDs array.
The DeleteSelected() function handles the click event of the Delete Selected
Customers button. Inside, the code iterates through the customerIDs array using
forEach() and determines whether selected property is true or false. If the
selected property is true, that customerID is pushed into a local array -
selectedIDs. This way you get an array of CustomerIDs that are checked in the
table. Then the code makes an Ajax call to the /home/delete action method. This
is done using the post() method of $http. The post() method takes two parameters
- url of the resource to be invoked and data to be sent along with the request.
In this case you pass the selectedIDs array to the Delete() action method. The
success() and error() method simply wire the respective callbacks to the promise
object returned by the post() method.
The ToggleSelectAll() function acts as the click event handler for the header
checkbox. Inside, it toggles the selectAll model property. The code then
iterates through all the elements of the customerIDs array and set selected
property to the value of selectAll. This way all the checkboxes from the table
rows toggle their state.
That's it! Run the application and test the functionality.