Question

Seeing as though our team maintain an Intranet which has clients users guaranteed to have javascript enabled we know that we can step in and start using jQuery more “thoroughly”. Our system is very large, so even though we use areas in our ASP.NET MVC application the sheer amount of pages to add, edit, delete and view sets of data per sub-system of an area is really quite large. A sub-system of an area can have roughly twenty tables of data. If there’s twenty tables of data, and you have individual pages to add, edit, delete and view them that means there’s a total of 60 pages. Now imagine there’s twenty sub-systems per area, then a single area would have 20 * 60 pages, and we have roughly 15 areas on our Intranet. You get the point, it’s huge.

Moving on to my real point, I’m wanting to cut this down by using jQuery capabilities of having a table of data on a page, hitting “delete” and it giving me a delete dialog with a confirm button which will then submit the form, redirect to the correct action and do the work for me. Now I need some guidance in the following areas:

1. If I wanted to delete without posting back at all using ASP.NET MVC, what’s the process for doing this? This includes hitting delete, it going off and checking it’s able to delete (FK relationships must be dealt with in the correct manner), then if able deleting it and removing the row from the table in the view, all without refreshing the page.
2. How do I call the delete action from an asynchronous process using jQuery? Is it wise to do so? Usually we use Html.ActionLink. Would I have to wrap it in a form?
3. The same goes for editing and updating, again, what’s the best way to do this?

I’m looking for an elegant solution, and something which isn’t difficult to apply for every page I have to do this for. Any input would be much appreciated.

Answer 1

I’m working on a project that uses links to to fire off delete actions via AJAX POST (no postback).

$("a.deleteLink").click(function(event)
{
    event.preventDefault();
    if (confirm("Are you sure you want to delete this section?"))
    {
        //TODO Display processing indicator

        var myId = /* id of element */ ;

        $.post("/Section/Delete", { id: myId }, function(data)
        {
            if (data == "Success")
            {
                //handle success
                //TODO Fade out element using .fadeOut()
            }
            else
            {
                //handle error
            }
        });
    }
});

The controller method is simply in /Controllers/SectionController.cs. Only accepts POST as should any action that changes the database.

    private SectionRepository secRepo = new SectionRepository();

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Delete(long id)
    {
        Section sec = secRepo.GetById(id);

        secRepo.Delete(sec);
        secRepo.Save();

        return Content("Success");
    }