Wie Ajax.BeginForm MVC-Helfer mit JSON-Ergebnis verwenden?

Question

Ich versuche, den ASP.NET MVC Ajax.BeginForm-Helper zu verwenden, möchte aber nicht die vorhandenen Optionen zum Einfügen von Inhalten verwenden, wenn der Anruf abgeschlossen ist. Stattdessen möchte ich eine benutzerdefinierte JavaScript-Funktion als Rückruf verwenden.

Das funktioniert, aber das gewünschte Ergebnis sollte als JSON zurückgegeben werden. Leider behandelt das Framework die Daten nur als String. Unten ist der Client-Code. Der Servercode gibt einfach ein JsonResult mit einem Feld, GroßbuchstabenName 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 undefined angezeigt. content.get_data() scheint den JSON zu enthalten, aber nur in String-Form. Wie wandle ich das in ein Objekt um?

All dies scheint ein bisschen verschlungen wirklich. Gibt es einen besseren Weg, um den resultierenden Inhalt mit Ajax.BeginForm zu erhalten? Wenn es so schwer ist, kann ich Ajax.BeginForm komplett überspringen und einfach die jQuery-Formularbibliothek verwenden.

Answer 1

Try this:

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

dies wird Ihnen im JSON-Format geben führen und Sie können json_data[0] verwenden, um den ersten Datensatz mit dem Code unten

Answer 2

Versuchen Sie:

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

Answer 3

Fabrikat Sicher haben Sie MicrosoftAjax.js und MicrosoftMvcAjax.js enthalten. Verwenden Sie dann die folgenden Aufrufe für den zurückgegebenen Kontext, um ein JSON-Objekt aus der Rückgabe zu erhalten.

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

Answer 4

Sie können OnFailure und OnSuccess statt OnComplete verwenden; OnSuccess gibt Ihnen die Daten als ein richtiges JSON-Objekt. Sie finden die Signaturen für die Callback-Methode in ~/Scripts/jquery.unobtrusive-ajax.min.js, die Sie auf Ihrer Seite laden sollten.

In Ihrem Ajax.BeginForm:

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

Script Block:

<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 übereinstimmen success and error callbacks in $.ajax(...), die nicht so eine Überraschung nach all sein könnte.

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

Answer 5

Ich benutze:

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