Переключение графики с использованием AJAX, MVC и jQuery?

Question

У меня есть приложение ASP.NET MVC с тематической страницей, которая показывает список сообщений. Пользователь может «подписаться» на любую тему, и я хочу, чтобы это было достигнуто путем нажатия на изображение, чтобы включить или отключить свою подписку. Изменение их статуса подписки должно быть отражено через изменение этого изображения (подсвеченное изображение, когда они подписаны, серое изображение, когда их нет).

Изображение будет отображаться с помощью CSS (для этого я использую файл sprites.png и просто укажу 'subscribe-on' или 'subscribe-off' в качестве имени класса для тега привязки / изображения).

Мой опыт работы с AJAX под MVC крайне ограничен, поэтому я надеюсь, что кто-то может порекомендовать, как наилучшим образом добиться этого? Я понимаю общую концепцию того, как это может работать (я мог бы использовать jQuery, чтобы связать ajax-вызов с событием click изображения, которое выполняет операцию на стороне сервера, тогда я по сути хочу изменить класс, назначенный этому изображению (на «подписаться», если пользователь теперь подписан и т. д.), но я не знаком с базовым кодом для его достижения.

В идеале я также хотел бы переключить текст title тега привязки, обертывающего изображение, поэтому он предлагает пользователю либо «щелкнуть, чтобы подписаться», либо «щелкнуть, чтобы отписаться».

Answer 1

Как вы сказали, вам нужно выполнить следующие шаги:

1. Привязать к событию клика на изображении http://api.jquery.com/click/
2. Сделать ajax-запрос на обновление данных на сервере http://api.jquery.com/jQuery.post/
3. Обработка ajax-запроса на сервере.
4. Изменить класс изображения в функции обратного вызова http://api.jquery.com/toggleClass/
5. Изменить заголовок изображения в функции обратного вызова 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 без Ajax

MVC:

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