2011-07-23 13 views
6

chcę mój widok maszynki do wyglądać takJak powiedzieć Ajax.ActionLink onSuccess zwrotnego, który element zainicjowanego Ajax

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

i mojego javascript, aby wyglądać jak ten

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

idea będąc, że jeśli kliknę link A, zrobi to ajax i przełączy klasę na ten element. Nie jestem jednak pewien, jak to podłączyć. czego mi brakuje?

Odpowiedz

7

Najpierw napraw swoje przeciążenie Ajax.ActionLink, ponieważ twoje nie skompiluje się.

I przekazać parametry można to zrobić:

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

, a następnie:

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

Osobiście nie jestem fanem Ajax.* pomocników. Używam alternatywne podejście, które składa się ze standardowego HTML ActionLink:

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

które dyskretnie AJAXify w oddzielnym pliku javascript:

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