@Html.DropDownList не удалось добавить класс управления формой

Question

Мне нужно добавить класс в DropDownList, чтобы он выглядел более презентабельно. Поэтому я использую код ниже с htmlAttribute:

@Html.DropDownList("DepartmentId", "Select a Department:", htmlAttributes: new { @class = "form-control" })

Я получаю ошибки, потому что он говорит:

does not contain a definition for 'DropDownList' and the best extension method overload 'System.Web.Mvc.Html.SelectExtensions.DropDownList(System.Web.Mvc.HtmlHelper, string, System.Collections.Generic.IEnumerable<System.Web.Mvc.SelectListItem>, string)' has some invalid arguments

Может кто-нибудь научить меня, как добавить класс управления формой, чтобы сделать DropDownList?

Код, который работает:

@Html.DropDownList("DepartmentId", null, htmlAttributes: new { @class = "form-control" })

Answer 1

Там нет перегрузки DropDownList это позволяет вам указать как параметр по умолчанию, так и атрибуты HTML. DropDownListFor делает, однако.

Как вы заполняете свой выпадающий список с опциями? Если вы делаете это на стороне сервера в своем действии контроллера, вы можете (и, вероятно, должны) использовать DropDownListFor:

@model DepartmentViewModel
...
@Html.DropDownListFor(model => model.DepartmentId, Model.Departments, "Select a Department:", new { @class = "form-control" })

Ваш класс модели представления будет выглядеть так:

public class DepartmentViewModel {
    ...
    public int DepartmentId { get; set; }
    public IEnumerable<SelectListItem> Departments { get; set; }
    ...
}

И в вашем контроллере действие:

public ActionResult Index() {
    ...
    var model = new DepartmentViewModel();
    model.Departments = new List<SelectListItem> {
        new SelectListItem { Value = "1", Text = "First Department"},
        new SelectListItem { Value = "2", Text = "Second Department"}
    };
    ...
    return View(model);
}

Но если вы заполняете раскрывающийся список значениями с помощью javascript/jquery, было бы так же просто использовать обычный синтаксис HTML:

<select name="DepartmentId" id="DepartmentId" class="form-control">
    <option value="">Select a Department:</option>
<select>