Wie man Ajax.ActionLink OnSuccess Callback, welches Element die Ajax initiiert sagen

Question

Ich möchte, dass meine Razor-Ansicht etwa so aussieht

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

und mein Javascript sollte in etwa so aussehen

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

die Idee ist, dass, wenn ich auf den A-Link klicken, wird es die Ajax tun und schalten Sie die Klasse auf das Element. Ich bin nicht sicher, genau, wie man es einhaken aber. Was übersehe ich?

Answer 1

Reparieren Sie zunächst Ihre Ajax.ActionLink Überladung, da Ihre nicht kompiliert werden kann.

Und zur Übergabe von Parametern könnte man dies tun:

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

und dann:

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

Persönlich bin ich kein Fan der Ajax.* Helfern. Ich verwende einen alternativen Ansatz, der aus einem Standard-HTML ActionLink :

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

die ich unauffällig in einer separaten Javascript-Datei AJAXifiziere:

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