Question

After $.ajax post request to the controllers action I would like to get info from the server and then update my partial view, for example I have a list rendered in my view I delete an item from the list using the $.ajax post request and then i would like my list to update itself asynchronously.

Here is my function that deletes the item from the list:

 $(".btnDeleteCurrentFavSong").click(function () {

    var songId = $(this).attr('name');

    $.ajax({
        type: 'POST',
        url: "/Home/DeleteCurrentFav/",
        data: { id: songId },
        success: ShowMsg("Song deleted successfully"),
        error: ShowMsg("There was an error therefore song could not be deleted, please try again"),
        dataType: "json"
    });
});

Should I somehow redirect to the action on ajax success that returns the list of songs to the view?

Answer 1

if your clicked list item looked like this:

<li name="120">Artist - Title</li>

your javascript could look something like this:

$(".btnDeleteCurrentFavSong").click(function () {

    var songId = $(this).attr('name');

    $.ajax({
        type: 'POST',
        url: "/Home/DeleteCurrentFav/",
        data: { id: songId },
        success: function () {
            ShowMsg("Song deleted successfully");
            $("li[name=" + songId + "]").remove();
        },
        error: ShowMsg("There was an error therefore song could not be deleted, please try again"),
        dataType: "json"
    });
});