MVC3 & Ajax: refresh the list to hide the entry that was removed from the list with the click of a button

Question

I have a list that displays the topics of the subscription forums, and on each line there is a button to unsubscribe. I work fine using Ajax to unsubscribe, but I want to upgrade using Ajax to remove the canceled stream from the list. Can someone please suggest me. My code is as follows:

The idea of ​​using Ajax is that I just want to update the list section of an entire page.

index.aspx

<% foreach (var thread in Model.threads) { %>
    <tr>
        <td><%: thread.Title %></td>
        <td><%: Ajax.ActionLink("Unsubscribe", "ToggleForumAlertFromList",
                    new { id = thread.ForumId },
                    new AjaxOptions { HttpMethod = "POST", 
                        UpdateTargetId = "none", 
                    new { ID = "togglealertlink" })%>
        </td> 
    </tr>
<% } %>       

controller

[HttpPost]
public ActionResult ToggleThreadAlertFromList(Guid id)
{
    // Do stuff to unsubscribe        
    return new EmptyResult();
}

Answer 1

You need to connect to the OnSuccess return message that fires when your POST completes.

, .

<% foreach (var thread in Model.threads) { %>
    <tr id= "<%: thread.ForumId %>">
        <td><%: thread.Title %></td>
        <td><%: Ajax.ActionLink("Unsubscribe", "ToggleForumAlertFromList",
                    new { id = thread.ForumId },
                    new AjaxOptions { HttpMethod = "POST", 
                        UpdateTargetId = "none", 
                        OnSuccess = "removeItem('thread.ForumId')"
                    new { ID = "togglealertlink" })%>
        </td> 
    </tr>
<% } %> 

function removeItem(itemId) {
    $("#" + itemId).remove();
}

, <tr> forumId, .