Asp.Net MVC Razor BootStrap输入表

Question

目前我有一个这样的输入表单:

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

我想将其转换为使用以下引导代码:

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

我该怎么做,所以我仍然可以使用相同Razor的HTML.LabelFor/ EditorFor/ ValidationMessageetc 语法？

Answer 1

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

Answer 2

您可以使用Razor语法添加CSS类,如下所示.您需要做的就是指定要使用的Bootstrap类.

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