ajax文件上传后如何从部分更新模型？

Question

所以我有 ajax 文件上传部分（使用Jquery Form 插件），它工作得很好，但我不知道在文件上传后更新模型值

<div>
   @Html.Partial("PhotoUpload", Model.Place)
</div>

这里我称其为 partial 并将其作为模型的一部分。

@model PlaceMap.DAL.Entities.Place
@using (Html.BeginForm("PhotoUpload", "Place", FormMethod.Post, new { @id = "photoUpload", enctype = "multipart/form-data" }))
{
    {
        @Html.ValidationSummary(true, "Image upload was unsuccessful")
        @Html.HiddenFor(m => m.Photo)                                                                                                                                                                                  
        <input type="file" id="file" name="file"/>
        <input type="submit" id="sbm" />
    }
}

这是部分视图代码，接受模型和上传表单

var options = {
    url: "/Place/PhotoUpload",
    dataType: "json",
    clearForm: true,
    resetForm: true,
    success: showResponse
};

function showResponse(responseText, statusText, xhr, $form)
{
    $('#photo').append('<img src="/Images/Places/' + responseText.Photo + '" />');
}

$('#photoUpload').submit(function ()
{
    $('#photoUpload').ajaxSubmit(options);
    return false;
});

插件的Javascript代码

    [Authorize]
    [HttpPost]
    public ActionResult PhotoUpload(string Photo, HttpPostedFileBase file)
    {
        try
        {
            using (var ms = new MemoryStream())
            {
                //some logic here
                return Json(new { Photo = filename });
            }

        }
        catch (ArgumentException)
        {

        }

        return PartialView();
    }

控制器动作代码。它返回文件名，它将转到 js 函数“showResponse”并将图像附加到 div。这一切都很好，但我必须将文件名写入这个部分的@Model.Photo，我不知道该怎么做。有什么建议吗？

Answer 1

一种可能性是从服务器使用text/plain：

return Json(new { Photo = filename }, "text/plain");

并在客户端手动解析：

function showResponse(responseText, statusText, xhr, $form) {
    var data = $.parseJSON(responseText);
    $('#photo').append('<img src="/Images/Places/' + data.Photo + '" />');
}

显然您希望删除 dataType: 'json' 选项以使其正常工作。

另一种可能性是遵循documentation 中的说明并编写自定义操作结果，该结果将使用<textarea> 标签包装您的 JSON 响应：

支持 XMLHttpRequest Level 2 的浏览器将能够 无缝上传文件，甚至在上传时获得进度更新 收益。对于较旧的浏览器，使用了一种后备技术，该技术 涉及 iframe，因为无法使用 XMLHttpRequest 对象的 1 级实现。这是一个常见的 回退技术，但它具有固有的局限性。内嵌框架 元素被用作表单提交操作的目标 表示将服务器响应写入 iframe。这可以 如果响应类型是 HTML 或 XML，但如果 响应类型是脚本或 JSON，这两者通常都包含 需要使用实体引用来表示的字符 在 HTML 标记中找到。

在使用时考虑到脚本和 JSON 响应的挑战 在 iframe 模式下，表单插件允许嵌入这些响应 在 textarea 元素中，建议您这样做 与文件上传和旧版本结合使用时的响应类型 浏览器。但是请注意，如果在 表单然后请求使用普通 XHR 提交表单（不是 框架）。这给你的服务器代码增加了知道何时使用的负担 一个文本区域，什么时候不去。如果您愿意，可以使用 iframe 选项 的插件强制它始终使用 iframe 模式，然后你的 服务器总是可以将响应嵌入到文本区域中。但是 推荐的解决方案是测试“X-Requested-With”请求 标题。如果该标头的值为“XMLHttpRequest”，那么您知道 该表单是通过 ajax 发布的。