How to use Ajax.BeginForm MVC helper with JSON result? Reference data in JSON Result

Question

In the post How to use Ajax.BeginForm MVC helper with JSON result? Joel references a solution as follows:

function onTestSuccess(data, status, xhr) { 

    console.log("data", data); 
    console.log("xhr", xhr); 
    console.log("status", status); 

    // Here's where you use the JSON object 
    //doSomethingUseful(data); 
}

How do I reference elements in the JSON object "data" in my code? My console log shows the following: LOG: data{"success":true,"uri":"/Image/Confirm2?category=foo"}

I am trying to use the value of "uri" in my jquery code. I've tried:

console.log("uri", data.uri);

but get the folowing as a result:

LOG: datauriundefined

Darin Dimitrov · Accepted Answer · 2012-02-19T21:52:51.640

1

function onTestSuccess(data, status, xhr) { 
    var uri = data.uri;
    // uri = '/Image/Confirm2?category=foo' at this stage 
    // so you could do something useful with it
}

Also for this to work you need to use the OnSuccess="onTestSuccess" setting in your AjaxOptions when setting up the Ajax.BeginForm instead of OnComplete="onTestSuccess".

It turns out that the problem is with your controller action in which you specified incorrect Content-Type of text/html.

So instead of:

String uri = Url.Action("Confirm2", "Image", new RouteValueDictionary(new { category = "foo" })); 
return Json(new { success = true, uri = uri }, "text/html");

you should use:

String uri = Url.Action("Confirm2", "Image", new RouteValueDictionary(new { category = "foo" })); 
return Json(new { success = true, uri = uri });

edited Feb 19 '12 at 21:52

answered Feb 19 '12 at 20:19

Darin Dimitrov

1,023,142
271
3,287
2,928

Unfortunately I am still not having much success. – user1219694 Feb 19 '12 at 21:44
see code: var uri = data.uri; console.log(uri); displays LOG: undefined – user1219694 Feb 19 '12 at 21:45
@user1219694, you should use `OnSuccess="onTestSuccess"` instead of `OnComplete="onTestSuccess"` in your AjaxOptions. – Darin Dimitrov Feb 19 '12 at 21:45
Yes - that is what I am doing @using (Ajax.BeginForm("create", "Guide", new AjaxOptions { HttpMethod = "Post", OnSuccess = "JsonCreateGuide_OnComplete" })) – user1219694 Feb 19 '12 at 21:48
And your controller action `return Json(new { uri = "/Image/Confirm2?category=foo" })`? You may also try `console.log($.parseJSON(data).uri);`. – Darin Dimitrov Feb 19 '12 at 21:49
String uri = Url.Action("Confirm2", "Image", new RouteValueDictionary(new { category = "foo" })); return Json(new { success = true, uri = uri }, "text/html"); When I Console log data it appears that the data is returned back properly. see LOG: data{"success":true,"uri":"/Image/Confirm2?category=foo"} – user1219694 Feb 19 '12 at 21:50
@user1219694, oh NO. Why did you set `text/html` as content type. That's just wrong. Remove this parameter and leave only `return Json(new { success = true, uri = uri })`. You are returning JSON, not HTML. That's why jQuery was enable to parse your response. Because you sent JSON but indicate wrong Content-Type header. – Darin Dimitrov Feb 19 '12 at 21:51
Thank You so much Darin - Fixed it! – user1219694 Feb 19 '12 at 21:53

How to use Ajax.BeginForm MVC helper with JSON result? Reference data in JSON Result

1 Answers1