asp.net MVC entrée de l'attribut de type de fichier avec bootstrap style casuing résultat étrange

Je veux avoir un fichier d'entrée de l'attribut avec le même style que le bouton de téléchargement comme on le voit dans l'image ci-dessous. Le bouton de téléchargement est en utilisant bootstrap. Lorsque je demande l'amorce du bouton avec Un "TextBoxFor", j'ai cette bizarre regardant bouton. Lorsque je demande l'amorce du bouton B avec "LabelFor", j'obtiens le style désiré, seulement sans la fonctionnalité du fichier d'entrée de l'attribut.

Ma question est, comment puis-je obtenir un fichier-champ de saisie avec un certain bootstrap style appliqué et de maintenir sa fonctionnalité. Avec le même résultat(style) comme si elle était appliquée à soumettre-type de l'attribut. Je préfère utiliser une des pages html helpers, parce que je suis en train d'essayer de les comprendre.

asp.net MVC entrée de l'attribut de type de fichier avec bootstrap style casuing résultat étrange

Un: 

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

B:

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

Le bouton de téléchargement de:

<input type="submit" class="btn btn-default" value="Upload" />
InformationsquelleAutor BARJ | 2015-05-25
  1. 4

    C'est l'aspect normal html d'une entrée de fichier de type (A), et l'aspect de changer de navigateur à l'autre.
    Si vous souhaitez modifier tel qu'il apparaît, vous devez travailler avec un peu de CSS de cacher les véritables entrée avec un autre faux ou quelque chose du genre.

    Ici est un bon exemple pour ce faire avec bootstrap 3.

    InformationsquelleAutor Germano Plebani
  2. 1

    C'est d'un an, mais je viens de passer un moment en difficulté avec cela et pensé que je vous ferais partager ma solution. Je serais intéressé d'entendre comment vous l'avez résolu ce!

    J'ai enveloppé le rasoir trucs avec un div qui utilise le formulaire de contrôle de la classe, comme suit:

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

    Cependant, depuis Bootstrap du formulaire de contrôle de la classe met une bordure autour de choses par défaut, j'ai dû remplacer ceux.

    border: none;
box-shadow: unset;

    Le résultat a été assez propre.

    asp.net MVC entrée de l'attribut de type de fichier avec bootstrap style casuing résultat étrange

    InformationsquelleAutor killa-byte