How to Ajaxify a hyperlink (JQuery & Ajax) - asp.net-mvc-2

Question

I have to dynamically populate content into a DIV on clicking a hyperlink which should pass a value (code) to retrieve the content from server.
How can I achieve this using JQuery, Ajax and Hyperlink? I know how to retrieve content from server using JQuery & Ajax but I am struggling on how to Ajaxify an hyperlink and pass a value?

Answer 1

Well, you could start by giving this link an unique id so that you could reference it from client scripts:
<%= Html.ActionLink(
"link text",
"action",
"controller",
null,
new { id = "myLink" }
) %>
and then you could unobtrusively AJAXify it in a separate file javascript file:
$(function() {
$('#myLink').click(function() {
$.ajax({
url: this.href,
success: function(result) {
// TODO: handle the results here
}
});
return false;
});
});
Of course if the result of this action is a partial view HTML that you would like to inject on some placeholder in the DOM you could use the .load() method:
$(function() {
$('#myLink').click(function() {
$('#result').load(this.href);
return false;
});
});
YAnd if you want to pass some additional values with the AJAX request:
$.ajax({
url: this.href,
data: { someParam: 'some value', someOtherParam: 'some other value' },
success: function(result) {
// TODO: handle the results here
}
});