css - MVC で Ajax Helper を使用してトグル ボタンを作成する方法

Question

この小さな機能を MVC Web サイトのお気に入りのアイテムに追加していますが、UI 側での開発に問題があります。私はすでに変更の処理とデータベース側を変更しました。

そのまま機能しますが、ボタンが「お気に入りの追加」から「お気に入りの削除」のようなアイコンに変わるのを確認するには、ページを更新する必要があります。

ビューからの私の醜いコードはここにあります。

@{
    if(ViewBag.IsFavourited == true)
    { 
        <script type="text/javascript">
            $(function () {
                $("#addfavourite").hide();
            });
        </script>
    }
    else
    {
        <script type="text/javascript">
            $(function () {
                $("#deletefavourite").hide();
            });
        </script>
    }
}   

<div id="deletefavourite" class="pull-right">
    @Ajax.ActionLink("Unfavourite", "Delete", "Favourite", new { id = Model.BlogPostId },
            new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "deletefavourite", LoadingElementId = "addfavourite" }, new { @class = "deletefavourite" })
</div>

<div id="addfavourite" class="pull-right">
    @Ajax.ActionLink("Add to favourites", "Add", "Favourite", new { id = Model.BlogPostId },
            new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "addfavourite", LoadingElementId = "deletefavourite" }, new { @class = "addfavourite" })
</div>

これも見る必要がある場合は、コントローラーからのコード

public ActionResult Details(int id)
    {               
        BlogPostViewModel blogpost = waclient.GetBlogPostById(id);

        Favourite favourite = blogpost.Favourites.SingleOrDefault(u => u.BlogPostBlogPostId == blogpost.BlogPostId && u.UserId == User.Identity.Name);

        if (favourite != null)
        {
            ViewBag.IsFavourited = true;
        }
        else
        {
            ViewBag.IsFavourited = false;
        }

        if (blogpost == null)
        {
            return HttpNotFound();
        }
        return View(blogpost);
    }

リンクをアイコンにするCSS

<style type="text/css">

.addfavourite {
    background-image: url('@Url.Content("~/Content/Images/heart-black.png")');
    background-repeat: no-repeat; 
    display: block;
    text-indent: -9999px;
    height: 50px;
    width: 50px;
}

.deletefavourite {
    background-image: url('@Url.Content("~/Content/Images/heart-checked.png")');
    background-repeat: no-repeat;    
    display: block;
    text-indent: -9999px;
    height: 50px;
    width: 50px;
}