Question

我有一个ASP.NET MVC应用程序，其主题页面显示了帖子列表。用户可以“订阅”任何主题，我希望通过单击图像来实现此功能，以打开/关闭其订阅。订阅状态的变化需要通过此图像的变化来反映（订阅时的照明图像，不存在时的图像灰色）。

图像将通过CSS呈现（我正在使用sprites.png文件，只需指定“subscribe-on”或“subscribe-off”作为锚点/图像的类名称标记）。

我在MVC下使用AJAX的经历非常有限，所以我希望有人可以推荐如何最好地实现这一目标？我理解它可能如何工作的一般概念（我可以使用jQuery将ajax调用绑定到图像的click事件，执行服务器端操作，然后我基本上想要更改分配给该图像的类（到'subscribe-on'如果用户现在订阅了等等）但我不熟悉实现它的底层代码。

我还希望切换包装图片的锚标记的title文本，以便提示用户“点击订阅”或“点击取消订阅”。

Answer 1

就像你说的那样，你需要的步骤是：

绑定到图片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        
}

使用AJAX，MVC和jQuery切换图形？

1 个答案: