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>