Использование помощников Select Tag для визуализации элемента SELECT
В вашем действии GET создайте объект вашей модели представления, загрузите EmployeeListсвойство коллекции и отправьте его в представление.
public IActionResult Create()
{
var vm = new MyViewModel();
vm.EmployeesList = new List<Employee>
{
new Employee { Id = 1, FullName = "Shyju" },
new Employee { Id = 2, FullName = "Bryan" }
};
return View(vm);
}
А в представлении создания создайте новый SelectListобъект из EmployeeListсвойства и передайте его как значение для asp-itemsсвойства.
@model MyViewModel
<form asp-controller="Home" asp-action="Create">
<select asp-for="EmployeeId"
asp-items="@(new SelectList(Model.EmployeesList,"Id","FullName"))">
<option>Please select one</option>
</select>
<input type="submit"/>
</form>
И ваш метод действия HttpPost для принятия отправленных данных формы.
[HttpPost]
public IActionResult Create(MyViewModel model)
{
// check model.EmployeeId
// to do : Save and redirect
}
Или
Если у вашей модели представления есть List<SelectListItem>свойство для выпадающих элементов.
public class MyViewModel
{
public int EmployeeId { get; set; }
public string Comments { get; set; }
public List<SelectListItem> Employees { set; get; }
}
И в твоих действиях,
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "1"},
new SelectListItem {Text = "Sean", Value = "2"}
};
return View(vm);
}
И в представлении, вы можете напрямую использовать Employeesсвойство для asp-items.
@model MyViewModel
<form asp-controller="Home" asp-action="Create">
<label>Comments</label>
<input type="text" asp-for="Comments"/>
<label>Lucky Employee</label>
<select asp-for="EmployeeId" asp-items="@Model.Employees" >
<option>Please select one</option>
</select>
<input type="submit"/>
</form>
Класс SelectListItemпринадлежит Microsoft.AspNet.Mvc.Renderingпространству имен.
Убедитесь, что вы используете явный закрывающий тег для элемента select. Если вы используете подход самозакрывающегося тега, помощник тега отобразит пустой элемент SELECT!
Подход ниже не будет работать
<select asp-for="EmployeeId" asp-items="@Model.Employees" />
Но это будет работать.
<select asp-for="EmployeeId" asp-items="@Model.Employees"></select>
Получение данных из таблицы базы данных с использованием структуры сущностей
Приведенные выше примеры используют жестко закодированные элементы для параметров. Поэтому я подумал, что добавлю некоторый пример кода для получения данных с использованием Entity Framework, так как многие люди используют это.
Давайте предположим, что у вашего объекта DbContext есть свойство с именем Employees, которое имеет тип, в DbSet<Employee>котором Employeeкласс сущности имеет свойство Idand, Nameподобное этому
public class Employee
{
public int Id { set; get; }
public string Name { set; get; }
}
Вы можете использовать запрос LINQ, чтобы получить сотрудников, и использовать метод Select в выражении LINQ, чтобы создать список SelectListItemобъектов для каждого сотрудника.
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = context.Employees
.Select(a => new SelectListItem() {
Value = a.Id.ToString(),
Text = a.Name
})
.ToList();
return View(vm);
}
Предполагается, contextчто ваш объект контекста БД. Код представления такой же, как указано выше.
Использование SelectList
Некоторые люди предпочитают использовать SelectListкласс для хранения элементов, необходимых для отображения параметров.
public class MyViewModel
{
public int EmployeeId { get; set; }
public SelectList Employees { set; get; }
}
Теперь в вашем действии GET вы можете использовать SelectListконструктор для заполнения Employeesсвойства модели представления. Убедитесь , что вы указав dataValueFieldи dataTextFieldпараметры.
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = new SelectList(GetEmployees(),"Id","FirstName");
return View(vm);
}
public IEnumerable<Employee> GetEmployees()
{
// hard coded list for demo.
// You may replace with real data from database to create Employee objects
return new List<Employee>
{
new Employee { Id = 1, FirstName = "Shyju" },
new Employee { Id = 2, FirstName = "Bryan" }
};
}
Здесь я называю GetEmployeesметод , чтобы получить список объектов Employee, каждый с Idи FirstNameсобственностью , и я использую эти свойства , как DataValueFieldи DataTextFieldиз SelectListобъекта , который мы создали. Вы можете изменить жестко закодированный список на код, который считывает данные из таблицы базы данных.
Код вида будет таким же.
<select asp-for="EmployeeId" asp-items="@Model.Employees" >
<option>Please select one</option>
</select>
Визуализируйте элемент SELECT из списка строк.
Иногда вам может потребоваться отобразить элемент select из списка строк. В этом случае вы можете использовать SelectListконструктор, который принимает толькоIEnumerable<T>
var vm = new MyViewModel();
var items = new List<string> {"Monday", "Tuesday", "Wednesday"};
vm.Employees = new SelectList(items);
return View(vm);
Код вида будет таким же.
Настройка выбранных параметров
Иногда может потребоваться установить один параметр в качестве параметра по умолчанию в элементе SELECT (например, на экране редактирования вы хотите загрузить ранее сохраненное значение параметра). Для этого вы можете просто установить в качестве EmployeeIdзначения свойства значение, которое вы хотите выбрать.
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "11"},
new SelectListItem {Text = "Tom", Value = "12"},
new SelectListItem {Text = "Jerry", Value = "13"}
};
vm.EmployeeId = 12; // Here you set the value
return View(vm);
}
Это выберет опцию Tom в элементе select при визуализации страницы.
Multi select выпадающий
Если вы хотите отобразить раскрывающийся список с множественным выбором, вы можете просто изменить свойство модели представления, которое вы используете для asp-forатрибута в вашем представлении, на тип массива.
public class MyViewModel
{
public int[] EmployeeIds { get; set; }
public List<SelectListItem> Employees { set; get; }
}
Это отобразит HTML-разметку для элемента select с multipleатрибутом, который позволит пользователю выбрать несколько параметров.
@model MyViewModel
<select id="EmployeeIds" multiple="multiple" name="EmployeeIds">
<option>Please select one</option>
<option value="1">Shyju</option>
<option value="2">Sean</option>
</select>
Настройка выбранных опций в мультиселекте
Подобно одиночному выбору, установите EmployeeIdsзначение свойства в массив значений, которые вы хотите.
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "11"},
new SelectListItem {Text = "Tom", Value = "12"},
new SelectListItem {Text = "Jerry", Value = "13"}
};
vm.EmployeeIds= new int[] { 12,13} ;
return View(vm);
}
Это выберет опцию Том и Джерри в элементе множественного выбора при визуализации страницы.
Использование ViewBag для передачи списка элементов
Если вы не предпочитаете сохранять свойство типа коллекции для передачи списка опций представлению, вы можете использовать для этого динамический ViewBag. ( Это не мой лично рекомендуемый подход, так как viewbag является динамическим, и ваш код склонен к необработанному опечатки )
public IActionResult Create()
{
ViewBag.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "1"},
new SelectListItem {Text = "Sean", Value = "2"}
};
return View(new MyViewModel());
}
и в представлении
<select asp-for="EmployeeId" asp-items="@ViewBag.Employees">
<option>Please select one</option>
</select>
Использование ViewBag для передачи списка элементов и настройки выбранной опции
Это так же, как и выше. Все, что вам нужно сделать, это установить для свойства (для которого вы привязываете раскрывающийся список) значение параметра, который вы хотите выбрать.
public IActionResult Create()
{
ViewBag.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "1"},
new SelectListItem {Text = "Bryan", Value = "2"},
new SelectListItem {Text = "Sean", Value = "3"}
};
vm.EmployeeId = 2; // This will set Bryan as selected
return View(new MyViewModel());
}
и в представлении
<select asp-for="EmployeeId" asp-items="@ViewBag.Employees">
<option>Please select one</option>
</select>
Группировка товаров
Вспомогательный метод select tag поддерживает параметры группировки в раскрывающемся списке. Все, что вам нужно сделать, это указать Groupзначение свойства каждого SelectListItemв вашем методе действия.
public IActionResult Create()
{
var vm = new MyViewModel();
var group1 = new SelectListGroup { Name = "Dev Team" };
var group2 = new SelectListGroup { Name = "QA Team" };
var employeeList = new List<SelectListItem>()
{
new SelectListItem() { Value = "1", Text = "Shyju", Group = group1 },
new SelectListItem() { Value = "2", Text = "Bryan", Group = group1 },
new SelectListItem() { Value = "3", Text = "Kevin", Group = group2 },
new SelectListItem() { Value = "4", Text = "Alex", Group = group2 }
};
vm.Employees = employeeList;
return View(vm);
}
Там нет никаких изменений в коде представления. помощник по тегу select теперь будет отображать параметры внутри 2 элементов optgroup .