使用ASP实现AJAX的最佳方式是什么?净MVC和jquery吗?

I'm trying to figure out the best way to make an AJAX call to perform some action, and then do some jquery effect magic to make it look like something is happening.

我正在尝试找出执行一些操作的AJAX调用的最佳方式，然后使用一些jquery特效使它看起来像是正在发生的事情。

This is the basic idea: I have a link that when the user clicks it I need to update my model to say that the user is interested in an item (on the server side). However, I would also like to fade out the link (it's a checkbox image I made), change classes around and then fade the link back in. Behavior is like this: when you're not interested in an item the link looks like an empty box, when you hover over it the check appears, when they click on it the link fades out and comes back with the check in the box, and now when they hover over it the check disappears (the behavior reverses).

这是基本思想:我有一个链接，当用户单击它时，我需要更新我的模型，表明用户对某个项目(在服务器端)感兴趣。但是，我还想淡出链接(这是我创建的一个复选框图像)，改变类，然后将链接淡入。行为是这样的:当你不感兴趣的一个项目的链接看起来像一个空盒子,在你鼠标经过它时检查出现,当他们点击链接消失,回来的检查框,现在当他们在检查消失(逆转)的行为。

My problem is the link doesn't seem to be able to keep track of where it is (whether its in a checked state or an unchecked state).

我的问题是链接似乎不能跟踪它的位置(无论是在检查状态还是未检查状态)。

I've tried doing this multiple ways.

我尝试过多种方法。

Example 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>

I've also tried doing this with Microsoft Ajax libraries

我还尝试过使用Microsoft Ajax库进行此操作

Example B:

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

With the MS AJAX libraries, I get to the controller action, and the item gets updated, but then the jquery effects don't work.

有了MS AJAX库，我就可以使用controller操作，并对条目进行更新，但是jquery效果就不起作用了。

Is there an easier way to do what I'm trying to accomplish or am I just missing something obvious here??

有没有更简单的方法来完成我想要完成的事情，或者我只是错过了一些显而易见的事情?

UPDATE This is what the controller action looks like:

更新控制器动作如下:

public string ChangeCheckedStatus(long itemId)
{
    //do some stuff
    return "What is going on???";
}

Note: other actions in the controller work fine, it's just this one (which is the only one used via AJAX btw).

注意:控制器中的其他操作可以正常工作，就是这个(顺便说一句，它是唯一通过AJAX使用的操作)。

5 个解决方案

#1

When you call an action with AJAX, and determine that the action is never run (e.g., a breakpoint at the start of the action is never hit), then you should always look at the Net tab Firebug, or the response from the server in Fiddler. There are two things to examine, here:

当您使用AJAX调用一个操作时，并确定该操作永远不会运行(例如，在操作开始时的断点不会被执行)，那么您应该经常查看Net选项卡Firebug，或者从服务器的Fiddler中得到响应。这里有两点需要检验:

1. The URL that your JavaScript called, including query string parameters, and any information in a POSTed form.
2. 您的JavaScript调用的URL，包括查询字符串参数和任何发布表单中的信息。
3. The MVC framework usually gives you informative messages about why it could not bind to a particular action, so look for this information and the response from the server.
4. MVC框架通常会向您提供关于为什么它不能绑定到特定操作的信息，因此请查找这些信息和服务器的响应。

#2

You should use the ajax method as suggested by daddywoodland. The success method will be called when the AJAX call is successful. However, the this reference will not refer to your link but the window instead. This is because by the time the success method is asynchronously called you're outside the scope of the original onclick handler and therefore the method is no longer owned by the link, hence this is no longer the link but reverts to the window. This was essentially the same problem as your Microsoft AJAX library example above.

您应该使用daddywoodland建议的ajax方法。当AJAX调用成功时，将调用success方法。但是，这个引用不会指向您的链接，而是指向窗口。这是因为，当成功方法被异步调用时，您已经超出了原始onclick处理程序的范围，因此该方法不再属于链接，因此不再是链接，而是返回到窗口。这与上面的Microsoft AJAX库示例本质上是相同的问题。

The trick, then, is to declare the success method as a closure inside your onclick method and have that closure refer to the link. I've tested the code below and it works. I placed a breakpoint on the server side action and it was hit.

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

You should be able to copy and paste this. So let me know if it doesn't work.

您应该能够复制和粘贴这个。如果不行，请告诉我。

#3

Try something like this:

试试这样:

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

#4

The jQuery $.ajax method allows you to react if the ajax call was successful. Run your animation once the call has succeeded.

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

#5

Can you put a break point in the controller to make sure it's being called? Maybe a routing problem if not...

你能在控制器中放置一个断点来确保它被调用吗?如果不是的话，可能是路由问题……