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

Question

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

This works, but the result I want should be returned as JSON. Unfortunately, the framework just treats the data as a string. Below is the client 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 uppercase result, it is instead showing undefined. content.get_data() seems to hold the JSON, but only in string form. How do I go about converting this to an object?

All of this seems a bit convoluted really. Is there a better way to get at the resulting content using Ajax.BeginForm? If it's this hard, I may skip Ajax.BeginForm entirely and just use the jQuery form library.

The controller action is not the issue. It literally is one line: return Json(new {UppercaseName = name.ToUpper()}); — Brian Vallelunga
– Brian Vallelunga, Commented Nov 20, 2008 at 4:53

Joel Purra · Accepted Answer · 2012-08-17 16:19:05Z

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

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

These signatures match success and error callbacks in $.ajax(...), which might not be such a surprise after all.

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

VVS · Accepted Answer · 2009-06-11 15:25:56Z

12

Try this:

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

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

edited Jun 11, 2009 at 15:25

VVS

19.6k5 gold badges50 silver badges66 bronze badges

answered Nov 20, 2008 at 6:51

Kobi

1561 silver badge5 bronze badges

5 Comments

Brian Vallelunga Over a year ago

OK, this worked. It still seems convoluted however. I'm not sure why they just don't return the data directly.

Joel Martinez Over a year ago

In response to the comment by Brian, the reason they "just don't return the data directly" is because the object form is not the default form of data being returned via HTTP. When you make an http call, you get a string back. The fact is that in order to turn it into an object, you must take an extra step to evaluate it using the eval function.

Jack Ukleja Over a year ago

So what is get_data() supposed to do then?

Joel Purra Over a year ago

Times have changed, so for asp.net-mvc-3, see my answer using onSuccess(data, status, xhr).

Joel Purra Over a year ago

@MaksimVi.: Not surprised at all ;)

Dave Clemmer · Accepted Answer · 2013-01-01 03:28:01Z

0

Try using the below code:

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

edited Jan 1, 2013 at 3:28

Dave Clemmer

3,77312 gold badges53 silver badges72 bronze badges

answered Jan 21, 2010 at 6:59

Russel

1

Comments

Juan Carlos Velez · Accepted Answer · 2014-02-24 19:33:21Z

0

I use:

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

answered Feb 24, 2014 at 19:33

Juan Carlos Velez

2,9402 gold badges36 silver badges50 bronze badges

Comments

Michael Callahan · Accepted Answer · 2010-08-25 15:48:39Z

-1

Make sure you have included MicrosoftAjax.js and MicrosoftMvcAjax.js. Then use the following calls on the returned context to get a json object out of the return.

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

answered Aug 25, 2010 at 15:48

Michael Callahan

1

1 Comment

Aaron Over a year ago

These libraries are redundant now, and highly bloated. I wouldn't want to be including them just to make one tiny call like this. A better solution would be pure jquery just using the included unobtrusive jquery scripts.

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

5 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

5 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related