什么是使用ASP.NET MVC和jQuery实现AJAX的最佳方式？

我想弄清楚一个AJAX调用来执行某些操作的最佳方法，然后执行一些jquery效果魔术来使它看起来像是发生了什么。什么是使用ASP.NET MVC和jQuery实现AJAX的最佳方式？

这是基本思想：我有一个链接，当用户点击它时，我需要更新我的模型，以表明用户对一个项目（在服务器端）感兴趣。但是，我也想淡化链接（这是我制作的复选框图像），改变类并将链接淡入。行为如下所示：当您对某个项目不感兴趣时，链接看起来像是空盒子，当你将鼠标悬停在它上面时，检查出现，当他们点击链接时，链接将消失并返回盒中的检查，现在当它们悬停在它上面时，检查消失（行为反转）。

我的问题是链接似乎无法跟踪它在哪里（无论它处于选中状态还是未选中状态）。

我试过这样做的多种方式。

实例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唯一的一个）。

来源

2009-09-10 Joseph

你可以显示具有任何属性的操作声明吗？顺便说一句，你应该总是用POST更新数据，而不是GET。 – 2009-09-10 14:29:37

另外，你有没有看过Firebug Net面板或Fiddler中的服务器响应？它说什么。 – 2009-09-10 14:30:09

@克雷格当然我会更新问题。至于POST，我打算将其更改为POST，我只是试图让它工作第一= P – Joseph 2009-09-10 14:43:11

当您使用AJAX调用某个动作并确定该动作从未运行（例如，动作开始时的断点从未被命中）时，则应该始终查看Net选项卡Firebug或响应从Fiddler的服务器。有两件事要检查，在这里：

您的JavaScript调用的URL，包括查询字符串参数，以及任何POST信息形式的信息。
MVC框架通常会为您提供有关为何无法绑定到特定操作的信息消息，因此请查找此信息以及服务器的响应。

来源

2009-09-11 13:03:40

这样做的窍门...我的问题是url解析为http：// localhost/Item/ChangeCheckedStatus而没有采用考虑到我的网站所在的虚拟目录，所以它应该是http：// localhost/MySite/Item/ChangeCheckedStatus。我最终使用ASP.NET MVC的Url.Action来获取正确的路径并将它传递给jquery之后一切正常。 – Joseph 2009-09-11 13:06:29

尝试这样：

$.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");     
    }    
});

来源

2009-09-10 14:08:32 CitizenBane

如果我不能让$ .get在没有回调的情况下工作，为什么回调会有所作为？无论哪种方式，感谢您的建议，但我实际上已经尝试过，它没有工作=（ – Joseph 2009-09-10 14:11:32

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");     
    }    
}

来源

2009-09-10 15:36:56 daddywoodland

你可以在控制器中放置一个断点来确保它被调用吗？如果不是的话，也许会出现路由问题...

来源

2009-09-10 16:11:24 scottm

是的，我已经尝试过，它并没有受到打击，我只是不明白为什么它是一个路由问题因为所有其他链接正在工作 – Joseph 2009-09-10 16:21:14

在Action方法中是否存在AcceptKeyword属性？ – scottm 2009-09-10 18:30:09

您应该使用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>

您应该可以复制并粘贴此文件。所以让我知道如果它不起作用。

来源

2009-09-10 22:36:26

什么是使用ASP.NET MVC和jQuery实现AJAX的最佳方式？

回答

相关问题