用于DropDownListFor的CSS类

Question

在MVC5应用程序中使用脚手架项目时，我看到类似于CSS类“form-control”的文本字段。这些字段都具有一致的圆角，相同的字体颜色/大小等。

现在我添加了一个使用“@ Html.DropdownListFor”的下拉列表，它是正方形的，具有不同的字体颜色。

我知道我可以指定在Razor中使用哪个CSS类，例如

@Html.DropDownListFor(model => model.OrderItemTypeId, (SelectList)ViewBag.OrderItemTypes, new { htmlAttributes = new { @class = "###########" } }) 

但是我不知道用什么来代替###########。如果我指定“形式控制”只是给了我上面描述的方框。 “形式控制选择”似乎也没有做太多。

这里展示其直接

 <div class="form-group"> 
      @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.OrderItemTypeId, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.DropDownListFor(model => model.OrderItemTypeId, (SelectList)ViewBag.OrderItemTypes, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.OrderItemType, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

上面一个好风格的文本字段一个更大的片断是我可以使用，这将使我的下拉外观与所有其他的文本字段我已经有相同的值？

谢谢

Answer 1

第三个参数已经是的htmlAttributes领域，使你的语法是错误的。这是你之后：

@Html.DropDownListFor(model => model.OrderItemTypeId 
    (SelectList)ViewBag.OrderItemTypes, 
    new { @class = "form-control etc" }) 

请参阅MSDN。

Answer 2

您需要确保它位于正确的外层标签层次结构和相应的类中。

请参见下面的代码，我从这篇文章了 - How to use Bootstrap 3 validation states with ASP.NET MVC Forms

<div class="row"> 
    <div class="col-sm-4 col-sm-offset-4"> 
     <div class="panel panel-default"> 
      <div class="panel-body"> 
       @using (Html.BeginForm("UserProfile", "Profile", FormMethod.Post, new { role = "form", id="userForm" })) { 

        @* State selection dropdown *@ 
        <div class="form-group"> 
         @Html.LabelFor(m => m.State) 
         @Html.DropDownListFor(m => m.State, // Store selected value in Model.State 

               // This argument needs some explanation - here we take a Distionary<string, string> 
               // and turn it into an instance of SelectList, see blog post for more details 
               new SelectList(Model.States, "Key", "Value"), 

               // Text for the first 'default' option 
               "- Please select your state -", 

               // A class name to put on the "<select>" 
               new { @class = "form-control" } 
              ) 
         @Html.ValidationMessageFor(m => m.State) 
        </div> 

        <button type="submit" class="btn btn-primary">Update</button> 
       } 
      </div> 
     </div> 
    </div> 
</div>