Asp.Net MVC Razor BootStrap Input Form

Question

Currently I have an Input form like this:

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

I want to convert it to using the following bootstrap code:

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

How do I do this, so that I can still use the same Razor syntax of HTML.LabelFor / EditorFor / ValidationMessage etc?

score 13 · Accepted Answer · edited Feb 15 '17 at 20:05

13

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

edited Feb 15 '17 at 20:05

Mark Schultheiss

32,614
12
69
100

answered Nov 03 '15 at 23:56

fernando yevenes

152
1
4

score 9 · Answer 2 · edited Feb 15 '17 at 20:05

9

You can add CSS classes using Razor syntax as shown below. All you need to do is specify the Bootstrap class(es) you want to use.

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

edited Feb 15 '17 at 20:05

Mark Schultheiss

32,614
12
69
100

answered Apr 29 '14 at 01:29

jake

1,027
8
9

I thing the textbox also need to come inside .col-lg-10 class – Anirudha Gupta Apr 29 '14 at 01:58

Asp.Net MVC Razor BootStrap Input Form

2 Answers2

Linked