I want my razor view to look something like this
@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" })
and my javascript to look something like this
function updateLetter(letter)
{
$("#letter-" + letter).toggleClass('selected');
}
the idea being that if I click the A link, it'll do the ajax and toggle the class on that element. I'm not sure exactly how to hook it up though. What am I missing?
First fix your Ajax.ActionLink
overload as yours won't compile.
And to pass parameters you could do this:
@Ajax.ActionLink(
"A",
"About",
null,
new AjaxOptions {
HttpMethod = "POST",
OnSuccess = "updateLetter('A')"
},
new {
id = "letter_A"
}
)
and then:
function updateLetter(letter)
{
$("#letter-" + letter).toggleClass('selected');
}
Personally I am not a fan of the Ajax.*
helpers. I use an alternative approach which consists of a standard HTML ActionLink
:
@Html.ActionLink(
"A",
"About",
null,
new {
@class = "letter"
id = "letter_A"
}
)
which I unobtrusively AJAXify in a separate javascript file:
$(function() {
$('.letter').click(function() {
var $letter = $(this);
$.post(this.href, function(result) {
$letter.toggleClass('selected');
});
});
});