为什么我的json会在新页面中呈现？

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.

想法是将图像文件发布到服务器,服务器返回包含URL的json。然后我使用JQuery用url更新p标签。

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)

这是我的脚本标记视图代码。 (Jquery在我的布局页面中链接)

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.

图像正在上传并保存到服务器中。问题是,一旦上传了图像,浏览器就会重定向到以纯文本显示JSON数据的页面。

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.

编辑:我已经在互联网上做了一些阅读,我认为问题可能是我没有在我的布局页面上包含不显眼的JavaScript。我已经将脚本添加到我的布局页面。现在,服务器不是将图像上传到我的服务器,而是在var filename = image.FileName;处抛出异常。原因是因为图像现在为空。在包含不引人注目的javascript之前没有发生这种情况。我不确定这是前进还是后退。

2 个解决方案

#1

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

经过更多测试后,实际上并不需要MicrosoftMvcAjax。我在布局页面顶部需要的两个脚本是jquery和jquery.unobtrusive-ajax.js

#2

try

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

#1