How to create Toggle button with Ajax Helper on MVC

Question

I am adding this small functionality to favourite items on a MVC website and having some difficulties developing it on the UI side. I already have changed the processing and database side of the change.

It works as it is but I need to refresh the page to see the button changes to 'Add favourite' to 'Delete favourite' sort of icons.

My ugly code from the View goes here.

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

Code from Controller if you may need to see this as well

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 to make the Links as Icons

<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;
}

Answer 1

Since you are not interested in what is returned, then you can perform a toggle technique :

CSS

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

View

<div class="favourites pull-right @(ViewBag.IsFavourited ? "active" : "")">
    <div class="add">
        @Ajax.ActionLink("Add to favourites", "Add", "Favourite",
        new { id = Model.BlogPostId },
        new AjaxOptions { OnSuccess = "ToggleFavouriteLink" })
    </div>
    <div class="delete">
        @Ajax.ActionLink("Unfavourite", "Delete", "Favourite",
        new { id = Model.BlogPostId },
        new AjaxOptions {OnSuccess = "ToggleFavouriteLink" })
    </div>
</div>

Script

<script type="text/javascript">
    function ToggleFavouriteLink() {
        $(".favourites").toggleClass("active");
    }
</script>