Adding a jQuery delete link with confirmation

In this recipe, we will take a look at how we can safely delete a record using a link. We will use jQuery to override the normal GET functionality of a link and replace it with a POST action. We will add a JavaScript confirmation to make sure they don't accidentally delete data. Also, because we can't guarantee that everyone is able to utilize JavaScript, we will provide an intermediary delete confirmation step.

Getting ready

In this recipe, we will build from the previous recipe where we created an intermediate delete confirmation page. The delete to intermediate "Are you sure?" page is great for folks who don't have JavaScript capabilities. However, why make those with JavaScript suffer? For that reason we will now make that initial Delete link take action.

We want to make sure that we don't use a GET request to delete data though, as any spider crawling your site could delete your content (solved by adding security to your site). Also, we don't want our users to click Delete and have no chance to change their mind. To solve these two issues, we will use jQuery to override the GET aspect of our Delete link and exchange it for a post direct to our delete logic. We will also add a confirmation pop-up to our link asking the user if they are sure they want to delete the specified resource.

How to do it...

  1. By starting off with the last recipe, we have an index page that lists a bunch of products. Each product's details are displayed and on top of that is a delete link. On the backend, we have a ConfirmDelete and Delete view that do exactly what their names describe. All we need to do is jazz up the UI a bit. Let's start by adding a reference to jQuery in our master page.

    Views/Shared/Site.Master: 

    <script src="/Scripts/jquery-1.3.2.js" type="text/javascript"></script>
  2. Then in our index page, we can start to modify our HTML a little bit to make it more friendly for scripting. We are going to wrap our product details display with a parent div. We will give this parent div a unique ID for the product that it is displaying by adding the ProductId to its class property. This will allow us to remove it from the display. Then we need to make the div—that houses our delete link—easier to find in the same way, so that we can swap in a Deleting... message. We will also need to add a class to our delete links called delete to make them easier to differentiate from other links on the page.

    Views/Home/Index.aspx: 

    <div class="container<%= p.ProductId %>">
<div class="busy<%= p.ProductId %>">
<%= Html.ActionLink("Delete", "ConfirmDelete", new {@id=p.ProductId}, new {@class="delete"}) %></div>
//details for the product...
</div>
  3. Now we can turn to some jQuery. We will now spotweld or ajaxify our current functionality. Inside our indexContent content area, we can add our <script> tags. Then the first part that we want to add is our opening line of jQuery waiting for the page to load.

    Views/Home/Index.aspx: 

    <asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<script>
$(document).ready(...)
  4. Once our ready function fires, we want to wire up a new function that will iterate through all of our delete links (using the link dot class name selector: a.delete) to override our OnClick event.

    Views/Home/Index.aspx: 

    <script>
$(document).ready(function () {
$('a.delete').click(...)
  5. When users click on the delete link, we want to ask them if they are really sure they want to delete the resource or not. We will do this with a simple confirmation window. We will then store the result of that question in a doDelete variable for later use, where we can see if they want to delete the resource or not. Obviously, if they don't want to delete the resource we won't!

    Views/Home/Index.aspx: 

    $('a.delete').click(function () {
var doDelete = confirm('Are you sure you want to delete this record?'),
if (doDelete) { ... }
else { return false; } }); });
  6. Now that we are able to capture a "yes...please delete this" response from the user, we have our workspace to begin doing other magic. The first thing we need to do is capture some data from the link being operated on for the processing needs coming up. We need to get the current URL, that the delete link is wired to, to use and replace the ConfirmDelete action name with Delete (allowing us to bypass the confirmation view). Then we can split the URL into an array of strings on the forward slash character—at the end of which is the ProductId that we are going to be working with. All of these values will be stuffed into conveniently named variables— url, arr, and id.

    Views/Home/Index.aspx: 

    if (doDelete) {
var url = this.href.replace('Confirm', ''),
var arr = url.split('/'),
var id = arr[arr.length - 1];
  7. Now that we have our data collected, we can update our display by replacing the delete link with a message to the user telling them that we are Deleting... the record.

    Views/Home/Index.aspx: 

    $('div.busy' + id).html("Deleting...");
  8. Now comes the real work. We are going to perform a post using the jQuery .post() method using our altered URL and passing in the ProductId of the record we are deleting. We will also pass in a callback function, allowing us to capture when the record is actually deleted.

    Views/Home/Index.aspx: 

    $.post(url, '',
function () {...}
  9. Once the record is deleted, we can do a few things. We could simply refresh the page, which would update the display to show that the record is missing. However, we could just as easily remove the record from the display directly. So we will use the last option. We could also just call hide() on the div containing our record, but that is generally too abrupt on the user experience. Instead, we will animate the record into oblivion using the animate() method from the div selector. Once the div has been animated away, we will hide it for good measure.

    Views/Home/Index.aspx: 

    $.post(url, '',
function () {
$('div.container' + id).animate({
opacity: 0.25,
left: 'toggle',
height: 'toggle'
}, 1000, function () {
$('div.' + id).hide(); }); });
  10. Lastly, we need to make sure that our link doesn't call its href after doing all this work. For that reason, we will add one more line returning false to the link, stopping its execution entirely.

    Views/Home/Index.aspx: 

    return false; }
  11. Here is the entire script:

    Views/Home/Index.aspx: 

    <script>
$(document).ready(function () {
$('a.delete').click(function () {
var doDelete = confirm('Are you sure you want to delete this record?'),
if (doDelete) {
var url = this.href.replace('Confirm', ''),
var arr = url.split('/'),
var id = arr[arr.length - 1];
$('div.busy' + id).html("Deleting...");
$.post(url, '',
function () {
$('div.container' + id).animate({
opacity: 0.25,
left: 'toggle',
height: 'toggle'
}, 1000, function () {
$('div.' + id).hide(); }); });
return false; }
else { return false; } }); });
</script>
  12. You can now hit F5 and run this.

How it works...

In this example, we are simply adding functionality with Ajax rather than being totally reliant on it. This means that whether the user has JavaScript or not won't matter. If they have it, their experience will be enhanced. But more importantly, if they don't have it they won't lose any functionality.

This is primarily done by using jQuery selectors and overriding existing events. Once we have our hooks into the HTML elements that we need, the sky is the limit as to what we can do.

There's more...

This recipe was originally inspired by Phil Haack's awesome blog—haacked.com. Check it out here for more details as to why you might want to post to instead of get a delete method:

http://haacked.com/archive/2009/01/30/simple-jquery-delete-link-for-asp.net-mvc.aspx.

One of the most important reasons for posting a form to perform a delete is that when a spider comes through your site performing gets on every link it finds, your data doesn't accidentally get deleted each time a crawl is performed!

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset