DataTables Delete Row with Ajax in ASP.NET MVC

We’re doing our best to have the UI for mySimpleAds.com be as elegant, yet simple to use as possible. We are using the well known Datatables jquery table plugin. We wanted to provide a quick way to remove an ad or group from the table. We are certainly not the only ones who ever wanted to accomplish such a feat, nor is our solution revolutionary, but I wanted to share with anyone looking to do something similar to hopefully save you a little time and effort.

We are also using the twitter bootstrap framework, along with the bootbox modal plugin. When a customer clicks to delete an ad or group from the table, the row is highlighted and they will get prompted with an ‘Are you really sure?’ type of modal pop-up. If they cancel, a whole lotta nothing happens. If they agree to continue on their merry way and delete the entry, then an ajax call is passed back to the controller with the id to remove from the database. If all is Kosher, then the entry is dynamically removed from the table. No postback needed. It’s simple, and it’s hopefully painless for our customer’s to use.

So, here’s how it’s done in a few different pieces…

First in the View, for some security and to make sure the request originates from our site, we want to send an AntiForgeryToken along with the Ajax post request. So, we did a basic form stub and included it…

@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "__AjaxAntiForgeryForm" })) {
@Html.AntiForgeryToken()
}

…Next piece was to tag all our row TR tags with the particular item Id from the loop. This is used just to highlight the TDs in the TR so they know which ad or group they are deleting…

<tr id="@item.Id">

…The link itself includes the class ‘delete’ to catch in the jquery call. It also includes the item Id from the loop again. You can probably get that from the TR, but for now this works and doesn’t add really any major complexity…

<a href="#" class="btn hovertip-top delete" title="Delete" data-id="@item.Id"><b class="font-remove-sign"></b></a>

…Then finally from the View side is the jquery call to display the modal dialog, generate and submit the ajax request, and do the datatables row removal if successful deletion occurred…

	@* Delete call *@
	<script type="text/javascript">
		$(document).ready(function () {
			$("a.delete").click(function (e) {
				e.preventDefault();
				var rowid = $(this).data('id');
				$('#' + rowid + ' td').css("background", "#c95454");
				bootbox.dialog("Are you sure you want to delete the object?", [{
					"label": "Cancel",
					"class": "btn-small",
					"callback": function () {
						$('#' + rowid + ' td').css("background", "");
					}
				}, {
					"label": "Delete",
					"class": "btn-danger",
					"callback": function () {
						var form = $('#__AjaxAntiForgeryForm');
						var token = $('input[name="__RequestVerificationToken"]', form).val();
						$.ajax({
							url: '@Url.Action("Delete", "Objects")',
								type: 'POST',
								data: {
									__RequestVerificationToken: token,
									id: rowid
								},
								success: function (data) {
									if (data.Status == "Success") {
										var oTable = $('#data-table').dataTable();
										var aPos = oTable.fnGetPosition($('#' + rowid).get(0));
										oTable.fnDeleteRow(aPos);
									} else {
										$('#' + rowid + ' td').css("background", "");
									}
								},
								error: function () {
									$('#' + rowid + ' td').css("background", "");
								}
							});

						}
					}
				]);
			});
		});
	</script>

…Finally, here’s the controller that processes the delete and sends back the success or error message to the view…

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Delete(string id = "")
{
	id = HttpUtility.HtmlEncode(id.Trim());
	if (id == "") { return Json(new { Status = "Error" }); }
	try
	{
		var objectview = new ObjectViewModelBuilder(_objectRepository);
		return Json(objectview.Delete(id) ? new { Status = "Success" } : new { Status = "Error" });
	}
	catch
	{
		return Json(new { Status = "Error" });
	}
}

…Again, certainly nothing revolutionary, and only one of many ways of accomplishing a row delete, but wanted to share a working solution. Hopefully this helps someone in some future search.