Używanie jQuery do wywoływania akcji kontrolera

Question

Mam ładną stronę, która robi wszystko, czego potrzebuję. Jednak jeden z elementów (częściowa strona) zajmuje kilka sekund dłużej, niż chciałbym załadować. Chciałbym więc najpierw pokazać stronę bez tego częściowego, ale zamiast tego pokazać "ładowanie" gifa. Następnie w mojej jquery ...

$(document).ready(function() { 

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

}); 

Chciałbym wywołać moją akcję kontrolera, który zwraca PartialView i aktualizuje moją zawartość div. Zasadniczo wywołuje asynchroniczne ładowanie częściowe podczas ładowania. Mogłem zrobić to dobrze z ActionLink, dopóki nie dojdzie do punktu, w którym chciałbym to zrobić. Jeśli używam jQuery do wywołania typu onloand, czy mogę zwrócić widok częściowy?

Answer 1

Wystarczy użyć $.load:

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

który zastąpi zawartość div id = "myDiv" z wskaźnikiem załadunku, a następnie wstrzyknąć wyjście Client/GetStuff do niego.

Answer 2

Wierzę, że możesz. Użyłem jQuery, aby uzyskać JSON od kontrolera ASP.NET MVC, i jest to jeden z najprzyjemniejszych sposobów, w jaki znalazłem pobieranie danych do klienta.

Jestem pewien, że się częściowy widok może być tak proste, jak przy użyciu 'obciążenie' jQuery 'get' lub 'dodaj' metody:

Korzystanie Load:

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

Korzystanie Get:

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

Korzystanie Post:

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

Answer 3

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

To jest naprawdę podstawowy przykład; po prostu wywołujesz kontroler używając AJAX, a następnie możesz wysłać dane do DOM lub zrobić coś innego.

Answer 4

Możemy wywołać metodę kontrolera przy użyciu JavaScript/jQuery bardzo łatwo się następująco:

Załóżmy następującą jest metoda kontrolera nazywać powrocie tablicę niektórych obiektów klasy. Niech klasa jest „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); 

    } 

Poniżej znajduje się kompleks typu (klasy)

public class A 
{ 

    public string property1 {get ; set ;} 

    public string property2 {get ; set ;} 

} 

Teraz przyszła kolej zadzwonić powyżej metody kontrolera przez jQuery. Poniżej znajduje się funkcja Jquery, która wywołuje metodę kontrolera.

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); 
     } 
    } 
} 

W powyższych funkcji Jquery „callControllerMethod” rozwijamy metody kontrolera URL i umieścić, że w zmiennej o nazwie „strMehodUrl” i wywołać metodę getJSON jQuery API.

ReceieveResponse to funkcja zwrotna odbierająca wartość odpowiedzi lub wartość zwracaną przez metodę kontrolera.

Tutaj wykorzystaliśmy JSON, ponieważ nie można skorzystać z obiektu C# klasy

bezpośrednio do funkcji Javascript, więc przekształca wynik (ARR), w sposób regulator do obiektu JSON w następujący sposób:

Json (arr, JsonRequestBehavior.AllowGet);

i zwrócił ten obiekt Json.

Teraz w funkcji wywołania zwrotnego JavaScript/JQuery możemy skorzystać z tego wynikowego obiektu JSON i pracować zgodnie z danymi odpowiedzi w interfejsie użytkownika.

Więcej Detaill click here