javascript - from - ¿Cómo usar Ajax.BeginForm MVC helper con resultado JSON?

razor ajax

Question

Intento utilizar el asistente ASP.NET MVC Ajax.BeginForm pero no quiero usar las opciones de inserción de contenido existentes 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 debe devolverse 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á el resultado en formato JSON y puede usar json_data[0] para obtener el primer registro

Answer 2

Asegúrese de haber 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 3

Puede usar OnFailure y OnSuccess lugar de OnComplete ; OnSuccess le proporciona 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 tu 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 coinciden con el success y las devoluciones de error en $ .ajax (...) , lo que podría no ser tan sorprendente después de todo.

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

Answer 4

Intenta usar el siguiente código:

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

Answer 5

Yo suelo:

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