具有引导样式的类型文件的asp.net MVC输入属性导致奇怪的结果答案

【问题标题】：asp.net MVC input attribute of type file with bootstrap style casuing strange result具有引导样式的类型文件的asp.net MVC输入属性导致奇怪的结果
【发布时间】：2015-05-25 11:58:36
【问题描述】：

我想要一个与上传按钮样式相同的文件输入属性，如下图所示。上传按钮正在使用引导程序。当我使用“TextBoxFor”将引导程序应用于按钮 A 时，我得到了这个看起来很奇怪的按钮。当我使用“LabelFor”将引导程序应用于按钮 B 时，我得到了所需的样式，只是没有文件输入属性的功能。

我的问题是，如何获得应用了某种引导样式的文件输入字段并保持其功能。具有与应用于提交类型属性相同的结果（样式）。我更喜欢使用其中一个 html 助手，因为我试图理解它们。

答：

@Html.TextBoxFor(m => m.File, new { type = "file", @class = "btn btn-default btn-file" })

乙：

@Html.LabelFor(m => m.File, new { type = "file", @class = "btn btn-default btn-file" })

上传按钮：

<input type="submit" class="btn btn-default" value="Upload" />

【问题讨论】：

标签： css asp.net-mvc twitter-bootstrap razor

【解决方案1】：

这是 html 输入类型文件 (A) 的正常方面，并且从浏览器到浏览器的方面会发生变化。如果你想改变它的外观，你必须使用一些 CSS 来隐藏真实的输入，用另一个假的或类似的东西。

Here 是使用 bootstrap 3 执行此操作的一个很好的示例。

【讨论】：

【解决方案2】：

这已经一岁了，但我只是花了一段时间努力解决这个问题，并想我会分享我的解决方案。我很想知道你是如何解决这个问题的！

我用一个使用表单控制类的 div 包装了剃须刀的东西，如下所示：

...
<div class="col-md-8">
     <div class="form-control">
          @Html.TextBoxFor(model => model.Filepath, new { type = "file", id = "filepath", accept = ".jpg, .jpeg, .gif, .png" })
          @Html.ValidationMessageFor(model => model.Filepath, "", new { @class = "text-danger", style = "font-weight: bold;" })
          <p class="help-block">
               Images must be 300x300 pixels or smaller, and in a .PNG, .JPG, or .GIF format.
          </p>
      </div>
</div>
...

但是，由于 Bootstrap 的表单控件类默认设置了边框，所以我不得不覆盖这些。

border: none;
box-shadow: unset;

结果很干净。

【讨论】：