Question

在MVC5应用程序中使用scaffolded items，我看到类似于CSS类和＃34; form-control＆＃34;的文本字段。这些字段都具有一致的圆角，相同的字体颜色/大小等。

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

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

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

但我不知道该替换###########。如果我指定＆＃34; form-control＆＃34;只是给我上面描述的方框。＆＃34;表格控制选择＆＃34;似乎也做不了多少。

这是一个更大的片段，在其正上方显示一个风格良好的文字字段

        <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

您需要确保它位于具有相应类的外部标记的适当层次结构中。

请参阅我从本文中获取的以下代码 - 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>

Answer 2

的第三个参数是 htmlAttributes字段，因此您的语法错误。这就是你要追求的目标：

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

请参阅MSDN。

DropDownListFor的CSS类

2 个答案: