Выберите «Помощник тегов» в ASP.NET Core MVC

Мне нужна помощь с помощником select tag в ASP.NET Core.

У меня есть список сотрудников, которые я пытаюсь связать с помощником select tag. Мои сотрудники находятся в List EmployeesList а выбранное значение переходит в свойство EmployeeId . Моя модель выглядит так:

 public class MyViewModel { public int EmployeeId { get; set; } public string Comments { get; set; } public List EmployeesList {get; set; } } 

Мой class сотрудников выглядит следующим образом:

 public class Employee { public int Id { get; set; } public string FullName { get; set; } } 

Мой вопрос заключается в том, как мне сообщить моему помощнику тега select использовать Id в качестве значения при отображении FullName в раскрывающемся списке?

  

Я был бы признателен за помощь в этом. Благодарю.

Использование помощников Select Tag для отображения элемента SELECT в вашем представлении

В своем действии GET создайте объект своей модели просмотра, загрузите свойство коллекции EmployeeList и отправьте его в представление.

 public IActionResult Create() { var vm = new MyViewModel(); vm.EmployeesList = new List { new Employee { Id = 1, FullName = "Shyju" }, new Employee { Id = 2, FullName = "Bryan" } }; return View(vm); } 

И в вашем представлении создания создайте новый объект SelectList из свойства EmployeeList и передайте его как значение для свойства asp-items .

 @model MyViewModel 

