Sử dụng jQuery để gọi hành động điều khiển

Question

Tôi có một trang đẹp làm mọi thứ tôi cần. Tuy nhiên một trong những yếu tố (một phần trang) mất một vài giây lâu hơn sau đó tôi muốn tải. Vì vậy, những gì tôi muốn làm là để hiển thị trang mà không có phần này đầu tiên nhưng hiển thị một "tải" gif tại chỗ của nó. Sau đó, trong jquery của tôi ...

$(document).ready(function() { 

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

}); 

Tôi muốn gọi hành động điều khiển của mình trả về một phần Xem và cập nhật nội dung div của tôi. Về cơ bản nó gọi tải một phần không đồng bộ khi tải. Tôi có thể làm điều này tốt với một ActionLink cho đến khi nó nhận được đến điểm mà tôi muốn làm điều đó onload. Nếu tôi sử dụng jQuery cho cuộc gọi loại onloand, tôi thậm chí có thể trả về một PartialView không?

Answer 1

Đơn giản chỉ cần sử dụng $.load:

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

Điều đó sẽ thay thế nội dung của div id = "myDiv" với chỉ số tải của bạn, và sau đó tiêm đầu ra của Client/GetStuff vào nó.

Answer 2

Tôi tin rằng bạn có thể. Tôi đã sử dụng jQuery để có được JSON từ một bộ điều khiển ASP.NET MVC trước đây, và đó là một trong những cách dễ chịu nhất mà tôi đã tìm thấy để lấy dữ liệu cho khách hàng.

tôi chắc chắn nhận được một cái nhìn cục bộ có thể đơn giản như sử dụng 'tải' jQuery, 'get' hoặc 'bài' phương pháp:

Sử dụng Load:

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

Sử dụng Get:

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

Sử dụng Post:

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

Answer 3

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

Đây là ví dụ thực sự cơ bản; bạn chỉ cần gọi bộ điều khiển bằng AJAX và sau đó bạn có thể bật dữ liệu vào DOM hoặc làm điều gì đó khác với nó.

Answer 4

Chúng ta có thể gọi phương thức điều khiển sử dụng Javascript/Jquery rất dễ dàng như sau:

Giả sử sau đây là phương pháp điều khiển được gọi là trả lại một mảng của một số đối tượng lớp. Hãy để cho lớp là '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); 

    } 

Tiếp theo là loại phức tạp (class)

public class A 
{ 

    public string property1 {get ; set ;} 

    public string property2 {get ; set ;} 

} 

Bây giờ nó đã được chuyển sang gọi trên phương pháp điều khiển bằng jQuery. Sau đây là hàm Jquery để gọi phương thức điều khiển.

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

Ở phía trên chức năng Jquery 'callControllerMethod' chúng tôi phát triển bộ điều khiển phương pháp url và đưa rằng trong một biến có tên là 'strMehodUrl' và gọi phương thức getJSON của Jquery API.

receieveResponse là hàm gọi lại nhận giá trị trả về hoặc trả về của phương thức bộ điều khiển.

Ở đây chúng ta đã sử dụng JSON, vì chúng ta không thể tận dụng các đối tượng C# lớp

trực tiếp vào chức năng javascript, vì vậy chúng tôi chuyển đổi kết quả (arr) trong phương pháp điều khiển vào đối tượng JSON như sau:

Json (arr, JsonRequestBehavior.AllowGet);

và trả lại đối tượng Json đó.

Bây giờ trong chức năng gọi lại của Javascript/JQuery, chúng tôi có thể sử dụng đối tượng JSON kết quả này và làm việc phù hợp để hiển thị dữ liệu phản hồi trên giao diện người dùng.

Đối detaill hơn click here