jquery - 如何用另一个 Ajax.ActionLink 替换(或更新)一个 Ajax.ActionLink？

Question

假设我有一个用户列表:

用户/Index.cshtml

@model IEnumerable<MvcHoist.Models.UserProfileViewModel>

<table>
    @foreach (var user in Model)
    {
        @Html.Partial("_User", user)
    }
</table>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

...并且(使用部分)每个用户旁边是“关注”或“取消关注”链接(视情况而定):

_User.cshtml部分

@model MvcHoist.Models.UserProfileViewModel
<tr>
    <td>
        @if (Model.IsFollowed)
        {
            @Ajax.ActionLink("Unfollow", "Unfollow", new { id = Model.UserProfile.UserId }, new AjaxOptions
               {
                   HttpMethod = "POST"
               })
        }
        else
        {
            @Ajax.ActionLink("Follow", "Follow", new { id = Model.UserProfile.UserId }, new AjaxOptions
               {
                   HttpMethod = "POST"
               })
        }
    </td>
</tr>

在关注操作成功完成后，如何将“关注”Ajax.ActionLink 替换为“取消关注”Ajax.ActionLink？ 通过更改 linkText 来使用单个 Ajax.ActionLink 和 actionName 也可以。

这可以纯粹使用 Ajax.ActionLink 来完成(无需深入研究 jQuery)吗？动画化改变会更好。

Answer 1

渲染两个链接，而不是 @if (...) 条件，但使用“display:none;”样式渲染第二个链接。

样式属性可能如下所示:

..., new { style="display:@(Model.IsFollowed ? "block" : "none")" }, ...
..., new { style="display:@(Model.IsFollowed ? "none" : "block")" }, ...

添加一个 OnComplete 处理程序或一点 jQuery(或替代方案)以在成功时切换两个链接。

对于动画，您可以使用 jQuery fadeIn() 和 fadeOut() 函数。