Cómo usar Ajax.BeginForm MVC helper con resultado JSON?

Question

Estoy intentando usar el ayudante ASP.NET MVC Ajax.BeginForm pero no quiero usar las opciones existentes de inserción de contenido cuando finaliza la llamada. En cambio, quiero usar una función personalizada de JavaScript como devolución de llamada.

Esto funciona, pero el resultado que deseo se debe devolver como JSON. Desafortunadamente, el marco solo trata los datos como una cadena. A continuación está el código del cliente. El código del servidor simplemente devuelve un JsonResult con un campo, 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" /> 
<%} %> 

En lugar de mostrar el resultado en mayúscula, se muestra indefinido. content.get_data() parece contener el JSON, pero solo en forma de cadena. ¿Cómo hago para convertir esto a un objeto?

Todo esto parece un poco complicado en realidad. ¿Hay una mejor manera de obtener el contenido resultante usando Ajax.BeginForm? Si es tan difícil, puedo omitir Ajax.BeginForm por completo y usar la biblioteca de formularios jQuery.

Answer 1

Prueba esto:

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

Esto le dará resultado en formato JSON y se puede utilizar json_data[0] para obtener el primer registro

Answer 2

intente utilizar el código de abajo:

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

Answer 3

Hacer Seguro que ha incluido MicrosoftAjax.js y MicrosoftMvcAjax.js. Luego use las siguientes llamadas en el contexto devuelto para obtener un objeto json de la devolución.

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

Answer 4

Puede utilizar OnFailure y OnSuccess en lugar de OnComplete; OnSuccess le da los datos como un objeto JSON adecuado. Puede encontrar las firmas del método de devolución de llamada ocultas en ~/Scripts/jquery.unobtrusive-ajax.min.js que debe cargar en su página.

En su Ajax.BeginForm:

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

bloque de script:

<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> 

Estas firmas partido success and error callbacks in $.ajax(...), que podría no ser una sorpresa después de todo.

Esto se probó utilizando asp.net-mvc-3 con jquery 1.6.3 y 1.7.2.

Answer 5

que utilizo:

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