Using jQuery to invoke a controller action

Question

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

$(document).ready(function() { // Call controller/action (ie Client/GetStuff) }); 

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

Answer 1

Just use $. load :

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

This will replace the contents of div id = "myDiv" with your download indicator, and then add the output of Client / GetStuff to it.

Answer 2

I believe you can. I used jQuery to get JSON from an ASP.NET MVC controller before, and this is one of the nicest ways to find data for a client.

I am sure that a partial view can be as simple as using jQuery ',' get 'or' post loading 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 simple example; you just call the controller using AJAX, and then you can insert data into the DOM or do something else with it.

Answer 4

We can easily call the controller method using Javascript / Jquery as follows:

Assume that the next Controller method to be called returns an array of some objects of the class. Let the class "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); } 

Below is the complex type (class)

  public class A { public string property1 {get ; set ;} public string property2 {get ; set ;} } 

Now it was called by a call over the JQUERY controller. The following is a jQuery function to call a 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 jQuery 'callControllerMethod' function above, we develop the URL of the controller and put it in a variable called 'strMehodUrl' and call the getJSON JQuery API method.

receieveResponse is a callback function that receives the response or return value of a controller method.

Here we used JSON, since we cannot use an object of class C #

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

Json (arr, JsonRequestBehavior.AllowGet);

and returned this Json object.

Now in the Javascript / JQuery callback function, we can use this resulting JSON object and work accordingly to display the response data in the user interface.

For more information click here.