How to use Ajax.BeginForm MVC helper with JSON result?

Question

I'm trying to use the ASP.NET MVC Ajax.BeginForm helper, but I don't want to use the existing content insertion options when the call ends. Instead, I want to use a custom JavaScript function as a callback.

This works, but the result I want should be returned as JSON. Unfortunately, the structure simply processes the data as a string. Below is the customer code. The server code simply returns a JsonResult with one field, 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" /> <%} %> 

Instead of showing the result in uppercase, undefined is displayed instead. content.get_data () seems to contain JSON, but only in string form. How do I convert this to an object?

It all seems a bit confusing. Is there a better way to get the received content using Ajax.BeginForm? If this is complicated, I can completely skip Ajax.BeginForm and just use the jQuery form library.

Answer 1

Try the following:

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

this will give you the result in JSON format and you can use json_data[0] to get the first record

Answer 2

You can use OnFailure and OnSuccess instead of OnComplete ; OnSuccess gives you data as a proper JSON object. You can find the callback method signatures placed in ~/Scripts/jquery.unobtrusive-ajax.min.js that you must download on your page.

In 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 where you use the JSON object //doSomethingUseful(data); } //]]> </script> 

These signatures correspond to success and error callbacks in $ .ajax (...) , which may not be such a surprise.

This has been tested using asp.net-mvc-3 with jquery 1.6.3 and 1.7.2.

Answer 3

Try using the code below:

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

Answer 4

I use:

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

Answer 5

Make sure you include MicrosoftAjax.js and MicrosoftMvcAjax.js. Then use the following calls in the returned context to get the json object from the return.

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