使用jQuery表单插件进行ASP.NET MVC Ajax文件上传？

Question

我使用Jquery Ajax Form插件上传文件。代码如下：

AuthorViewModel

public class AuthorViewModel
{
    public int Id { get; set; }

    [Required(ErrorMessage = "{0} alanı boş bırakılmamalıdır!")]
    [Display(Name = "Yazar Adı")]
    public string Name { get; set; }

    [Display(Name = "Kısa Özgeçmiş")]
    public string Description { get; set; }

    [Display(Name = "E-Posta")]
    public string Email { get; set; }

    public string OrginalImageUrl { get; set; }

    public string SmallImageUrl { get; set; }
}

表单

@using (Html.BeginForm("_AddAuthor", "Authors", FormMethod.Post, new { id = "form_author", enctype = "multipart/form-data" }))
{
    <div class="editor-label">
        <input type="file" name="file" id="file" />
    </div>
    <div class="editor-label">
        @Html.LabelFor(model => model.Name)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Name)
    </div>
    <div class="editor-field">
        @Html.ValidationMessageFor(model => model.Name)
    </div>

    ...

    <div class="submit-field">
        <input type="submit" value="Ekle" class="button_gray" />
    </div>
}

脚本

<script>
$(function () {
    $('#form_author').ajaxForm({
        beforeSubmit: ShowRequest,
        success: SubmitSuccesful,
        error: AjaxError
    });
});

function ShowRequest(formData, jqForm, options) {
    $(".loading_container img").show();
}

function AjaxError() {
    alert("An AJAX error occured.");
}

function SubmitSuccesful(result, statusText) {
    // Veritabanı işlemleri başarılı ise Index sayfasına
    // geri dön, değilse partial-view sayfasını yenile
    if (result.url) {
        window.location.href = result.url;
    } else {
        $(".authors_content_container").html(result);
    }
}
</script>

控制器

[HttpPost]
public ActionResult _AddAuthor(AuthorViewModel viewModel, HttpPostedFileBase file)
{
    ...
    viewModel.OrginalImageUrl = file.FileName;
    ...
}

以上代码运行良好。

问题

如您所见，我将文件与ViewModel分开发布。有没有办法向ViewModel添加HttpPostedFileBase file属性，并在视图中将其绑定到viewModel，然后在ViewModel中将其发布到控制器？

我希望我能解释清楚。

编辑：

这些代码可以正常工作。我不想分别发布viewModel和HttpPostedFile。我希望像这样做：（如果可能的话。）

模型

public class AuthorViewModel
{
    public int Id { get; set; }

    [Required(ErrorMessage = "{0} alanı boş bırakılmamalıdır!")]
    [Display(Name = "Yazar Adı")]

    HttpPostedFileBase file{ get; set; }
    ...
}

控制器

[HttpPost]
public ActionResult _AddAuthor(AuthorViewModel viewModel)
{
    var file = viewModel.file;
    ...
}    

感谢您的选择。

- AliRıza Adıyahşi

---

不一样，我的代码是可以运行的。我问了另外一件事情。 - AliRıza Adıyahşi

Answer 1

您可以添加AliRıza Adıyahşi。

以下是实现此操作的属性：

public HttpPostedFileBase File { get; set; }

如小川马所说，现在您应在表单中添加 enctype ：

@using (Html.BeginForm("_AddAuthor", "Authors", FormMethod.Post, new { id = "form_author", enctype="multipart/form-data" }))
{
    <div class="editor-label">
        <input type="file" name="file" id="file" />
    </div>
    <div class="editor-label">
        @Html.LabelFor(model => model.Name)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Name)
    </div>
    <div class="editor-field">
        @Html.ValidationMessageFor(model => model.Name)
    </div>

    ...

    <div class="submit-field">
        <input type="submit" value="Ekle" class="button_gray" />
    </div>
}

在您的控制器操作中：

[HttpPost]
public ActionResult _AddAuthor(AuthorViewModel viewModel, HttpPostedFileBase file)
{
    if(file!=null)
    {
        viewModel.File=file; //Binding your file to viewModel property
    }
    //Now you can check for model state is valid or not.
    if(ModelState.IsValid)
    {
        //do something
    }
    else
    {
        return View(viewModel);
    }
}

希望它有所帮助。这是您需要的吗？

---

编辑 不需要额外的操作。它自动绑定到viewModel。

[HttpPost]
public ActionResult _AddAuthor(AuthorViewModel viewModel)
{
      var uploadedfile = viewModel.File;// Here you can get the uploaded file.
      //Now you can check for model state is valid or not.
    if(ModelState.IsValid)
    {
        //do something
    }
    else
    {
        return View(viewModel);
    }
}

这对我很有帮助！

- Karthik Chintala

---

误解了，请审查编辑后的问题。我使用了一个插件，所以不需要 enctype。代码运行正常... - AliRıza Adıyahşi

我想把HttpPostedFileBase放进ViewModel中。 - AliRıza Adıyahşi

@AliRızaAdıyahşi，你可以将HttpPostedFileBase放入vm中，但是你如何在视图中填充它呢？我们没有适用于<input type=file的帮助程序，对吧？ - Karthik Chintala

是的，我已经问过这个问题“如何在我的视图中填充它？”有没有其他方法将文件绑定到VM？ - AliRıza Adıyahşi

@AliRızaAdıyahşi 请检查我的编辑。尝试将调试器放置在您的操作结果中，并检查您是否已将发布的文件添加到viewModel中。 - Karthik Chintala

是的，如果属性名称和输入名称相同，则会自动绑定到viewModel。非常感谢。保留我的时间 :) - AliRıza Adıyahşi

Answer 2

可以将HttpPostedFileBase添加到您的ViewModel中，并在HTML中的表单中添加enctype = "multipart/form-data"。

请查看此链接： MVC。HttpPostedFileBase始终为空

- Xiaochuan Ma

---

误解了，请重新审查编辑后的问题。我使用插件，所以不需要 enctype。代码可以正常工作... - AliRıza Adıyahşi