Question

我正在试图找出进行AJAX调用以执行某些操作的最佳方法，然后执行一些jquery效果魔法使其看起来像正在发生的事情。

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

我的问题是链接似乎无法跟踪它的位置（无论是处于检查状态还是未检查状态）。

我尝试过多种方式。

示例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>

我也尝试过使用Microsoft 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使用的）。

Answer 1

您应该使用daddywoodland建议的ajax方法。当AJAX调用成功时，将调用success方法。但是，此引用不会引用您的链接，而是引用窗口。这是因为在异步调用success方法时，你超出了原始onclick处理程序的范围，因此该方法不再由链接拥有，因此此不再是链接而是恢复到窗口。这与上面的Microsoft AJAX库示例基本相同。

然后，诀窍是将success方法声明为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>

您应该可以复制并粘贴此内容。如果它不起作用，请告诉我。

Answer 2

当您使用AJAX调用操作，并确定操作永远不会运行时（例如，操作开始时的断点永远不会被命中），那么您应该始终查看Net选项卡Firebug或来自Fiddler中的服务器。这里要检查两件事：

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

Answer 3

尝试这样的事情：

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

Answer 4

jQuery $ .ajax方法允许您在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");                
    }               
 }

Answer 5

你能在控制器中加一个断点来确保它被调用吗？如果不是，也许是路由问题...

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

5 个答案: