Làm thế nào để sử dụng Ajax.BeginForm MVC helper với kết quả JSON?

Question

Tôi đang cố gắng sử dụng trình trợ giúp ASP.NET MVC Ajax.BeginForm nhưng không muốn sử dụng các tùy chọn chèn nội dung hiện có khi cuộc gọi kết thúc. Thay vào đó, tôi muốn sử dụng một hàm JavaScript tùy chỉnh làm gọi lại.

Công trình này, nhưng kết quả tôi muốn được trả về dưới dạng JSON. Thật không may, khuôn khổ chỉ xử lý dữ liệu dưới dạng một chuỗi. Dưới đây là mã khách hàng. Mã máy chủ chỉ trả về một JsonResult với một trường, UppercaseName.

<script type='text/javascript'> 
    function onTestComplete(content) { 
     var result = content.get_data(); 
     alert(result.UppercaseName); 
    } 
</script> 

<% using (Ajax.BeginForm("JsonTest", new AjaxOptions() {OnComplete = "onTestComplete" })) { %> 
    <%= Html.TextBox("name") %><br /> 
    <input type="submit" /> 
<%} %> 

Thay vì hiển thị kết quả chữ hoa, thay vào đó là hiển thị không xác định. content.get_data() dường như chứa JSON, nhưng chỉ ở dạng chuỗi. Làm thế nào để tôi chuyển đổi nó thành một đối tượng?

Tất cả điều này có vẻ hơi phức tạp. Có cách nào tốt hơn để lấy nội dung kết quả bằng cách sử dụng Ajax.BeginForm không? Nếu điều này khó, tôi có thể bỏ qua Ajax.BeginForm hoàn toàn và chỉ sử dụng thư viện biểu mẫu jQuery.

Answer 1

Hãy thử điều này:

var json_data = content.get_response().get_object(); 

này sẽ cung cấp cho bạn kết quả ở định dạng JSON và bạn có thể sử dụng json_data[0] để có được những kỷ lục đầu tiên

Answer 2

Hãy thử sử dụng mã bên dưới:

<script type='text/javascript'> 
    function onTestComplete(content) { 
     var result = eval('(' + content.get_data() + ')'); 
     alert(result.UppercaseName); 
    } 
</script> 

Answer 3

Make chắc chắn bạn đã bao gồm MicrosoftAjax.js và MicrosoftMvcAjax.js. Sau đó, sử dụng các cuộc gọi sau trên bối cảnh trả về để có được một đối tượng json ra khỏi sự trở lại.

var json = context.get_data(); 
var data = Sys.Serialization.JavaScriptSerializer.deserialize(json); 

Answer 4

Bạn có thể sử dụng OnFailure và OnSuccess thay vì OnComplete; OnSuccess cung cấp cho bạn dữ liệu dưới dạng đối tượng JSON thích hợp. Bạn có thể tìm thấy chữ ký phương thức gọi lại được ghi lại trong ~/Scripts/jquery.unobtrusive-ajax.min.js mà bạn sẽ tải trên trang của mình.

Trong Ajax.BeginForm của bạn:

new AjaxOptions 
    { 
     OnFailure = "onTestFailure", 
     OnSuccess = "onTestSuccess" 
    } 

Script khối:

<script> 
//<![CDATA[ 

    function onTestFailure(xhr, status, error) { 

     console.log("Ajax form submission", "onTestFailure"); 
     console.log("xhr", xhr); 
     console.log("status", status); 
     console.log("error", error); 

     // TODO: make me pretty 
     alert(error); 
    } 

    function onTestSuccess(data, status, xhr) { 

     console.log("Ajax form submission", "onTestSuccess"); 
     console.log("data", data); 
     console.log("status", status); 
     console.log("xhr", xhr); 

     // Here's where you use the JSON object 
     //doSomethingUseful(data); 
    } 

//]]> 
</script> 

Những chữ ký trận đấu success and error callbacks in $.ajax(...), mà có thể không được như vậy một bất ngờ sau khi tất cả.

Điều này đã được thử nghiệm sử dụng asp.net-mvc-3 với jquery 1.6.3 và 1.7.2.

Answer 5

tôi sử dụng:

function onTestComplete(data, status, xhr) { 
     var data2 = JSON.parse(data.responseText); 
     //data2 is your object 
    }