MVC 5 中 <select> 的默认选项

Question

我在 ASP.NET MVC 5 应用程序中像这样使用 <select>：

<div class="form-group">
  <label for="sel1" class="text-primary">Select Static Analysis Tool</label>
  <select class="form-control" name="ToolName" id="sel1" required>
    @foreach(var item in ViewBag.ToolList)
    {
      <option>@item</option>
    }
  </select>
  <input type="submit" value="Submit" class="btn btn-default btn-primary btn-lg" />
</div>

我想在 <select> 菜单中使用 Please Select 这样的默认文本。我怎样才能得到它？

Answer 1

在评论中呼应 Skelly 的 link（以及 this comment too), I'd caution you that this just isn't how <select> lists are designed to work. A label will serve the same purpose, and is designed for this. If you do move ahead in this way, you're forced to start asking questions like :

"user can select Please Select and submit that. How can i stop user from doing that?"

现在事情看起来有点不对劲。

无论如何，我认为这是错误的处理方式，但我会这样做。首先，我将使用 ViewModel（不是 ViewBag）并将 <select> 列表合并到其中。这样，您可以使用 HTML 助手：我认为这是在 MVC5 中创建 SelectList 的更正统的方法。

public class ToolViewModel {
    public ToolDropdownList ToolDropdownList { get; set; }
    public string SelectedTool { get; set; }
    // ...
}

public class ToolDropdownList {
    public List<SelectListItem> Tools { get; set; }
}

在使用 ToolViewModel ViewModel 渲染视图之前，ToolDropdownList 必须填充 SelectListItems。其中每一个都代表 select 列表中的一个工具，具有 Text、Value 和 Selected 属性。

这是您要添加 Please select SelectListItem 的地方。

然后我将使用 HTML 助手渲染视图并使用您的 Bootstrap 类.

装饰助手

<div class="form-group">
    @Html.LabelFor(m => m.SelectedTool, new { @class="text-primary" })
    @Html.DropDownListFor(m => m.SelectedTool,
        new SelectList(Model.ToolDropdownList.Tools, "Value", "Text"),
        new { @class = "form-control", @id = "sel1", @required = "required" })
</div>

如果您仍然 reeeeally 想要允许用户提交带有 Please select... selected 的表单，您可以选择某种特殊客户端或服务器端验证规则允许这样做。

Answer 2

您可以使用 MVC 的 html 帮助程序

简化代码并使用强类型模型绑定

假设您的模型属性是

[Display(Name = "Select Static Analysis Tool")]
[Required]
public string ToolName { get; set; }

然后在视图中

@Html.LabelFor(m => m.ToolName, new { @class = "text-primary" })
@Html.DropDownListFor(m => m.ToolName, new SelectList(ViewBag.ToolList), "-Please select-", new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.ToolName)

这将为 select

生成以下 html

<select class="form-control" data-val="true" data-val-required="The Name field is required." id="ToolName" name="ToolName">
  <option value>-please select-</option>
  <option>Tool Name 1</option>
  <option>Tool Name 2</option>
  ....
</select>

请注意，第一个选项有一个 null 值，因此如果第一个选项是 selected，验证将失败。

如果你想进一步减少这 3 行，你可以考虑 this answer

中的选项

MVC 5 中 <select> 的默认选项

Default option for <select> in MVC 5

html

asp.net-mvc

asp.net-mvc-5

twitter-bootstrap-3