Asp.net-Mvc

MVC:如何將文件上傳和其他表單欄位發佈到一個操作

  • March 1, 2011

我正在創建一個文件庫應用程序,DocumentController它需要上傳庫中每個文件的縮略圖。我想將文件上傳欄位與其他欄位(標題、描述、類別 ID 等)保持在同一個創建/編輯表單上。

問題是我不確定我是否可以混合或嵌套表單標籤

Html.BeginForm("Create", "Document", FormMethod.Post, enctype = "multipart/form-data")

Html.BeginForm()

我的看法如下:

<%@ 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>

我的控制器只採用 Document 模型並HttpPostedFileBase嘗試將文件上傳到伺服器並將 Document 保存到儲存庫

[HttpPost]
public ActionResult Create(Document document, HttpPostedFileBase uploadFile)
{

    if (ModelState.IsValid)
    {
        //Process file upload
        //Update repository

     }

      return View("List");
 }

所以我想知道是否可以在同一操作上進行文件上傳和更新儲存庫,以及我應該如何建構我的視圖以促進這一點。

我看過 Steve Sanderson 的好書(Pro ASP.NET MVC 2 Framework),他的 Sports Store 範例應用程序有一個文件上傳表單,其中有標準表單元素與文件上傳“multipart/form-data”元素混合。所以看起來 multipart 類型足以滿足頁面上的所有表單元素。雖然上傳的圖像保存在數據庫中,但我確信我可以在同一個操作中執行 file.SaveAs()。謝謝桑德森先生。希望你不介意我複制你的程式碼……

看法

   <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>

控制器

   [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);
   }

引用自:https://stackoverflow.com/questions/5149116