2014-04-29 3 views
7

Attualmente ho un modulo di input in questo modo:Asp.Net MVC Razor BootStrap Forma ingresso

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

voglio convertirlo utilizzando il seguente codice di bootstrap:

<div class="form-group"> 
     <label for="inputVenueID" class="col-lg-2 control-label">Venue ID</label> 
     <div class="col-lg-10"> 
     <input type="text" class="form-control" id="inputVenueID" placeholder="VenueID"> 
     </div> 
    </div> 

Come faccio a fare questo, in modo che possa ancora utilizzare la stessa sintassi Razor di HTML.LabelFor/EditorFor/ValidationMessage ecc.?

risposta

7

È possibile aggiungere classi CSS utilizzando la sintassi del rasoio come mostrato di seguito. Tutto ciò che devi fare è specificare le classi Bootstrap che desideri utilizzare.

<div class="editor-field"> 
    @Html.TextBoxFor(model => model.VenueID, new { @class = "form-control" }) 
    @Html.ValidationMessageFor(model => model.VenueID) 
</div> 
+0

io cosa la casella di testo anche bisogno di venire dentro .col-lg-10 di classe – Adrian

9
<div class="form-group"> 
    @Html.LabelFor(model => model.VenueID, new { @class = "sr-only", @for = "txtVenueID" }) 
    @Html.TextBoxFor(model => model.VenueID, new { @class = "form-control", @placeholder = "ID:" , @id="txtVenueID" }) 
    @Html.ValidationMessageFor(model => model.VenueID) 
</div>