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

Question

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

想法是将图像文件发布到服务器，服务器返回包含 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)} );

}

这是我的带有脚本标签的 View 代码。 (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