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

Follow操作成功完成後，如何將「Follow」Ajax.ActionLink替換爲「Unfollow」Ajax.ActionLink？通過更改linkText和actionName也可以使用單個Ajax.ActionLink。

這可以純粹用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部分

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