Utilizzo di jQuery per chiamare un controller Azione

Question

Ho una bella pagina che fa tutto ciò di cui ho bisogno. Tuttavia uno degli elementi (una pagina parziale) richiede qualche secondo in più, quindi mi piacerebbe caricare. Quindi quello che mi piacerebbe fare è mostrare prima la pagina senza questo parziale, ma mostrare una gif di "caricamento" al suo posto. Poi nel mio jquery ...

$(document).ready(function() { 

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

}); 

vorrei chiamare la mia azione di controllo che restituisce un PartialView e aggiorna i miei contenuti div. In pratica chiama il carico parziale in modo asincrono sul carico. Potrei farlo bene con un ActionLink fino al punto in cui mi piacerebbe farlo onload. Se uso jQuery per la chiamata di tipo onloand, posso anche restituire un PartialView?

Answer 1

Semplicemente utilizzare $.load:

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

che andrà a sostituire il contenuto del div id = "myDiv" con il vostro indicatore di caricamento, e poi iniettare l'uscita di Client/GetStuff in esso.

Answer 2

Credo che tu possa. Ho usato jQuery per ottenere JSON da un controller ASP.NET MVC prima, ed è uno dei modi più piacevoli che ho trovato per ottenere dati al client.

Sono sicuro di ottenere una vista parziale potrebbe essere semplice come utilizzare 'carico' il jQuery, 'get' o 'post' metodi:

Uso Load:

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

Utilizzando Get:

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

Utilizzando Post:

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

Answer 3

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

Questo è un esempio di base; chiami semplicemente il controller usando AJAX e poi puoi inserire i dati nel DOM o fare qualcos'altro con esso.

Answer 4

Siamo in grado di chiamare il metodo di controllo utilizzando Javascript/Jquery molto facilmente come segue:

Supponiamo che segue è il metodo di controllo di essere chiamato restituisce un array di alcuni oggetti di classe. Lasciate che la classe è '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); 

    } 

seguito è il tipo complesso (classe)

public class A 
{ 

    public string property1 {get ; set ;} 

    public string property2 {get ; set ;} 

} 

Ora era il turno di chiamare sopra il metodo di controllo da jQuery. Di seguito è riportata la funzione Jquery per chiamare il metodo controller.

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 precedenza la funzione Jquery 'callControllerMethod' sviluppiamo il metodo di controllo URL e che mettere in una variabile denominata 'strMehodUrl' e chiamare il metodo getJSON di jQuery API.

receieveResponse è la funzione di callback che riceve il valore di risposta o di ritorno del metodo dei controller.

Qui fatto uso di JSON, poiché non si può fare uso dell'oggetto classe C#

direttamente nella funzione javascript, quindi abbiamo convertito il risultato (arr) nel metodo di controllo in oggetto JSON come segue:

Json (arr, JsonRequestBehavior.AllowGet);

e restituito quell'oggetto JSON.

Ora nella funzione di callback di Javascript/JQuery possiamo utilizzare questo oggetto JSON risultante e lavorare di conseguenza per mostrare i dati di risposta sull'interfaccia utente.

Per ulteriori detaill click here