ASP.NET MVC3网页无法将文件上传到服务器

Question

我试图将一个分类对象存储到我的数据库中，并上传一张图片，以便我可以引用这个分类。

分类已经完美地存储了，但是出于某些原因，图片没有被上传。当我调试时，我发现我的应用程序从未进入将文件存储在服务器上的方法，因为我的文件是“Null”。

模型：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Entity;

namespace SkyLearn.Areas.Categories.Models
{
    public class Category
    {
        public int ID { get; set; }
        public string Title { get; set; }
        public string Icon { get; set; }
        public string Description { get; set; }
    }

    public class CategoryDBContext : DbContext
    {
        public DbSet<Category> categories { get; set; }
    }
}

控制器：

//
// POST: /Categories/Category/Create
[Authorize(Roles = "administrator")]
[HttpPost]
public ActionResult Create(Category category, HttpPostedFileBase Icon)
{
    if (Icon != null && Icon.ContentLength > 0)
    {
        // extract only the filename
        var fileName = Path.GetFileName(Icon.FileName);
        // store the file inside ~/App_Data/uploads folder
        var path = Path.Combine(Server.MapPath("../Content/icons/"), fileName);
        Icon.SaveAs(path);
        category.Icon = fileName;
    }

    if (ModelState.IsValid)
    {
        db.categories.Add(category);
        db.SaveChanges();
        return RedirectToAction("Index");  
    }

    return View(category);
}

视图：

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.master" Inherits="System.Web.Mvc.ViewPage<SkyLearn.Areas.Categories.Models.Category>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Create
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<h2>Create</h2>

<script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>" type="text/javascript"></script>

<% using (Html.BeginForm()) { %>
<form action="" method="post" enctype="multipart/form-data">
    <%: Html.ValidationSummary(true) %>
    <fieldset>
        <legend>Category</legend>

        <div class="editor-label">
            <%: Html.LabelFor(model => model.Title) %>
        </div>
        <div class="editor-field">
            <%: Html.EditorFor(model => model.Title) %>
            <%: Html.ValidationMessageFor(model => model.Title) %>
        </div>

        <div class="editor-label">
            <%: Html.LabelFor(model => model.Icon) %>
        </div>
        <div class="editor-field">
            <input type="file" name="icon" id="icon"/>
        </div>

        <div class="editor-label">
            <%: Html.LabelFor(model => model.Description) %>
        </div>
        <div class="editor-field">
            <%: Html.EditorFor(model => model.Description) %>
            <%: Html.ValidationMessageFor(model => model.Description) %>
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
</form>
<% } %>

<div>
    <%: Html.ActionLink("Back to List", "Index") %>
</div>

</asp:Content>

有人能告诉我为什么它不会进入保存文件的方法吗？非常感谢。

我尝试在stackoverflow上查看其他答案，即使有些人和我遇到了相同的问题，但他们的解决方案并没有解决我的问题。

我还尝试在config.web中更改上传大小等内容。

请帮帮我 :)

- AronChan

---

我不知道浏览器如何处理嵌套表单，但是使用Html.BeginForm()然后手动编写一个表单标签是没有意义的。Html.BeginForm()有一个重载方法可以输出HTML属性：Html.BeginForm(action, controller, FormMethod.Post, new { enctype="multipart/form-data" })。 - John H

如果您愿意将其作为答案添加，我会立即接受它。这解决了我所有的问题 :) - AronChan

Answer 1

我不知道浏览器会如何处理嵌套的表单，但是使用Html.BeginForm()然后手动编写表单标记没有意义。Html.BeginForm()具有输出HTML属性的重载：

Html.BeginForm(action, controller, 
    FormMethod.Post, new { enctype="multipart/form-data" })

- John H

Answer 2

ModelBinder 可能出了问题。当你的表单设置为这样时（所有表单值都将与 Category 属性匹配），你不能为你的操作方法命名为 Icon 的输入，同时在你的 Category 类上有一个名为 Icon 的属性。

此外，你的表单字段名称是小写的 "icon"，而不是你在 C# 中匹配的大写字母 "Icon"。

你可以创建一个自定义类，让操作方法从表单提交中接收它：

public class CategoryWithFile : Category
{
    public HttpPostedFileBase IconFile { get; set; }
}

然后将其作为您的操作方法的参数

public ActionResult Create(CategoryWithFile category)

并将您的表单更改为：

 <div class="editor-label">
     <label for="IconFile">Icon: </label>
 </div>
 <div class="editor-field">
     <input type="file" name="IconFile" id="IconFile"/>
 </div>

- ericb