如何告诉 Ajax.ActionLink OnSuccess 回调哪个元素启动了 ajax

【问题标题】：How to tell Ajax.ActionLink OnSuccess callback which element initiated the ajax如何告诉 Ajax.ActionLink OnSuccess 回调哪个元素启动了 ajax
【发布时间】：2011-10-11 19:39:12
【问题描述】：

我希望我的剃刀视图看起来像这样

@Ajax.ActionLink("A", "Buy", new AjaxOptions() { HttpMethod = "Post", OnSuccess = "updateLetter" }, new { id = "letter-A" })
@Ajax.ActionLink("B", "Buy", new AjaxOptions() { HttpMethod = "Post", OnSuccess = "updateLetter" }, new { id = "letter-B" })
@Ajax.ActionLink("C", "Buy", new AjaxOptions() { HttpMethod = "Post", OnSuccess = "updateLetter" }, new { id = "letter-C" })

我的 javascript 看起来像这样

function updateLetter(letter)
{
    $("#letter-" + letter).toggleClass('selected');
}

我的想法是，如果我单击 A 链接，它将执行 ajax 并切换该元素上的类。我不确定如何连接它。我错过了什么？

【问题讨论】：

标签： jquery asp.net-mvc-3 razor unobtrusive-javascript

【解决方案1】：

首先修复您的Ajax.ActionLink 重载，因为您的重载无法编译。

要传递参数，您可以这样做：

@Ajax.ActionLink(
    "A", 
    "About", 
    null,
    new AjaxOptions { 
        HttpMethod = "POST",
        OnSuccess = "updateLetter('A')" 
    }, 
    new { 
        id = "letter_A" 
    }
)

然后：

function updateLetter(letter)
{
    $("#letter-" + letter).toggleClass('selected');
}

我个人不是Ajax.* 助手的粉丝。我使用由标准 HTML ActionLink 组成的替代方法：

@Html.ActionLink(
    "A", 
    "About", 
    null,
    new { 
        @class = "letter"
        id = "letter_A" 
    }
)

我在一个单独的 javascript 文件中悄悄地 AJAXify：

$(function() {
    $('.letter').click(function() {
        var $letter = $(this);
        $.post(this.href, function(result) {
            $letter.toggleClass('selected');
        });
    });
});

【讨论】：