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

Question

So I have ajax file upload partial (using Jquery Form plugin), it's working perfectly, but I don't know to update model value after file uploading

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

Here I'm calling partial and giving to it part of a model.

@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" />
    }
}

This is view code of partial, accepting model and form for uploading

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 code for plugin

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

Controller action code. It's returning file name, it's going to js function "showResponse" and appending image to div. It's all work perfectly, but I have to write file name to @Model.Photo of this partial and I don't know how to do it. Any suggestions?

Answer 1

One possibility is to use text/plain from the server:

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

and on the client manually parse:

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

Obviously you lust remove the dataType: 'json' option for this to work.

Another possibility is to follow what's explained in the documentation and write a custom action result which will wrap your JSON response with the <textarea> tags:

Browsers that support the XMLHttpRequest Level 2 will be able to upload files seamlessly and even get progress updates as the upload proceeds. For older browsers, a fallback technology is used which involves iframes since it is not possible to upload files using the level 1 implmenentation of the XMLHttpRequest object. This is a common fallback technique, but it has inherent limitations. The iframe element is used as the target of the form's submit operation which means that the server response is written to the iframe. This is fine if the response type is HTML or XML, but doesn't work as well if the response type is script or JSON, both of which often contain characters that need to be repesented using entity references when found in HTML markup.

To account for the challenges of script and JSON responses when using the iframe mode, the Form Plugin allows these responses to be embedded in a textarea element and it is recommended that you do so for these response types when used in conjuction with file uploads and older browsers. Please note, however, that if there is no file input in the form then the request uses normal XHR to submit the form (not an iframe). This puts the burden on your server code to know when to use a textarea and when not to. If you like, you can use the iframe option of the plugin to force it to always use an iframe mode and then your server can always embed the response in a textarea. But the recommended solution is to test for the 'X-Requested-With' request header. If the value of that header is 'XMLHttpRequest' then you know that the form was posted via ajax.