Question

我的视图模型如下所示：

public class UploadImageForm
{
    public string Name { get; set; }
    public HttpPostedFileBase Image { get; set; }
}

但它呈现为：

<img src="http://i.imgur.com/E4sRP.png" />

当.cshtml看起来像这样：

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>ImageMeta</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Image)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Image)
            @Html.ValidationMessageFor(model => model.Image)
        </div>

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

如何让它显示标准<input type="file">上传控件？我不确定如何自定义“编辑器”，或者它是否能正确上传。

通过intellisense发现了这些Html.IdFor和.NameFor个助手。现在我可以做：

<input id="@Html.IdFor(m => m.Image)" type="file" name="@Html.NameFor(m => m.Image)"/>

我非常喜欢，因为它避免了魔术字符串来创建映射。仍然试图弄清楚是否有完整输入的Html助手，如果没有，如何创建一个。

Answer 1

不太确定是否有用于文件输入（上传）的razor html助手。但是你可以使用普通的html输入语法。

@using (Html.BeginForm("Create", "ImageFile", FormMethod.Post, new {enctype = "multipart/form-data"})) {
    <input type="file" name="file1" id="file1" />
}

编辑： ImageFileController操作如下所示：

[HttpPost]
public ActionResult Create(HttpPostedFileBase file) {

  if (file.ContentLength > 0) {
    string name = Path.GetFileName(file.FileName);

    // HINT: Im uploading to App data folder!
    string path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
    file.SaveAs(path);
  }
  return RedirectToAction("Index");
}

此外， Microsoft.Web.Helpers 命名空间中有一些剃须刀帮助程序，您可以从here找到它。

创建用于上传图像的ViewModel的正确方法是什么？

1 个答案: