asp.net-mvc MVC：如何将文件上传和其他表单字段发布到一个操作中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5149116/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
MVC: How to post File Upload and other form fields to one action
提问by Brendan
I am creating a document library application with a DocumentControllerthat needs to upload a thumbnail image of each doument in the library. I want to keep the File Upload field on the same Create/Edit form as the other fields (Title, Description, CategoryId etc).
The problem is I'm not sure if I can mix or nest the form tags for
我正在创建一个文档库应用程序，DocumentController它需要上传库中每个文件的缩略图。我想将 File Upload 字段保留在与其他字段（标题、说明、CategoryId 等）相同的创建/编辑表单上。
问题是我不确定我是否可以混合或嵌套表单标签
Html.BeginForm("Create", "Document", FormMethod.Post, enctype = "multipart/form-data")
and
和
Html.BeginForm()
My view is as follows:
我的看法如下：
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Publications.WebUI.Models.DocumentEditViewModel >" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Edit
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<fieldset>
<legend>Edit
<%= Html.Truncate(Model.Document.Title, 50)%></legend>
<%= Html.ValidationSummary(false) %>
<% using (Html.BeginForm())
{ %>
<div class="editor-label">
<%= Html.LabelFor(model => model.Document.Title) %>
</div>
<div class="editor-field">
<%= Html.HiddenFor(model => model.Document.DocumentId ) %>
<%= Html.ValidationMessageFor(model => model.Document.Title) %>
<%= Html.TextBoxFor(model => model.Document.Title)%>
</div>
<div class="editor-label">
<%= Html.LabelFor(model => model.Document.DocumentUrl)%>
</div>
<div class="editor-field">
<%= Html.ValidationMessageFor(model => model.Document.DocumentUrl)%>
<%= Html.TextBoxFor(model => model.Document.DocumentUrl)%>
</div>
<div class="editor-label">
<%= Html.LabelFor(model => model.Document.Description)%>
</div>
<div class="editor-field">
<%= Html.ValidationMessageFor(model => model.Document.Description)%>
<%= Html.TextAreaFor(model => model.Document.Description) %>
</div>
<div class="editor-label">
<%= Html.LabelFor(model => model.Document.ThumbnailUrl )%>
</div>
<div class="editor-field">
<% using (Html.BeginForm("Create", "Document",
FormMethod.Post, new { enctype = "multipart/form-data" }))
{%>
<%= Html.ValidationMessageFor(model => model.Document.ThumbnailUrl )%>
<input name="uploadFile" type="file" />
<% } %>
</div>
<div class="formActions">
<div class="backNav">
<%= Html.ActionLink("< Back to List", "Index") %>
</div>
<div class="submit">
<input type="submit" value="Save" />
</div>
<% } %>
</div>
</fieldset>
</asp:Content>
My controller just takes the Document model and HttpPostedFileBaseand tries to upload the file to the server and save the Document to the repository
我的控制器只是采用文档模型并HttpPostedFileBase尝试将文件上传到服务器并将文档保存到存储库
[HttpPost]
public ActionResult Create(Document document, HttpPostedFileBase uploadFile)
{
if (ModelState.IsValid)
{
//Process file upload
//Update repository
}
return View("List");
}
So I'm wondering if it is possible to do the file upload and update the repository on the same action and how should I structure my View to facilitate this.
所以我想知道是否可以在同一操作上进行文件上传和更新存储库，以及我应该如何构建我的视图以促进这一点。
回答by Brendan
I had a look in Steve Sanderson's great book (Pro ASP.NET MVC 2 Framework) and his Sports Store sample application has a file upload form where there are standard form elements mixed with a file upload "multipart/form-data" element. So it looks like the multipart type suffices for all form elements on the page. Although the uploaded image is being saved in the db I'm sure I can do a file.SaveAs() within the same Action. Thanks Mr. Sanderson. Hope you dont mind me reproducing your code...
我查看了 Steve Sanderson 的好书（Pro ASP.NET MVC 2 Framework），他的 Sports Store 示例应用程序有一个文件上传表单，其中有标准表单元素与文件上传“multipart/form-data”元素混合。所以看起来 multipart 类型足以满足页面上的所有表单元素。虽然上传的图像被保存在数据库中，但我确信我可以在同一个操作中执行 file.SaveAs() 。谢谢桑德森先生。希望你不介意我复制你的代码......
VIEW
看法
<asp:Content ContentPlaceHolderID="MainContent" runat="server">
<h1>Edit <%= Model.Name %></h1>
<% using (Html.BeginForm("Edit", "Admin", FormMethod.Post,
new { enctype = "multipart/form-data" })) { %>
<%= Html.Hidden("ProductID") %>
<p>
Name: <%= Html.TextBox("Name") %>
<div><%= Html.ValidationMessage("Name") %></div>
</p>
<p>
Description: <%= Html.TextArea("Description", null, 4, 20, null) %>
<div><%= Html.ValidationMessage("Description") %></div>
</p>
<p>
Price: <%= Html.TextBox("Price") %>
<div><%= Html.ValidationMessage("Price") %></div>
</p>
<p>
Category: <%= Html.TextBox("Category") %>
<div><%= Html.ValidationMessage("Category") %></div>
</p>
<p>
Image:
<% if(Model.ImageData == null) { %>
None
<% } else { %>
<img src="<%= Url.Action("GetImage", "Products",
new { Model.ProductID }) %>" />
<% } %>
<div>Upload new image: <input type="file" name="Image" /></div>
</p>
<input type="submit" value="Save" />
<%=Html.ActionLink("Cancel and return to List", "Index") %>
<% } %>
</asp:Content>
CONTROLLER
控制器
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Edit(Product product, HttpPostedFileBase image)
{
if (ModelState.IsValid) {
if (image != null) {
product.ImageMimeType = image.ContentType;
product.ImageData = new byte[image.ContentLength];
image.InputStream.Read(product.ImageData, 0, image.ContentLength);
}
productsRepository.SaveProduct(product);
TempData["message"] = product.Name + " has been saved.";
return RedirectToAction("Index");
}
else // Validation error, so redisplay same view
return View(product);
}
