<script type="text/javascript"> function testList() { $.ajax( { url: '/Music/List/', type: 'POST', dataType: 'json', success: function (result) { $.each(result.Songs, function () { alert(this.Title + ', ' + this.Album + ', ' + this.YearReleased ); }); } }); } </script>
And this:
<input type="submit" value="Test" onclick="testList(); return false;" />
And this model:
namespace SampleJquery.Models { public class Song { public string Title { get; set; } public string Album { get; set; } public int YearReleased { get; set; } } }
This is how your ControllerHere/MethodHere shall look like:
namespace SampleJquery.Controllers { public class MusicController : Controller { public ActionResult Index() { return View(); } [HttpPost] public JsonResult List() { return Json( new { Songs = new Song[] { new Song { Title = "Taxman", Album = "Revolver", YearReleased = 1966 }, new Song { Title = "Girl", Album = "Rubber Soul", YearReleased = 1965 }, new Song { Title = "Come together", Album = "Abbey Road", YearReleased = 1969 } } }); } } }
Notice that in jQuery's AJAX call, we don't invoke the full controller name (i.e. MusicController), we just need to invoke the function using the controller's public url slash method:
url: "/Music/List/",
If plain javascript is desired for iterating the list, you can use:
<script type="text/javascript"> function testList() { $.ajax( { url: '/Music/List/', type: 'POST', dataType: 'json', success: function (result) { for (var i in result.Songs) { var song = result.Songs[i]; alert(song.Title + ', ' + song.Album + ', ' + song.YearReleased); } } }); } </script>
But please do bear in mind that you will bear the wrath of jQuery peeps by doing so :D lol