Select All and Delete using ASP.NET MVC and jQuery Ajax
Sometimes you need to select records for certain action using checkboxes. For
example, you may select records for deleting and then delete them from the
database. Consider the following screen shot that shows such an example in
action.
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.
Implementing such a functionality is straightforward using ASP.NET MVC,
jQuery and Ajax. Let's see how.
As an example we will use Customers table of the Northwind database for this
example. You will need to create a model class for the Customers table using EF
code first. The Customer class is shown below:
public partial class Customer
{
[StringLength(5)]
public string CustomerID { get; set; }
[Required]
[StringLength(40)]
public string CompanyName { get; set; }
[StringLength(30)]
public string ContactName { get; set; }
[StringLength(30)]
public string ContactTitle { get; set; }
[StringLength(60)]
public string Address { get; set; }
[StringLength(15)]
public string City { get; set; }
[StringLength(15)]
public string Region { get; set; }
[StringLength(10)]
public string PostalCode { get; set; }
[StringLength(15)]
public string Country { get; set; }
[StringLength(24)]
public string Phone { get; set; }
[StringLength(24)]
public string Fax { get; set; }
}
The NorthwindDbContext - the DbContext of our model - is shown below:
public partial class NorthwindDbContext : DbContext
{
public NorthwindDbContext()
: base("name=NorthwindDbContext")
{
}
public virtual DbSet<Customer> Customers { get; set; }
protected override void OnModelCreating
(DbModelBuilder modelBuilder)
{
modelBuilder.Entity<Customer>()
.Property(e => e.CustomerID)
.IsFixedLength();
}
}
Notice that the NorthwindDbContext assumes that the database connection
string is stored in web.config with a name of NorthwindDbContext.
Now add HomeController and write Index() and Delete() actions as shown below:
public ActionResult Index()
{
using (NorthwindDbContext db =
new NorthwindDbContext())
{
var query = from c in db.Customers
select c;
return View(query.ToList());
}
}
public ActionResult Delete(string[] customerIDs)
{
using (NorthwindDbContext db =
ew NorthwindDbContext())
{
foreach (string customerID in customerIDs)
{
Customer obj = db.Customers.Find(customerID);
db.Customers.Remove(obj);
}
db.SaveChanges();
return Json("All the customers
deleted successfully!");
}
}
The code from the Index() action simply picks all the customers from the
Customers table and passes them to the Index view for display.
The Delete() action takes a single parameter - array of CustomerIDs to be
deleted. The Delete() action will be called through client side jQuery code and
while calling the array will be passed to it. The Delete() action simply
iterates through the customerIDs array and one-by-one deletes the customers from
the database. Finally, a success message is sent back to the caller in JSON
format.
Now add Index view and also add a <script> reference to the jQuery library.
Then add the following markup in the Index view.
@model List<SelectAllDeleteDemo.Models.Customer>
...
...
<body>
<h1>List of Customers</h1>
<input type="button" id="delete"
value="Delete Selected Customers" />
<br /><br />
<table border="1" cellpadding="10">
<tr>
<th><input type="checkbox" id="checkAll"/></th>
<th>CustomerID</th>
<th>CompanyName</th>
<th>Country</th>
</tr>
@foreach(var item in Model)
{
<tr>
<td><input type="checkbox" class="checkBox"
value="@item.CustomerID" /></td>
<td>@item.CustomerID</td>
<td>@item.CompanyName</td>
<td>@item.Country</td>
</tr>
}
</table>
</body>
...
Notice a few things about this markup:
- The customer data - CustomerID, CompanyName and Country - is displayed
in a table.
- The header row contains a checkbox whose ID is checkAll
- Each table row contains a checkbox whose class attribute is set to
checkBox. And its value is set to the CustomerID of that row.
- The button above the table is used to initiate the delete operation and
its ID is delete.
Now add a <script> block and write the following jQuery code:
$(document).ready(function () {
$("#checkAll").click(function () {
$(".checkBox").prop('checked',
$(this).prop('checked'));
});
$("#delete").click(function () {
var selectedIDs = new Array();
$('input:checkbox.checkBox').each(function () {
if ($(this).prop('checked')) {
selectedIDs.push($(this).val());
}
});
var options = {};
options.url = "/home/delete";
options.type = "POST";
options.data = JSON.stringify(selectedIDs);
options.contentType = "application/json";
options.dataType = "json";
options.success = function (msg) {
alert(msg);
};
options.error = function () {
alert("Error while deleting the records!");
};
$.ajax(options);
});
});
The code wires click event handlers for the checkAll checkbox and the delete
button. The click event handler of the checkAll checkbox toggles the checked
state of all the checkboxes. This is done by selecting the checkboxes using the
jQuery class selector. The checkboxes whose class attribute is checkBox are
matched and their checked property is toggled. Notice the use of prop() method
to do this.
The click event handler of the delete button declares an array variable to
store the selected CustomerIDs. It then selects all the checkboxes with CSS
class of checkBox. The each() method iterates through these checkboxes. If a
checkbox is checked its value is pushed into the array. This way we get all the
CustomerIDs into the selectedIDs array. The success callback simply displays the
success message returned from the Delete() action.
Then options object is created to hold all the Ajax configuration properties.
Notice that url property points to the Delete() action and data property holds
the JSON version of the selectedIDs array. Finally, $.ajax() is used to make the
Ajax call.
That's it! Run the application and test the functionality.