在具有分部视图的 jQuery 对话框中上传文件

本文关键字：对话框 文件 jQuery 视图 | 更新日期: 2023-09-27 18:32:10

我有一个页面，您可以在其中编辑客户端。在此页面上，您还可以为客户端上传文件。单击一个按钮，将打开一个 jQuery 对话框，上传一个文件，然后单击"保存"。

这是我的/客户端/编辑视图：

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        // add file click event
        $("a#addFile").click(function () {
            $.ajax({
                url: '@Url.Content("/ClientFiles/Create/")' + @Model.ClientId,
                context: document.body,
                success: function (data) {
                    // open dialog with Create partial view data
                    $("#dialog-add").html(data).dialog("open");
                }
            });
            return false;
        });

        // add file dialog settings
        $("#dialog-add").dialog({
            modal: true,
            buttons: {
                "Save": function () {
                    $.validator.unobtrusive.parse("#AddFileForm");
                    if ($("#AddFileForm").valid()) {
                        $.post("/ClientFiles/Create", $("#AddFileForm").serialize(),
                            function (data) {
                                $("#dialog-add").dialog("close");   // close dialog
                            });
                    }
                }
            }
        });
    });
</script>
@using (Html.BeginForm("Edit", "Clients", FormMethod.Post))
{
    @Html.HiddenFor(m => m.ClientId)            
    <a id="addFile">Add a new file</a>
    <div id="dialog-add" title="" style="display:none"></div>        
    <input type="submit" value="Save" />            
}

这是我的/ClientFiles/Create部分视图：

@model Models.ClientFileViewModel
@using (Html.BeginForm("Create", "ClientFiles", FormMethod.Post, new { @id = "AddFileForm", enctype = "multipart/form-data" }))
{
    @Html.ValidationSummary(true)
    @Html.HiddenFor(model => model.ClientId)    
    @Html.TextBoxFor(model => model.ModelFile, new { type = "file" })
    @Html.ValidationSummary()
}

这是我的客户端文件视图模型：

public class ClientFileViewModel
{
    [ScaffoldColumn(false)]
    public int ClientFileId { get; set; }
    public int ClientId { get; set; }
    public HttpPostedFile ModelFile { get; set; }
}

最后，我的ClientFilesController方法：

public ActionResult Create(int id)
{
    return PartialView(new ClientFileViewModel { ClientId = id  } );
}
public JsonResult Create(ClientFileViewModel viewModel)
{
    if (ModelState.IsValid)
    {
        if (viewModel.ModelFile != null)
        {
            // upload file here
        }
    }
    return Json(new { success = true });
}

所以一切都很好，直到我发布到Create(ClientFileViewModel viewModel).当我通过调试器时，视图模型包含ClientId，但ModelFile为空。

我是否做错了什么，导致文件无法与视图模型一起传递？

在具有分部视图的 jQuery 对话框中上传文件

你应该使用基类 （ HttpPostedFileBase ），即替换：

public HttpPostedFile ModelFile { get; set; }

跟：

public HttpPostedFileBase ModelFile { get; set; }

在您的视图模型中。

话虽如此，这只是您问题的一半。您似乎正在使用 AJAX 请求来提交表单：

$.post("/ClientFiles/Create", $("#AddFileForm").serialize(),

不能使用 AJAX 将文件上载到服务器。您可以使用一些插件，例如jquery.form，它支持文件输入字段并生成隐藏的iframe来规避此限制。因此，如果您决定使用该插件，您可以执行以下操作来 AJAXify 它：

"Save": function () {
    $.validator.unobtrusive.parse("#AddFileForm");
    if ($("#AddFileForm").valid()) {
        $("#AddFileForm").ajaxSubmit(function() {
            $("#dialog-add").dialog("close");
        });
    }
}

其他允许您上传文件的流行插件是Uploadify，Blueimp文件上传，Ajax Upload，...

相关文章：