使用AJAX，MVC和jQuery切換圖形？

我有一個ASP.NET MVC應用程序，其主題頁面顯示了帖子列表。用戶可以「訂閱」任何主題，並且我希望通過點擊圖像來實現這個目的，以打開/關閉他們的訂閱。訂閱狀態的變化需要通過這張圖片的變化來反映出來（當他們訂閱時照亮圖片，當他們沒有訂閱時變成灰色圖片）。使用AJAX，MVC和jQuery切換圖形？

圖像將通過CSS呈現（我爲此使用了sprites.png文件，並將只指定'subscribe-on'或'subscribe-off'作爲anchor/image標記的類名稱）。

我在MVC下使用AJAX的經驗非常有限，所以希望有人能推薦如何最好地實現這一點？我理解它如何工作的一般概念（我可以使用jQuery將ajax調用綁定到執行服務器端操作的圖像的click事件，然後我基本上想要將分配給該圖像的類更改爲'訂閱'，如果用戶現在訂閱等），但我不熟悉底層代碼來實現它。

我也希望切換包裹圖像的錨標記的title文本，所以它會提示用戶或者「點擊訂閱」或「點擊退訂」

來源

2011-08-31 marcusstarnes

我想你應該看看ASP.NET MVC NerdDinner項目http://weblogs.asp.net/scottgu/archive/2009/04/28/free-asp-net-mvc-nerddinner-tutorial-now -in-html.aspx這個通過jQuery和MicrosoftAjax的AJAX的一些基礎知識 –

就像你說的，你需要的步驟是：

綁定到點擊圖片事件http://api.jquery.com/click/
使得Ajax請求，以更新服務器上的數據在服務器http://api.jquery.com/jQuery.post/
處理Ajax請求。
變化類圖像的回調函數圖像的http://api.jquery.com/toggleClass/
變化標題中的回調函數http://api.jquery.com/attr/

實施例：

$('#subscribeimg').click(function() { 
    var that = $(this); 
    var id = // get id for topic 
    $.post('controller/action', { id: id }, function() {    
     that.toggleClass('subscribe-off subscribe-on'); 
     that.attr('title', that.hasClass('subscribe-on') ? 'click to unsubscribe' : 'click to subscribe'); 
    }); 
});

JS Fiddle Example without Ajax

MVC：

public ActionResult Subscribe(int id) 
{ 
    // Update database to subscribe/unsubscribe   
}

來源

2011-08-31 10:02:24

感謝理查德，這幾乎適用於我使用上述。我點擊訂閱方法並根據需要執行數據庫任務 - 您是否能夠確認我應該從Subscribe ActionResult方法傳回的內容？我現在已經設置爲簡單地返回一個布爾（無論他們現在是否已訂閱），並且正確地切換圖形時，title屬性根本沒有改變 - 我應該從Subscribe ActionResult返回一個不同的響應方法（而不是來自簡單的布爾函數的真/假）？ – marcusstarnes

如果課程改變，標題也應該改變。我添加了一個jsfiddle示例，它可以在沒有ajax請求的情況下執行此操作。您不需要從您的操作中返回任何內容，因爲jQuery代碼只是檢查了該類，看看它是否已訂閱。 –

全部排序，謝謝理查！ – marcusstarnes

使用AJAX，MVC和jQuery切換圖形？

回答

相關問題