HTML and CSS Reference
In-Depth Information
Using the jQuery $.ajax() Method in an MVC Application
Working with MVC applications and calling server-side code from jQuery is simple. You don't need to
create a separate service (of course, you can if you so wish). Instead, you can encapsulate the code in a
controller action method. For example, Listing 2-17 shows the Convert() action method that encapsulates
the temperature-conversion logic.
Listing 2-17. Convert() Action Method in an MVC Controller
public JsonResult Convert(TemperatureData t)
if (t.Unit == "C")
t.Value = (t.Value * 1.8m) + 32;
t.Unit = "F";
t.Value = (t.Value - 32) / 1.8m;
t.Unit = "C";
return Json(t);
As you can see, the Convert() action method accepts a parameter of type TemperatureData and returns
a JsonResult . The JsonResult class wraps a return value in JSON format. Notice how the JsonResult object
is returned using ASP.NET MVC's Json() method; this method accepts data to be returned and converts it
into JSON format.
You can call the Convert() action method from the client side by writing the jQuery code shown in
Listing 2-18.
Listing 2-18. Calling a Controller Action Method Through $.ajax() ()
$(document).ready(function () {
$("#Button1").click(function () {
url = "/Home/Convert";
data = '{ Value: "' + $("#Text1").val() + '", Unit: "' + $("#Select1").val() + '" }';
type: "POST",
url: url,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
error: OnError
function OnSuccess(results) {
alert("Converted Temperature : " + results.Value + " " + results.Unit);
Search WWH ::

Custom Search