在創建新模型時上傳圖像

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

文件輸入沒有在REQ發送除非您的表單元素包含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獲取照片。如果您在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

您需要使用BeginForm（），它允許您添加htmlAttributes，因爲你需要添加 新{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; 
.... 
}