Question

I’m developing a web application with MVC 3 and want to return a message to the user after he has deleted an item successfully.

MyWallController method looks like this:

[HttpPost]
public ActionResult DeleteAlbum(Guid albumId)
{
    try
    {
        this.albumService.DeleteAlbum(albumId);
        return Json(new { success = true, msg = "Album successfully deleted" }, JsonRequestBehavior.AllowGet);
    }
    catch (FPSException e)
    {
        return Json(new { success = false, msg = e.Message });
    }
    catch (Exception)
    {
        throw new HttpException(500, "Error while deleting album");
    }
}

The link:

<a class="open-DeleteAlbumDialog" href="http://localhost:2941/MyWall/DeleteAlbum?albumId=0f49b1ad-8ec1-4fca-b8e2-28bdbf47824e">Delete</a>

The JavaScript:

$(function () {
    $(document).on('click', '.open-DeleteAlbumDialog', function () {
    var answer = confirm('Are you sure you want to delete this album?')
    if (answer) {
        $.post(this.href, function (data) {
            if (data.success) {
                // do something
            } else {
                // do something else
            }
        });
    }
    else return false;
});

However the function defined inside post is never called and what I get is a “the resource cannot be found”. But the item has been deleted successfully.

All kinds of help is appreciated.

Answer 1

Your link is still working. You need to preventDefault:

$(function () {
    $(document).on('click', '.open-DeleteAlbumDialog', function (e) {
    e.preventDefault();
    var answer = confirm('Are you sure you want to delete this album?')
    if (answer) {
        $.post(this.href, function (data) {
            if (data.success) {
                // do something
            } else {
                // do something else
            }
        });
    }
});