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

Question

假设我有一个用户列表：

用户/索引.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通过更改and来 使用单个 Ajax.ActionLinkactionName也可以。

这可以纯粹用 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 的方法（类似于这个答案）可以完成工作。结果是这样的：

用户/索引.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 部分

@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 是必要的。