什麼是使用ASP.NET MVC和jQuery實現AJAX的最佳方式？

Question

我想弄清楚一個AJAX調用來執行某些操作的最佳方法，然後執行一些jquery效果魔術來使它看起來像是發生了什麼。

這是基本思想：我有一個鏈接，當用戶點擊它時，我需要更新我的模型，以表明用戶對一個項目（在服務器端）感興趣。但是，我也想淡化鏈接（這是我製作的複選框圖像），改變類並將鏈接淡入。行爲如下所示：當您對某個項目不感興趣時​​，鏈接看起來像是空盒子，當你將鼠標懸停在它上面時，檢查出現，當他們點擊鏈接時，鏈接將消失並返回盒中的檢查，現在當它們懸停在它上面時，檢查消失（行爲反轉）。

我的問題是鏈接似乎無法跟蹤它在哪裏（無論它處於選中狀態還是未選中狀態）。

我試過這樣做的多種方式。

實例A：

<a href="#" onclick="oncheck(this,<%= item.ID %>)" class="notchecked"></a> 
<script> 
    function oncheck(link, itemId) 
    { 
     //the UI effects are working correctly 
     if ($(link).hasClass("notchecked") 
     {  
      $(link).fadeOut(); 
      $(link).removeClass("notchecked"); 
      $(link).addClass("checked"); 
      $(link).fadeIn("slow");     
     } 
     { 
      $(link).fadeOut(); 
      $(link).removeClass("checked"); 
      $(link).addClass("notchecked"); 
      $(link).fadeIn("slow");     
     } 

     //do ajax request using jquery 
     //I don't really care about the results right now 
     //This doesn't work though, it never hits my controller action 
     $.get("Item/ChangeCheckedStatus", { itemId: itemId }); 
    } 
</script> 

我也試圖與微軟的Ajax庫做這個

例B：

<%=Ajax.ActionLink(" ", 
    "Item", 
    "ChangeCheckedStatus", 
    new { itemId = item.ID }, 
    new AjaxOptions { UpdateTargetId="bogusTarget", OnSuccess = "oncheck" }, 
    new { @class="notchecked" }); 
<script> 
    function oncheck() 
    { 
     //the UI effects are not working correctly here 
     if ($(this).hasClass("notchecked") 
     {  
      $(this).fadeOut(); 
      $(this).removeClass("notchecked"); 
      $(this).addClass("checked"); 
      $(this).fadeIn("slow");     
     } 
     { 
      $(this).fadeOut(); 
      $(this).removeClass("checked"); 
      $(this).addClass("notchecked"); 
      $(this).fadeIn("slow");     
     }       
    } 
</script> 

與MS AJAX庫，我得到控制行動，並且該項目得到更新，但是然後jquery效果不起作用。

有沒有一種更簡單的方法來做我想要完成的事情，還是我只是在這裏忽略了一些明顯的東西？

UPDATE這是控制器動作的樣子：

public string ChangeCheckedStatus(long itemId) 
{ 
    //do some stuff 
    return "What is going on???"; 
} 

注：在控制器做工精細等動作，這只是這一個（這是通過AJAX使用BTW唯一的一個）。

Answer 1

當您使用AJAX調用某個動作並確定該動作從未運行（例如，動作開始時的斷點從未被命中）時，則應該始終查看Net選項卡Firebug或響應從Fiddler的服務器。有兩件事要檢查，在這裏：

1. 您的JavaScript調用的URL，包括查詢字符串參數，以及任何POST信息形式的信息。
2. MVC框架通常會爲您提供有關爲何無法綁定到特定操作的信息消息，因此請查找此信息以及服務器的響應。

Answer 2

嘗試這樣：

$.get('Item/ChangeCheckedStatus', { itemId: itemId } , 'html', function() { 
    if ($(this).hasClass("notchecked") 
    {  
     $(this).fadeOut(); 
     $(this).removeClass("notchecked"); 
     $(this).addClass("checked"); 
     $(this).fadeIn("slow");     
    } 
    { 
     $(this).fadeOut(); 
     $(this).removeClass("checked"); 
     $(this).addClass("notchecked"); 
     $(this).fadeIn("slow");     
    }    
}); 

Answer 3

jQuery的$就方法可以讓你的反應，如果Ajax調用成功。呼叫成功後運行動畫。

$.ajax({ 
    type: 'GET', 
    url: 'Item/ChangeCheckedStatus', 
    dataType: 'html', 
    data: { itemId: itemId }, 
    success: function(response){ 
    if(response == "success") { 
     onCheck(); 
    } 
    } 
}); 

function onCheck() { 
    if ($(this).hasClass("notchecked") 
    {  
     $(this).fadeOut(); 
     $(this).removeClass("notchecked"); 
     $(this).addClass("checked"); 
     $(this).fadeIn("slow");     
    } 
    { 
     $(this).fadeOut(); 
     $(this).removeClass("checked"); 
     $(this).addClass("notchecked"); 
     $(this).fadeIn("slow");     
    }    
} 

Answer 4

你可以在控制器中放置一個斷點來確保它被調用嗎？如果不是的話，也許會出現路由問題...

Answer 5

您應該使用daddywoodland建議的ajax方法。當AJAX調用成功時，將調用成功方法。但是，此引用不會引用您的鏈接，而是引用窗口。這是因爲，當成功方法異步調用時，您不在原始onclick處理程序的範圍內，因此該方法不再屬於該鏈接，因此此不再是鏈接，而是恢復到該窗口。這與上面的Microsoft AJAX庫示例基本相同。

然後，訣竅是在onclick方法中將成功方法聲明爲閉包，並將閉包引用到鏈接。我測試了下面的代碼，它的工作原理。我在服務器端操作中放置了一個斷點，並且它被擊中。

<script type="text/javascript" src="../../Scripts/jquery-1.2.6.js"></script> 
<a href="#" onclick="onLinkClick(this, 44)" class="notchecked">Click here...</a> 
<script type="text/javascript"> 
    // Standard onclick handler. 
    function onLinkClick(link, itemId) { 

     // the function called asynchronously when the AJAX works 
     var onCheck = function() { 
      if ($(link).hasClass("notchecked")) { 
       $(link).fadeOut(); 
       $(link).removeClass("notchecked"); 
       $(link).addClass("checked"); 
       $(link).fadeIn("slow"); 
      } 
      else { 
       $(link).fadeOut(); 
       $(link).removeClass("checked"); 
       $(link).addClass("notchecked"); 
       $(link).fadeIn("slow"); 
      } 
     } 

     // do the AJAX 
     $.ajax({ 
      type: 'GET', 
      url: 'Item/ChangeCheckedStatus', 
      dataType: 'html', 
      data: { itemId: itemId }, 
      success: function(response) { 
       onCheck(); 
      } 
     }); 
    } 
</script> 

您應該可以複製並粘貼此文件。所以讓我知道如果它不起作用。