If we have to create an application that uses Ajax to
dynamically get and manage data in an MVC 3 project we have to create a
controller action that will deal with the Ajax request and an Ajax call at the
user interface level which will call the action and manage the output. To
implement this we first need to write down the following controller action.
Controller:
public class HomeController : Controller
{
public ActionResult TestAjax(string
input)
{
List<string> output = new List<string>(){"a","b","c"};
output.Add(input);
return
Json(output, JsonRequestBehavior.AllowGet);
}
}
This is just like a
normal controller action which takes input in the form of a string (called
input), appends it to the list ‘output’ and returns the result as a JSon object
(instead of a view which typical controllers return).
After this we need to
write the following jQuery code to call this action and manage its result.
jQuery:
$(document).ready(function
() {
$(".link").click(function
() {
$.ajax({
type: "GET",
url: "/Home/TestAjax",
data: {input: "d"},
dataType: "json",
success: function(data) {
alert(data);
}
});
});
});
In the code above we have a javascript function that is
executed whenever we click the control with class "link".
This function creates a GET request to the url “…/Home/TestAjax” (which you might
have noticed are the names of the controller and action we created above) and
passes "d" to the actions’ input parameter “input”.
The controller then creates a list containing "a,b,c"
and appends the input parameter "d" to it and returns the
final string i.e "a,b,c,d" as a JSon object. Once the
controller successfully returns this output, the javascript function in the “success” parameter
is executed, which gets the output provided by the action in its own variable “data” and
shows it as an alert as shown below:
And that is it, a simple Ajax call made.
P.S: You might have noticed that this code is added to the
document.ready function. This is done because if we don’t place it there we
would have to specifically add it to the control’s onclick event.
