如何在MVC上使用Ajax Helper創建切換按鈕

Question

我在MVC網站上將這個小功能添加到收藏項目，並在UI端開發它時遇到一些困難。我已經改變了處理和數據庫方面的變化。

它的工作原理是這樣，但我需要刷新頁面才能看到按鈕更改爲「添加最愛」到「刪除最喜歡的」圖標。

從視圖我的醜陋的代碼在這裏。從控制器

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