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>

我该如何做到这一点，以便我仍然可以使用 HTML.LabelFor / EditorFor / ValidationMessage 等相同的 Razor 语法？

Answer 1

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

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

Answer 2

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