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

Question

我正在尝试为我的网站做一个简单的图片上传器。

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

这是我的操作方法：

[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)} );

}

这是我的带有脚本标签的视图代码。 （Jquery 链接在我的布局页面中）

上传图片

@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>

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

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

Answer 1

您需要包含以下所有脚本：

• jquery.unobtrusive-ajax.js
• MicrosoftMvcAjax.js

我能够在测试项目中复制您的问题，并且包含这两个脚本解决了问题。

编辑

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

Answer 2

试试

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