Delete an entry from the DB and remove the corresponding row from the table; plus an ajax loading indicator
This is a continuation of my
'REAL' AJAX with Asp.Net (not Asp.Net AJAX)
series posts for those of us trying to stop relying on Asp.Net 'AJAX'.
GridView has an incredibly easy 'Delete' feature when used in conjunction with a DataSource, the problem is, that is requires a postback.
Since we are going the ajax route, this is a no-go.
Alternatively, we could wrap in in an UpdatePanel, but that is exactly what we are trying to avoid.
Deleting is very easy, we use a lot of the same methods that were involved in fixing the sort on
the last post
and using the jQuery .ajax() method.
changes to the markup
First we have to add another column for deleting and stick a delete image in there, this is simple enough.
I added unique ids to each row and each delete cell for jQuery to have something to hook on to, you could also add classes.
The markup hasn't changed all too much:
delete.aspx
<asp:Repeater ID="rpt" runat="server" DataSourceID="lds">
<HeaderTemplate>
<table id="sort_table">
<thead>
<tr>
<th>First</th><th>Last</th><th>Age</th><th></th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td id="frst<%#Eval("person_id")%>" class="editable">
<%#Eval("first_name")%>
</td>
<td id="last<%#Eval("person_id")%>" class="editable">
<%#Eval("last_name")%>
</td>
<td id="age_<%#Eval("person_id")%>" class="editable">
<%#Eval("age")%>
</td>
<td style="test-align:right;" id="del_<%#Eval("person_id")%>">
<img src="images/delete_item.png" alt="delete" />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody></table>
</FooterTemplate>
</asp:Repeater>
<asp:LinqDataSource ID="lds" runat="server"
ContextTypeName="demoDataContext" TableName="persons" />
We put the id on the cell itself and not the image because it will be easier to grab with dataTables, not to mention easier to click.
now for the js
First of all, you will notice if we leave the .dataTables() call the same as before, you can now 'sort' by the last column (the delete column), that isn't right, we have to pass some parameters to our 'dataTables()' method to make sure that column gets ignored:
oTable = $("#sort_table").dataTable({
"aoColumns": [null, null, null, { "bSortable": false}]
});
Also notice that we decided to store the resulting table in 'oTable' just like the last lesson.
Remember that this is because the sortable data is not kept in the table itself, but in an associated array, which we will need later.
Now, using the same method as last time, we will grab the position of the clicked item, attempt the ajax call, but instead of changing a value, we will delete a row.
Normally, deleting a row in ajax is very simple, you grab the row by the id, and do a hide() or slideUp(), etc. - but that will not totally work here.
Sure it would function, but since we are using sizing and paging, they wouldn't reflect the changes:
if you had 30 items in your table, and you were 'showing 10 of 30' items, and you deleted one the normal way, it would still say 'showing 10 of 30 items' when in fact, you are only now showing 9 of 29 items, and the problem then just compounds.
The brilliant minds who wrote the
dataTables plugin built in ways to get around this.
First thing, we get the position of the clicked item (which all have 'del_' as an id prefix) and store that:
var pos = oTable.fnGetPosition(this);
As well as the id of the cell as we need the corresponding 'person_id' that is contained there:
var del = $(this);
Then we simply call the
.ajax() method in jQuery:
$.ajax({
type: "POST",
url: "ajax_functions/delete.aspx",
data: "person_id=" + del.attr('id').replace('del_', ''),
success: function() {
$("#report").addClass("success").html("Person Deleted");
oTable.fnDeleteRow(pos[0]);
}
});
And that is where the magic happens.
It was indicated that this was of type 'POST', the url that it is sent to (we
will get to that in a moment), and the POST query that was sent (the delete
cell's id, minus the 'del_' prefix). Then, on success, we simply output some feedback to the user into a new div with the id of 'report' - nothing special there.
But on the next line, we use the 'oTable' that we stored earlier that has all of the sortable data, and call the included function 'fnDeleteRow' with the position that we collected earlier, and that is what deletes the row.
The finished javascript looks like this:
delete.aspx
var oTable;
var aPos;
var editedCell;
$(function() {
$("td[id^='del_']").addClass("pointer").click(function(event) {
var pos = oTable.fnGetPosition(this);
var del = $(this);
$.ajax({
type: "POST",
url: "ajax_functions/delete.aspx",
data: "person_id=" + del.attr('id').replace('del_', ''),
success: function() {
$("#report").addClass("success").html("Person Deleted");
oTable.fnDeleteRow(pos[0]);
}
});
});
$(".editable").click(function() {
aPos = oTable.fnGetPosition(this);
editedCell = $(this);
}).editInPlace({
url: "ajax_functions/update.aspx",
params: "ajax=yes",
value_required: true,
default_text: "click to edit",
success: function() {
var data = oTable.fnGetData(aPos[0]);
data[aPos[1]] = editedCell.html();
}
});
oTable = $("#sort_table").dataTable({
"aoColumns": [null, null, null, { "bSortable": false}]
});
});
backend
Lastly is the easy part, to make the backend to "ajax_functions/delete.aspx" to handle the POST.
ajax_functions/delete.aspx.cs
using System;
using System.Linq;
public partial class ajax_functions_delete : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
demoDataContext db = new demoDataContext();
try
{
System.Threading.Thread.Sleep(1000);
// get the person_id of the person being deleted
int person_id = Convert.ToInt32(Request.Form[0]);
db.persons.DeleteOnSubmit(db.persons.First(x => x.person_id == person_id));
db.SubmitChanges();
Response.Write("deleted");
}
// this will catch all the errors and output them to the edited field
catch (Exception ex) { Response.Write("Error: " + ex.Message); }
}
}
This code is pretty simple.
Since we specified the POST in the ajax() call in jQuery, we knew the first element of the POST was going to be the person_id, and that is used to delete it from the DB.
*NOTE* that I used a
Thread.Sleep() in there which I NEVER recommend using.
it is just there to illustrate the ajax loading indicator that was implemented into the masterpage,
which is covered next.
ajax loading indicator
I snuck a new div into the masterpage with the id of 'working' and bound it to all jQuery ajax events with the following js:
demo.master
$(function() {
$("#working").bind("ajaxSend", function() {
$(this).show();
}).bind("ajaxComplete", function() {
$(this).hide();
});
});
Now any time jQuery is doing ajax, there will be a little notification so the user knows your app is not quitting on them.
All other times, that div will be hidden.
Now all that we have left is the ability to add new items.