Как создать кнопку переключения с помощью Ajax Helper на MVC

Question

Я добавляю эту небольшую функциональность в избранные элементы на веб-сайте MVC и испытываю некоторые трудности при разработке со стороны пользовательского интерфейса. Я уже изменил обработку и сторону базы данных изменений.

Он работает как есть, но мне нужно обновить страницу, чтобы увидеть, как кнопка меняется на "Добавить избранное" на "Удалить избранное".

Мой уродливый код из View идет здесь.

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

Answer 1

Поскольку вас не интересует, что возвращается, вы можете выполнить технику переключения:

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

Посмотреть

<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 type="text/javascript">
    function ToggleFavouriteLink() {
        $(".favourites").toggleClass("active");
    }
</script>