Why is my json being rendered in a new page?

Question

I'm trying to do a simple image uploader for my site.

The idea is to post the image file to the server and the server returns json that contains the URL. Then I use JQuery to update a p tag with the url.

Here is my action method:

[HttpPost]
public JsonResult UploadImage()
{
    var image = WebImage.GetImageFromRequest();
    var filename = image.FileName;

    image.Save(Path.Combine("../Content/Images",filename));

    return Json( new{ url= "http://www.example.com/Content/Images/"+filename)} );

}

Here is my view code with script tag. (Jquery is linked in my layout page)

Upload an image

@using (Ajax.BeginForm("UploadImage", "Gtfo", FormMethod.Post, new AjaxOptions
        {
            HttpMethod = "post",
            UpdateTargetId = "filePath",
            InsertionMode = InsertionMode.InsertAfter,
            OnSuccess = "updateFilePath"
        }, new
        {
            enctype = "multipart/form-data"
        }))
{
    <input type="file" name="imageUploader" /><br />
    <input type="submit" name="Submit" id="Submit" value="Upload" />
}


<script type="text/javascript">

    function updateFilePath(result) {

        $("#filePath").text(result.url);
    }
</script>

The images are uploading and being saved to the server fine. The problem is that once the image is uploaded, the browser redirects to a page displaying the JSON data in plain text.

Edit: I have done some reading around the internet and I thought the problem may be that I have not included the unobtrusive JavaScript on my layout page. I have since added the script to my layout page. Now instead of uploading the image to my server, the server throws an exception at var filename = image.FileName;. The reason is because image is now null. This wasn't happening before the inclusion of unobtrusive javascript. I'm not sure if this is a step forward or a step back.

Have looked to see what the page looks like and does after being rendered? I see you are using a MVC helper. Your setup looks correct, but without knowing what the helper will render it is hard to say exactly. — Brettski, Feb 08 '12 at 04:32
It renders a single line of text reading: {"url":"../Content/Images/padlock.jpg"} — Stephen__T, Feb 08 '12 at 18:46

Zach Green · Accepted Answer · 2012-02-08T19:45:35.990

2

You need to include all of the scripts below:

jquery.unobtrusive-ajax.js
~~MicrosoftMvcAjax.js~~

I was able to duplicate your problem in a test project, and including both of these scripts fixed the problem.

Edit

After more testing MicrosoftMvcAjax actually isn't required. The only two scripts I need at the top of my layout page are jquery and jquery.unobtrusive-ajax.js

edited Feb 08 '12 at 19:45

answered Feb 08 '12 at 19:39

Zach Green

3,421
4
29
32

Yeah I tried that and it caused a new error. You can see the details in my edit on the original post. – Stephen__T Feb 08 '12 at 20:00
Once you fix that error, it will probably work. Try commenting out the image processing to verify if the JSON issue is fixed, and then worry about fixing your other issue. – Zach Green Feb 08 '12 at 20:07
Yeah the JSON is posting back correctly now. I don't understand why my action method code no longer works. I will accept this answer because it DID answer my question, but if you have any insights as to why the file will no longer upload I would appreciate it. – Stephen__T Feb 08 '12 at 20:56
I'm not too familiar with the WebImage class, but a quick google search did turn up this: http://geekswithblogs.net/GruffCode/archive/2011/05/30/webimage.getimagefromrequest-returns-null.aspx. This isn't your issue is it? – Zach Green Feb 08 '12 at 22:24
No but thanks anyways. I'll have to find another way to upload images to the server. – Stephen__T Feb 08 '12 at 23:32
somewhere to get started: http://blog.stevensanderson.com/2008/11/24/jquery-ajax-uploader-plugin-with-progress-bar/ – Zach Green Feb 09 '12 at 02:42
I ended up going with this: http://stackoverflow.com/questions/4884920/mvc3-valums-ajax-file-upload http://valums.com/ajax-upload/ – Stephen__T Feb 09 '12 at 03:17

score 0 · Answer 2 · answered Feb 08 '12 at 04:49

0

try

@using (Ajax.BeginForm("UploadImage", 
                       "Gtfo",
                       new AjaxOptions {
                         HttpMethod = "post",
                         UpdateTargetId = "filePath",
                         InsertionMode = InsertionMode.InsertAfter,
                         OnSuccess = "updateFilePath"
                       },
                       new { enctype = "multipart/form-data"
                       }))

answered Feb 08 '12 at 04:49

Rafay

30,950
5
68
101

It had no affect. Maybe I will switch to writing raw Jquery and see if that helps. – Stephen__T Feb 08 '12 at 18:46

Why is my json being rendered in a new page?

2 Answers2