title: How to create Toggle button with Ajax Helper on MVC
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>My ugly code from the View goes here.</p>
  
  <pre><code>@{
      if(ViewBag.IsFavourited == true)
      { 
          &lt;script type="text/javascript"&gt;
              $(function () {
                  $("#addfavourite").hide();
              });
          &lt;/script&gt;
      }
      else
      {
          &lt;script type="text/javascript"&gt;
              $(function () {
                  $("#deletefavourite").hide();
              });
          &lt;/script&gt;
      }
  }   
  
  &lt;div id="deletefavourite" class="pull-right"&gt;
      @Ajax.ActionLink("Unfavourite", "Delete", "Favourite", new { id = Model.BlogPostId },
              new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "deletefavourite", LoadingElementId = "addfavourite" }, new { @class = "deletefavourite" })
  &lt;/div&gt;
  
  &lt;div id="addfavourite" class="pull-right"&gt;
      @Ajax.ActionLink("Add to favourites", "Add", "Favourite", new { id = Model.BlogPostId },
              new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "addfavourite", LoadingElementId = "deletefavourite" }, new { @class = "addfavourite" })
  &lt;/div&gt;
  </code></pre>
  
  <p>Code from Controller if you may need to see this as well</p>
  
  <pre><code>public ActionResult Details(int id)
      {               
          BlogPostViewModel blogpost = waclient.GetBlogPostById(id);
  
          Favourite favourite = blogpost.Favourites.SingleOrDefault(u =&gt; u.BlogPostBlogPostId == blogpost.BlogPostId &amp;&amp; u.UserId == User.Identity.Name);
  
          if (favourite != null)
          {
              ViewBag.IsFavourited = true;
          }
          else
          {
              ViewBag.IsFavourited = false;
          }
  
          if (blogpost == null)
          {
              return HttpNotFound();
          }
          return View(blogpost);
      }
  </code></pre>
  
  <p>CSS to make the Links as Icons</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  
  .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;
  }
  </code></pre>
  
  <p></p>