Enkelt jQuery Ajax anrop i MVC

Att med hjälp av jQuery/Ajax anropa en C#-metod i ett MVC-projekt som returnerar Json är enkelt. I följande exempel ligger metoden i en controllerklass som heter HomeController, vilket ger URL:en /home/helloworld/ att anropa.

 public ActionResult HelloWorld()  
 {  
  return Json(new { Firstpart = "Hello", Secondpart = "World" }, JsonRequestBehavior.AllowGet);  
 }  

På sidan som ska anropa metoden har jag en DIV med id="responseResult" och lägger följande jQuery-kod.

 $(document).ready(function () {  
     $.ajax({  
       url: '/home/helloworld',  
       success: function (data) {  
         $('#responseResult').html('Resultat: ' + data.Firstpart + ' ' + data.Lastpart).delay(2000).fadeIn('slow');  
       },  
       error: function (data) {  
         alert('Error: Ajax call failed.');  
       }  
     });  
   });  

Som bonus la jag till en fade-effekt efter 2 sekunder på resultatet. 

Om man bara vill returnera en vanlig sträng kan koden i HelloWorld() se ut:

 public ActionResult HelloWorld()  
 {  
  return Content("Hello World");  
 }  

Då skrivs resultatet ut med endast "data" såhär:

 $(document).ready(function () {  
     $.ajax({  
       url: '/home/helloworld',  
       success: function (data) {  
         $('#responseResult').html('Resultat: ' + data).delay(2000).fadeIn('slow');  
       },  
       error: function (data) {  
         alert('Error: Ajax call failed.');  
       }  
     });  
   });