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

We can call Controller method using Javascript / Jquery very easily as follows:

Suppose following is the Controller method to be called returning an array of some class objects. Let the class is 'A'

public JsonResult SubMenu_Click(string param1, string param2)

    {
       A[] arr = null;
        try
        {
            Processing...
           Get Result and fill arr.

        }
        catch { }


        return Json(arr , JsonRequestBehavior.AllowGet);

    }

Following is the complex type (class)

 public class A
 {

  public string property1 {get ; set ;}

  public string property2 {get ; set ;}

 }

Now it was turn to call above controller method by JQUERY. Following is the Jquery function to call the controller method.

function callControllerMethod(value1 , value2) {
    var strMethodUrl = '@Url.Action("SubMenu_Click", "Home")?param1=value1 &param2=value2'
    $.getJSON(strMethodUrl, receieveResponse);
}


function receieveResponse(response) {

    if (response != null) {
        for (var i = 0; i < response.length; i++) {
           alert(response[i].property1);
        }
    }
}

In the above Jquery function 'callControllerMethod' we develop controller method url and put that in a variable named 'strMehodUrl' and call getJSON method of Jquery API.

receieveResponse is the callback function receiving the response or return value of the controllers method.

Here we made use of JSON , since we can't make use of the C# class object

directly into the javascript function , so we converted the result (arr) in controller method into JSON object as follows:

Json(arr , JsonRequestBehavior.AllowGet);

and returned that Json object.

Now in callback function of the Javascript / JQuery we can make use of this resultant JSON object and work accordingly to show response data on UI.

For more detaill click here

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.

Answer 4

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.