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的答案中，似乎上传照片被视为一项单独的任务。即我需要一个单独的表格和控制器来上传照片（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

我所有的，你的问题是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获取照片。如果在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 2

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

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

Answer 3

您需要使用允许添加htmlAttributes的BeginForm（），因为您需要添加 new {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;
 ....
 }

在创建新模型时上载图像

3 个答案: