Question

我已经编写了一些Javascript，允许我让我的MVC表单在特定的Div而不是整个页面中提交和重新加载。这适用于我使用它的大多数表单。

现在我尝试使用包含File对象的表单。最初这个观点的工作原理如下：

@using (Html.BeginForm
        (
            "_submissionfiles", 
            "Project", 
            FormMethod.Post,
            new { enctype = "multipart/form-data" }
        )
    )
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        @Html.HiddenFor(model => model.ProjectContentId)
        <div class="form-group">
            ...
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.ContentFile, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <input type="file" id="ContentFile" name="ContentFile" value="ActionHandlerForForm" />
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default"/>
            </div>
        </div>
    </div>
}

使用这样的模型和控制器：

public class ProjectContentViewModel
{
    public System.Guid ProjectContentId { get; set; }
    public Guid? ProjectSubmissionId { get; set; }
    //....
    [Display(Name = "Content Type")]
    public int ContentTypeId { get; set; }

    [Display(Name = "Content")]
    public HttpPostedFileBase ContentFile { get; set; }
}

[HttpPost]
[ValidateAntiForgeryToken]
public virtual ActionResult _submissionfiles(ProjectContentViewModel model)
{
    if (!ModelState.IsValid) return View(model);
    UploadedFile fileUploaded = null;
    if (model.ContentFile.ContentLength > 0)
    {
        // handle file stuff
    }
    //...
    db.SaveChanges();
    AddMessage("Content submitted successfully.");
    return View(model);
}

虽然有效但总是会返回整个页面。现在我已将Begin.Form修改为：

@using (Html.BeginForm
        (
            "_submissionfiles", 
            "Project", 
            FormMethod.Post,
            new { enctype = "multipart/form-data", id = "submissionFilesForm", @class = "ajaxformsubmit", data_target_div = "ProjectSubmissionPanel" }
        )
    )
{
    //....

这将允许我的javascript处理表单提交，并将结果返回到target_div。这适用于没有文件的其他形式，但问题是当我进入控制器时model.ContentFile是空的。我想这与我如何javascript序列化表单有关。

这是javascript：

BindAjaxForm = function() {
    $(".ajaxformsubmit").on("submit", function(e) {
        e.preventDefault(); //This prevents the regular form submit
        // I think this is where things need to get changed
        AjaxAction(this.action, this.method, $(this).serialize(), $(this).attr("data-target-div"))
        // ^^^^^^^^^^
        return false;
    });
};
AjaxAction = function (url, type, data, targetDivName) {
    var targetDiv = $("#" + targetDivName);
    $.ajax({
        url: url,
        type: type,
        data: data, // or this?
        success: function (result) {
            // Load/Refresh a div if we have one.
            if (typeof targetDiv != "undefined") {
                targetDiv.html('');
                targetDiv.html(result);
            }
        },
        error: function (data) {
            alert(data);
        }
    });
    return false;
};

在Javascript / Jquery中是否有办法将文件序列化，文件完好无损？

通过Ajax提交multipart / form-data会中断HttpPostedFileBase提交

0 个答案: