[Updated for Web Api RC]

In sessions 8-10 we added some get functionality along with paging and selection support to our grid.  Now what if we want to prune out customer database and remove one of those customers.

• In the Web Api Open CustomerController.cs
• Create a new method named DeleteCustomer that excepts an integer of id
• DeleteCustomer will also return a HttpResponseMessage
• initialize an empty message named reponse

In this sample application we do not technically allow anyone except the DBA access to delete records. If you have been following this series we added a new column to our customer database to signify that a record is deleted.  We then modified our Get method not to return those records.

So because of this we are going to do something slightly different.  First we will check to see if the record exist while also checking to ensure it has not already been marked as deleted.  If it has not, then we will set to deleted and return and Accepted 202 HTTP message.  If it has already been deleted or is not found we will return a Not found 404 HTTP message.  Our new deleted method should look similar to this;

// Delete = DELETE
public HttpResponseMessage DeleteCustomer(int id)
{
    using (var context = new ChinookContext())
    {
      var request = context.Customers.Single(c => c.CustomerId == id && c.Deleted == false);

      if (request != null)
      {
         request.Deleted = true;
         context.SaveChanges();
         return Request.CreateResponse(HttpStatusCode.Accepted, request);
       }
        return Request.CreateResponse(HttpStatusCode.NotFound);
    }
}

• Open up jQueryUILocal.htm
• In the tools div tab we created in Day 10 add a new button with the id removeCustomer.

<div class="tools">
        <button id="removeCustomer">Remove Customer</button>
        <button id="clearSelection">Clear selection</button>
    </div>

• Open Up jQueryUIExampleLocal.js
• Create a new function in our jQueryExample and name it Remove Button
• Add the follow code to the function

jQueryExample.RemoveButton = function () {
    $("#removeCustomer").click(function () {
        if (!selected.length) {
            alert("None selected");
            return;
        }
        var customerId = selected[0].CustomerId;
        $.ajax({ type: "DELETE", url: "http://localhost:60025/api/customer/" + customerId });

        $.observable(localCustomers).remove(selected);
        $.observable(selected).remove(0, selected.length);
        customers.refresh();
    });
};

In this function we do a few things.

First we check upon click if something has been selected.  If not we display an alert box (I am not a fan of alert boxes so this will be changed later).

Currently this function only supports deleting one record at a time, it could be easily expanded to allow multiple deletes.

The function then removes the row from the client side dataview and refresh the object.

To finish up we need to add this new function to our jQueryWireUp, it should now look like this:

jQueryExample.jQueryWireUp = function () {
    jQueryExample.GetAllCustomer();
    jQueryExample.LoadDataView();
    jQueryExample.LoadDataGrid();
    jQueryExample.PageSizeOptions();
    jQueryExample.SelectedGridOptions();

    customers.refresh();

    jQueryExample.RemoveButton();
    jQueryExample.RefreshButton();
    jQueryExample.ClearButton();
};

Save and run the application.  Select the customer with the ID of one, then click the Remove Customer button.

If Fiddlers is running you should see the following address being sent to web api.

http://localhost:60025/api/customer/1 with the verb of DELETE.

Upon completion that customer should disappear from the grid and if you check the database you will notice the Deleted column is not true.