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

What does your `Favourite/Add` and `Favourite/Delete` return ? — MK., Jan 15 '14 at 21:04
@MK. nothing apparently sir. what should i return? the whole anchor tag whatever Ajax.ActionLink renders? — Laurence, Jan 15 '14 at 21:15

MK. · Accepted Answer · 2014-01-15T22:59:22.633

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>

It works great. MK. Just a small problem. The image is not click-able. I am trying to fix it now. — Laurence, Jan 16 '14 at 09:57
@LaurenceNyein this due to your style, to fix it: first remove `text-indent: -9999px;` and then add `.favourites a { display: inline-block;width: 100%;height: 100%;}` and update the helper to `@Ajax.ActionLink(" ", ...` make sure it has space, as empty string will throw an exception. — MK., Jan 16 '14 at 10:22

How to create Toggle button with Ajax Helper on MVC

1 Answers1