И ваш метод действия HttpPost, чтобы принять представленные данные формы.

 [HttpPost] public IActionResult Create(MyViewModel model) { // check model.EmployeeId // to do : Save and redirect } 

Или

Если ваша модель просмотра имеет List как свойство для выпадающих элементов.

 public class MyViewModel { public int EmployeeId { get; set; } public string Comments { get; set; } public List Employees { set; get; } } 

И в вашем действии,

 public IActionResult Create() { var vm = new MyViewModel(); vm.Employees = new List { new SelectListItem {Text = "Shyju", Value = "1"}, new SelectListItem {Text = "Sean", Value = "2"} }; return View(vm); } 

И в представлении вы можете напрямую использовать свойство Employees для asp-items .

 @model MyViewModel 

Класс SelectListItem принадлежит пространству имен Microsoft.AspNet.Mvc.Rendering .

Убедитесь, что вы используете явный закрывающий тег для элемента select. Если вы используете подход с закрывающим тегом, помощник тега будет отображать пустой элемент SELECT!

Подход ниже не будет работать

  

Но это сработает.

  

Получение данных из таблицы базы данных с использованием структуры сущностей

В приведенных выше примерах используются параметры жесткого кодирования для параметров. Поэтому я подумал, что добавлю примерный код для получения данных с использованием инфраструктуры Entity, как это многие люди используют.

Предположим, что у вашего объекта DbContext есть свойство Employees , которое имеет тип DbSet где class сущности Employee имеет свойство Id и 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 – это ваш объект контекста db. Код вида такой же, как и выше.

Использование SelectList

Некоторые люди предпочитают использовать class SelectList для хранения элементов, необходимых для визуализации параметров.

 public class MyViewModel { public int EmployeeId { get; set; } public SelectList Employees { set; get; } } 

Теперь в вашем действии GET вы можете использовать конструктор SelectList для заполнения свойства Employees модели представления. Убедитесь, что вы dataTextField параметры dataValueField и dataTextField .

 public IActionResult Create() { var vm = new MyViewModel(); vm.Employees = new SelectList(GetEmployees(),"Id","FirstName"); return View(vm); } public IEnumerable GetEmployees() { return new List { new Employee { Id=1, FirstName="Shyju"}, new Employee { Id=2, FirstName="Bryan"} }; } 

Здесь я GetEmployees метод GetEmployees для получения списка объектов Employee, каждый из которых имеет свойство Id и FirstName и я использую эти свойства как DataValueField и SelectList объекта SelectList мы создали. Вы можете изменить hardcoded list на код, который считывает данные из таблицы базы данных.

Код просмотра будет таким же.

  

Извлеките элемент SELECT из списка строк.

Иногда вам может понадобиться отобразить элемент выбора из списка строк. В этом случае вы можете использовать конструктор SelectList который принимает только IEnumerable

 var vm = new MyViewModel(); var items = new List {"Monday", "Tuesday", "Wednesday"}; vm.Employees = new SelectList(items); return View(vm); 

Код просмотра будет таким же.

Настройка выбранных параметров

В некоторых случаях вам может потребоваться установить один параметр в качестве параметра по умолчанию в элементе SELECT (например, на экране редактирования вы хотите загрузить ранее сохраненное значение параметра). Для этого вы можете просто установить для свойства EmployeeId значение параметра, который вы хотите выбрать.

 public IActionResult Create() { var vm = new MyViewModel(); vm.Employees = new List { 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 при визуализации страницы.

Выделение выпадающего меню

Если вы хотите отобразить раскрывающийся список с несколькими выборами, вы можете просто изменить свойство модели представления, которое вы используете для asp-for атрибута в своем представлении для типа массива.

 public class MyViewModel { public int[] EmployeeIds { get; set; } public List Employees { set; get; } } 

Это отобразит разметку HTML для элемента select с multiple атрибутом, который позволит пользователю выбрать несколько параметров.

 @model MyViewModel  

Настройка выбранных опций в режиме multi select

Подобно одиночному select, установите значение свойства EmployeeIds в массив требуемых значений.

 public IActionResult Create() { var vm = new MyViewModel(); vm.Employees = new List { 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); } 

Это выберет вариант Tom и Jerry в элементе multi select, когда страница будет визуализирована.

Использование ViewBag для переноса списка элементов

Если вы не хотите, чтобы свойство типа коллекции передавало список параметров в представление, вы можете использовать динамический ViewBag для этого. ( Это не мой личный подход, поскольку viewbag является динамическим, а ваш код подвержен неподключенным ошибки типографии )

 public IActionResult Create() { ViewBag.Employees = new List { new SelectListItem {Text = "Shyju", Value = "1"}, new SelectListItem {Text = "Sean", Value = "2"} }; return View(new MyViewModel()); } 

и в представлении

  

Группировка элементов

Метод helper select select поддерживает опции группировки в раскрывающемся списке. Все, что вам нужно сделать, – указать значение свойства 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() { 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 tag теперь отобразит параметры внутри 2 элементов optgroup .

Для этого я создал интерфейс и . Поэтому мне не приходилось преобразовывать элементы IEnumerable в IEnumerable каждый раз, когда я должен заполнить элемент управления .

И я думаю, что это прекрасно работает …

Использование – это что-то вроде:

  

Чтобы заставить его работать с помощником тега, вы должны реализовать этот интерфейс в своем classе:

 public class Employee : IIntegerListItem { public int Id { get; set; } public string FullName { get; set; } public int Value { return Id; } public string Text{ return FullName ; } } 

Это необходимые коды:

Интерфейс:

 public interface IIntegerListItem { int Value { get; } string Text { get; } } 

Хелпер :

 [HtmlTargetElement("options", Attributes = "asp-items")] public class OptionsTagHelper : TagHelper { public OptionsTagHelper(IHtmlGenerator generator) { Generator = generator; } [HtmlAttributeNotBound] public IHtmlGenerator Generator { get; set; } [HtmlAttributeName("asp-items")] public object Items { get; set; } public override void Process(TagHelperContext context, TagHelperOutput output) { output.SuppressOutput(); // Is this  element a child of a  element the SelectTagHelper targeted? object formDataEntry; context.Items.TryGetValue(typeof(SelectTagHelper), out formDataEntry); var selectedValues = formDataEntry as ICollection; var encodedValues = new HashSet(StringComparer.OrdinalIgnoreCase); if (selectedValues != null && selectedValues.Count != 0) { foreach (var selectedValue in selectedValues) { encodedValues.Add(Generator.Encode(selectedValue)); } } IEnumerable items = null; if (Items != null) { if (Items is IEnumerable) { var enumerable = Items as IEnumerable; if (Items is IEnumerable) items = Items as IEnumerable; else if (Items is IEnumerable) items = ((IEnumerable)Items).Select(x => new SelectListItem() { Selected = false, Value = ((IIntegerListItem)x).Value.ToString(), Text = ((IIntegerListItem)x).Text }); else throw new InvalidOperationException(string.Format("The {2} was unable to provide metadata about '{1}' expression value '{3}' for .", "", "ForAttributeName", nameof(IModelMetadataProvider), "For.Name")); } else { throw new InvalidOperationException("Invalid items for "); } foreach (var item in items) { bool selected = (selectedValues != null && selectedValues.Contains(item.Value)) || encodedValues.Contains(item.Value); var selectedAttr = selected ? "selected='selected'" : ""; if (item.Value != null) output.Content.AppendHtml($""); else output.Content.AppendHtml($""); } } } } 

Может быть, есть опечатка, но цель ясна, я думаю. Мне пришлось немного отредактировать.

Вы также можете использовать IHtmlHelper.GetEnumSelectList.

  // Summary: // Returns a select list for the given TEnum. // // Type parameters: // TEnum: // Type to generate a select list for. // // Returns: // An System.Collections.Generic.IEnumerable`1 containing the select list for the // given TEnum. // // Exceptions: // T:System.ArgumentException: // Thrown if TEnum is not an System.Enum or if it has a System.FlagsAttribute. IEnumerable GetEnumSelectList() where TEnum : struct; 

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

  

вы также можете использовать:

  

В Get: // GET: public IActionResult Create () {

  ViewData["Tags"] = new SelectList(_context.Tags, "Id", "Name"); return View(); } 

В столбце: var selectedIds = Request.Form [“Теги”];

Ввиду :

    
Давайте будем гением компьютера.