it-swarm.com.de

Wie verwende ich den Ajax.BeginForm MVC-Helfer mit JSON-Ergebnissen?

Ich versuche, den ASP.NET MVC Ajax.BeginForm-Helfer zu verwenden, möchte jedoch die vorhandenen Optionen zum Einfügen von Inhalten nach Abschluss des Aufrufs nicht verwenden. Stattdessen möchte ich eine benutzerdefinierte JavaScript-Funktion als Rückruf verwenden.

Dies funktioniert, aber das gewünschte Ergebnis sollte als JSON zurückgegeben werden. Leider behandelt das Framework die Daten nur als Zeichenfolge. Unten ist der Client-Code. Der Servercode gibt einfach ein JsonResult mit einem Feld, UppercaseName, zurück.

<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" />
<%} %>

Anstatt das Ergebnis in Großbuchstaben anzuzeigen, wird stattdessen undefiniert angezeigt. content.get_data () scheint JSON zu enthalten, jedoch nur in Stringform. Wie kann ich dies in ein Objekt konvertieren?

All dies scheint wirklich ein bisschen verworren zu sein. Gibt es eine bessere Möglichkeit, mit Ajax.BeginForm auf den resultierenden Inhalt zuzugreifen? Wenn es so schwierig ist, kann ich Ajax.BeginForm vollständig überspringen und einfach die jQuery-Formularbibliothek verwenden.

21

Versuche dies: 

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

dadurch erhalten Sie ein Ergebnis im JSON-Format, und Sie können json_data[0] verwenden, um den ersten Datensatz abzurufen

12
Kobi

Sie können OnFailure und OnSuccess anstelle von OnComplete verwenden. OnSuccess gibt Ihnen die Daten als richtiges JSON-Objekt. Sie finden die Callback-Methodensignaturen in ~/Scripts/jquery.unobtrusive-ajax.min.js, die Sie auf Ihrer Seite laden sollten.

In Ihrem Ajax.BeginForm:

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

Skriptblock:

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

Diese Signaturen stimmen mit success und error-Callbacks in $ .ajax (...) überein, was vielleicht doch keine Überraschung ist.

Dies wurde mit asp.net-mvc-3 mit jquery 1.6.3 und 1.7.2 getestet.

23
Joel Purra

Versuchen Sie es mit dem folgenden Code:

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

Ich benutze: 

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