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?

Mark Schultheiss · Accepted Answer · 2017-02-15 20:05:04Z

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, 2017 at 20:05

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

answered Nov 3, 2015 at 23:56

fernando yevenes

1521 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mark Schultheiss · Accepted Answer · 2017-02-15 20:05:47Z

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, 2017 at 20:05

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

answered Apr 29, 2014 at 1:29

jake

1,0278 silver badges9 bronze badges

1 Comment

Anirudha Gupta Over a year ago

I thing the textbox also need to come inside .col-lg-10 class

Collectives™ on Stack Overflow

Asp.Net MVC Razor BootStrap Input Form

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related