Using jQuery To Call A Controller Action

Question

I have a nice page that does everything I need. However one of the elements (a partial page) takes a few seconds longer then I'd like to load. So what I'd like to do is to show the page without this partial first but show a "loading" gif in its place. Then in my jquery...

$(document).ready(function() {

   // Call controller/action (i.e. Client/GetStuff)

});

I'd like to call my controller action that returns a PartialView and updates my div contents. It basically calls the partial load asynchronously on load. I could do this just fine with an ActionLink until it get's to the point where I'd like to do it onload. If I use jQuery for the onloand type call, can I even return a PartialView?

Answer 1

Simply use $.load:

$(document).ready(function() {    
   $('#myDiv').html('<img src="loading.gif"/>')
              .load('Client/GetStuff');   
});

That will replace the contents of div id="myDiv" with your loading indicator, and then inject the output of Client/GetStuff into it.

Answer 2

I believe you can. I've used jQuery to get JSON from an ASP.NET MVC controller before, and it's one of the most pleasant ways I've found to get data to the client.

I'm sure getting a partial view might be as simple as using the jQuery 'load', 'get' or 'post' methods:

Using Load:

$("#feeds").load("test.aspx");

Using Get:

$.get("test.aspx", function(data){
  alert("Data Loaded: " + data);
});

Using Post:

$.post("test.aspx", function(data){
  alert("Data Loaded: " + data);
});

Answer 3

$.ajax("MyController/MyAction", function(data) {
    alert(data);
});

This is a really basic example; you just call the controller using AJAX and then you can pop the data into the DOM or do something else with it.