1

ユーザーのリストがあるとしましょう：

ユーザー/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と を変更して単一の Ajax.ActionLink を使用するactionNameことも問題ありません。

これは純粋に Ajax.ActionLink で (jQuery に深く入り込むことなく) 実行できますか? 変更をアニメーション化すると、さらに効果的です。

4

2 に答える 2

2

@if (...) 条件の代わりに、両方のリンクをレンダリングしますが、2 番目のリンクを「display:none;」のスタイルでレンダリングします。

スタイル属性は次のようになります。

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

OnComplete ハンドラーまたは少しの jQuery (または代替) を追加して、成功時に両方のリンクを切り替えます。

アニメーションには、jQuery の fadeIn() および fadeOut() 関数を使用できます。

于 2013-10-30T17:23:41.420 に答える