使用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切换图形？

回答

相关问题