Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>While I would have liked a pure Ajax.ActionLink solution (if possible), @SimonGoldstone's more jQuery-based approach (<a href="https://stackoverflow.com/a/5545969/103058">similar to this answer</a>) gets the job done. Here's how it turned out:</p> <p><strong>User/Index.cshtml</strong></p> <pre><code>@model IEnumerable&lt;MvcHoist.Models.UserProfileViewModel&gt; &lt;table&gt; @foreach (var user in Model) { @Html.Partial("_User", user) } &lt;/table&gt; @section Scripts { @Scripts.Render("~/bundles/jqueryval") &lt;script&gt; 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(); }); }; &lt;/script&gt; } </code></pre> <p><strong>_User.cshtml partial</strong></p> <pre><code>@model MvcHoist.Models.UserProfileViewModel @{ var unfollowLinkId = Guid.NewGuid().ToString(); var followLinkId = Guid.NewGuid().ToString(); var onSuccess = String.Format("toggleFollowUnfollowLinks($('#{0}'), $('#{1}'))", followLinkId, unfollowLinkId); } &lt;tr&gt; &lt;td&gt; @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" }) &lt;/td&gt; &lt;/tr&gt; </code></pre> <p>Generating unique IDs (using Guid.NewGuid()) was necessary to prevent an action on e.g. the third row from affecting the Ajax.ActionLink in the first row.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload