Как создать кнопку Toggle с помощником Ajax на MVC

Question

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

Работает так, как есть, но мне нужно обновить страницу, чтобы перейти к кнопке «Добавить избранный» в «Удалить любимый» вид значков.

Мой уродливый код из представления идет здесь.

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

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