如何用另一个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 partial

@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>

如何在Follow操作成功完成后用“取消关注”Ajax.ActionLink替换“Follow”Ajax.ActionLink？通过更改{{1}使用单个Ajax.ActionLink和linkText也没关系。

这可以完全用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（）函数。

Answer 2

虽然我会喜欢纯粹的Ajax.ActionLink解决方案（如果可能的话），但@ SimonGoldstone更多基于jQuery的方法（similar to this answer）可以完成工作。结果如下：

用户/ Index.cshtml

@model IEnumerable<MvcHoist.Models.UserProfileViewModel>

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

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

    <script>
        var toggleFollowUnfollowLinks = function (followLink, unfollowLink) {
            // based on https://stackoverflow.com/a/5545969/103058 and https://stackoverflow.com/a/19689745/103058
            var fout = followLink.is(":visible") ? followLink : unfollowLink;
            var fin = !followLink.is(":visible") ? followLink : unfollowLink;

            fout.fadeOut("fast", function () {
                fin.fadeIn();
            });
        };
    </script>
}

_User.cshtml partial

@model MvcHoist.Models.UserProfileViewModel

@{
    var unfollowLinkId = Guid.NewGuid().ToString();
    var followLinkId = Guid.NewGuid().ToString();
    var onSuccess = String.Format("toggleFollowUnfollowLinks($('#{0}'), $('#{1}'))", followLinkId, unfollowLinkId);
}

<tr>
    <td>
        @Ajax.ActionLink("Unfollow", "Unfollow", new { id = Model.UserProfile.UserId }, new AjaxOptions
               {
                   HttpMethod = "POST",
                   OnSuccess = @onSuccess
               }, new { id = @unfollowLinkId, @style = @Model.IsFollowed ? "display:block" : "display:none" })

        @Ajax.ActionLink("Follow", "Follow", new { id = Model.UserProfile.UserId }, new AjaxOptions
               {
                   HttpMethod = "POST",
                   OnSuccess = @onSuccess
               }, new { id = @followLinkId, @style = !@Model.IsFollowed ? "display:block" : "display:none" })
    </td>
</tr>

生成唯一ID（使用Guid.NewGuid（））是必要的，以防止对例如影响第一行Ajax.ActionLink的第三行。