Jak używać pomocnika Ajax.BeginForm MVC z wynikiem JSON?

Question

Próbuję użyć pomocnika ASP.NET MVC Ajax.BeginForm, ale nie chcę używać istniejących opcji wstawiania treści po zakończeniu połączenia. Zamiast tego chcę użyć niestandardowej funkcji JavaScript jako wywołania zwrotnego.

To działa, ale wynik, który chcę, powinien zostać zwrócony jako JSON. Niestety, framework traktuje dane jako ciąg. Poniżej znajduje się kod klienta. Kod serwera po prostu zwraca JsonResult z jednym polem, 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" /> 
<%} %> 

Zamiast pokazywać wynik wielkiej litery, zamiast tego pokazuje niezdefiniowany. content.get_data() wydaje się przechowywać JSON, ale tylko w formie ciągu. Jak mam zamiar przekonwertować to na obiekt?

Wszystko to wydaje się nieco skomplikowane. Czy istnieje lepszy sposób na uzyskanie wynikowej zawartości przy użyciu Ajax.BeginForm? Jeśli jest to trudne, mogę całkowicie pominąć Ajax.BeginForm i po prostu użyć biblioteki formularzy jQuery.

Answer 1

Spróbuj tego:

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

to daje doprowadzić w formacie JSON i można korzystać json_data[0] dostać pierwszy rekord

Answer 2

Spróbuj użyć poniższy kod:

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

Answer 3

Dokonaj z pewnością zawierałeś MicrosoftAjax.js i MicrosoftMvcAjax.js. Następnie użyj następujących wywołań w zwróconym kontekście, aby uzyskać obiekt Json z powrotu.

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

Answer 4

Można użyć OnFailure i OnSuccess zamiast OnComplete; OnSuccess podaje dane jako właściwy obiekt JSON. Możesz znaleźć sygnatury metody wywołania zwrotnego pochowane w ~/Scripts/jquery.unobtrusive-ajax.min.js, które powinieneś załadować na swojej stronie.

w twojej Ajax.BeginForm:

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

blok Scenariusz:

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

Te podpisy mecz success and error callbacks in $.ajax(...), co może nie być taka niespodzianka po wszystkim. To było testowane przy użyciu asp.net-mvc-3 z jquery 1.6.3 i 1.7.2.

Answer 5

używam:

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