MVC3& Ajax:刷新列表以隐藏通过单击按钮从列表中删除的记录

时间:2015-06-25 12:35:57

标签: c# jquery ajax asp.net-mvc-3 asp.net-mvc-4

我有一个显示订阅论坛帖子的列表,每行都有一个取消订阅的按钮。我使用Ajax取消订阅工作正常,但我想使用Ajax刷新从列表中删除未订阅的线程。任何人都可以建议我。我的代码如下:

使用Ajax背后的想法是因为我只想刷新列表部分而不是整个页面。

的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>
<% } %>       

控制器

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

1 个答案:

答案 0 :(得分:2)

您需要连接在POST完成时触发的OnSuccess回调。

此回调可以重新查询您的列表,也可以只删除列表中未订阅的项目。

<% 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,如上所示。