创建新模型时上传图像

Question

我将在 ASP.Net MVC 应用程序中为我的用户创建配置文件。用户创建控制器是这样的：

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(UserProfileViewModel userViewModel)
{
    if (ModelState.IsValid)
    {
        ....
    }

    return View(userViewModel);
}

此外，每个用户模型都有多个属性，包括一张照片。一切顺利，直到我想添加一个输入字段来接受照片。

@Html.TextBoxFor(model => model.ImageUrl, new { type = "file" })

我将以下字段添加到UserProfileViewModel：

[Display(Name = "Profile Photo")]
public HttpPostedFileBase ImageUrl { get; set; }

在上传照片和回复my previous question 的 sn-ps 中，上传照片似乎被视为一项单独的任务。即我需要一个单独的表单和控制器来上传照片 (like first part of this answer)。

我想知道有什么方法可以让我以一种形式创建整个用户配置文件并将其照片传递给同一个控制器（其中包括UserProfileViewModel 中的照片）？

我需要注意我不知道使用 jQuery 或 AJAX，我想使用标准的 HTML 助手来完成这项任务。

更新：我的视图如下所示：

@model ProjectManager.Models.UserProfileViewModel 

@{
    ViewBag.Title = "Create";
}

<h2>@ViewBag.Title</h2>


@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>User Profile</h4>
        <hr />
        @Html.ValidationSummary(true)

        <div class="form-group">
            @Html.LabelFor(model => model.Description, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Description)
                @Html.ValidationMessageFor(model => model.Description)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name)
                @Html.ValidationMessageFor(model => model.Name)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Age, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Age)
                @Html.ValidationMessageFor(model => model.Age)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.ImageUrl, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.ImageUrl, new { type = "file" })
                @Html.ValidationMessageFor(model => model.ImageUrl)
            </div>
        </div>

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

<div class="rtl text-right">
    @Html.ActionLink("Back To List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Answer 1

除非您的表单元素包含enctype = "multipart/form-data" 属性，否则不会在请求中发送文件输入。将视图代码更改为

@using (Html.BeginForm("Create", "User", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    ....
}

Answer 2

我所知道的，你的问题是I want to know are there any methods that I can create whole user profile in one form and pass its photo to the same controller (which included photo in UserProfileViewModel)?

是的。有可能的。如果你按照Stephen Muecke 所说的那样覆盖表格，你应该得到带有视图模型的照片。如果您在 viewmodel 中得到 null，您也可以从请求中检索文件（照片）。

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(UserProfileViewModel userViewModel)
  {
    if (ModelState.IsValid)
    {
      HttpPostedFileBase fileUploadObj= Request.Files[0];
      //for collection
      HttpFileCollectionBase fileUploadObj= Request.Files;
    ....
   }

   return View(userViewModel);
  }

希望这会有所帮助:)

Answer 3

您需要使用允许您添加 htmlAttributes 的 BeginForm()，并且因为您需要添加 新 {enctype = "multipart/form-data" }

@using (Html.BeginForm("UserProfileViewModel ", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))

控制器

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult UserProfileViewModel(UserProfileViewModel userViewModel)
{
if (ModelState.IsValid)
{
  HttpPostedFileBase fileUpload= Request.Files[0];
  //for collection
  HttpFileCollectionBase fileUpload= Request.Files;
 ....
 }