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

时间:2012-02-08 03:39:11

标签: ajax json asp.net-mvc-3

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

想法是将图像文件发布到服务器,服务器返回包含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之前没有发生这种情况。我不确定这是前进还是后退。

2 个答案:

答案 0 :(得分:2)

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

  • jquery.unobtrusive-ajax.js
  • <击> MicrosoftMvcAjax.js

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

修改

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

答案 1 :(得分:0)

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