在ASP.NET Core MVC中选择标签助手


162

我在ASP.NET Core中需要选择标记帮助器的帮助。

我有一个要绑定到选择标签助手的员工列表。我的员工处于List<Employee> EmployeesList,选定的价值将归入EmployeeId财产。我的视图模型如下所示:

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

我的员工班级是这样的:

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

我的问题是我如何告诉我的选择标签助手在下拉列表中Id显示FullName时将其用作值?

<select asp-for="EmployeeId" asp-items="???" />

我希望对此有所帮助。谢谢。


3
只是我以为我应该添加的内容,如果您立即关闭select标签,总是用</ select>关闭标签,则它似乎无法正常工作。标签助手无法与<select asp-for ..... />
RoughPlace一起使用

只是一个小费。脚手架控制器演示一般向您展示这些事情的最佳方法
Neville Nazerane,

Answers:


378

使用选择标记帮助器呈现SELECT元素

在GET操作中,创建视图模型的对象,加载EmployeeListcollection属性并将其发送到视图。

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);
}

在您的创建视图中,SelectListEmployeeList属性创建一个新对象,并将其作为该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>

使用实体框架从数据库表中获取数据

上面的示例将硬编码项目用作选项。所以我想我会添加一些示例代码来使用实体框架获取数据,因为很多人都在使用它。

假设您的DbContext对象具有一个称为的属性Employees,该类型的类型DbSet<Employee>Employee实体类具有IdName属性的

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

您可以使用LINQ查询来获取雇员,并在LINQ表达式中使用Select方法来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视图模型的属性。确保您指定了 dataValueFielddataTextField参数。

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对象的列表,每个对象都具有IdFirstName属性,并且将这些属性用作DataValueFieldandDataTextFieldSelectList创建的对象。您可以将硬编码列表更改为从数据库表读取数据的代码。

视图代码将相同。

<select asp-for="EmployeeId" asp-items="@Model.Employees" >
    <option>Please select one</option>
</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);
}

呈现页面时,这将在select元素中选择Tom选项。

多选下拉菜单

如果要呈现多选下拉列表,则只需将用于视图属性的视图模型属性更改为asp-for数组类型。

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

这将为具有multiple属性的select元素呈现HTML标记,该属性将允许用户选择多个选项。

@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);
}

呈现页面时,这将在multi select元素中选择Tom和Jerry选项。

使用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>

分组项目

选择标记帮助器方法支持下拉菜单中的分组选项。您要做的就是在您的操作方法中指定 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项目中呈现选项。


1
谢谢!有点像旧的剃刀语法,我们需要执行向SelectList的转换。再次感谢。
山姆

7
我一直在寻找如何添加一个空选项,谢谢您的使用<option>Please select one</option>
Serj Sagan

5
请注意,您必须有一个</ select>标记-如果您尝试像<select ... />这样自动关闭select标记,它将无法正常工作。另外,如果您使用“请选择一个”之类的空选项,则需要给它一个空字符串“”的值,以便进行必填字段验证。
安迪

3
“确保对select元素使用显式的结束标记。如果使用自闭合标记方法,则标记助手将呈现一个空的SELECT元素!” 这就是我的问题。干杯!
Mariusz

2
感谢您为这个答案付出了巨大的努力!
维达尔

11

<options>为此创建了一个接口和一个标记帮助器。因此,我不必每次都必须填充控件时才将IEnumerable<T>项目转换成。IEnumerable<SelectListItem><select>

而且我认为它效果很好...

用法类似于:

<select asp-for="EmployeeId">
    <option value="">Please select...</option>
    <options asp-items="@Model.EmployeesList" />
</select>

为了使其与标签助手一起工作,您必须在类中实现该接口:

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; }
}

<options>标签帮助:

[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 <options /> element a child of a <select/> element the SelectTagHelper targeted?
        object formDataEntry;
        context.Items.TryGetValue(typeof(SelectTagHelper), out formDataEntry);

        var selectedValues = formDataEntry as ICollection<string>;
        var encodedValues = new HashSet<string>(StringComparer.OrdinalIgnoreCase);
        if (selectedValues != null && selectedValues.Count != 0)
        {
            foreach (var selectedValue in selectedValues)
            {
                encodedValues.Add(Generator.Encode(selectedValue));
            }
        }

        IEnumerable<SelectListItem> items = null;
        if (Items != null)
        {
            if (Items is IEnumerable)
            {
                var enumerable = Items as IEnumerable;
                if (Items is IEnumerable<SelectListItem>)
                    items = Items as IEnumerable<SelectListItem>;
                else if (Items is IEnumerable<IIntegerListItem>)
                    items = ((IEnumerable<IIntegerListItem>)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 <options>.",
                        "<options>",
                        "ForAttributeName",
                        nameof(IModelMetadataProvider),
                        "For.Name"));
            }
            else
            {
                throw new InvalidOperationException("Invalid items for <options>");
            }

            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($"<option value='{item.Value}' {selectedAttr}>{item.Text}</option>");
                else
                    output.Content.AppendHtml($"<option>{item.Text}</option>");
            }
        }
    }
}

可能会有一些错别字,但我认为目标很明确。我不得不编辑一点。


4

您也可以使用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<SelectListItem> GetEnumSelectList<TEnum>() where TEnum : struct;

3

我的回答下面解决这个问题,但它涉及到。

如果有人使用enum而不是类模型,例如以下示例:

public enum Counter
{
    [Display(Name = "Number 1")]
    No1 = 1,
    [Display(Name = "Number 2")]
    No2 = 2,
    [Display(Name = "Number 3")]
    No3 = 3
}

提交时获取值的属性:

public int No { get; set; }

在剃须刀页面中,您可以Html.GetEnumSelectList<Counter>()用来获取枚举属性。

<select asp-for="No" asp-items="@Html.GetEnumSelectList<Counter>()"></select>

它生成以下HTML:

<select id="No" name="No">
    <option value="1">Number 1</option>
    <option value="2">Number 2</option>
    <option value="3">Number 3</option>
</select>

3

您可以使用以下代码进行多次选择

<select asp-for="EmployeeId"  multiple="multiple" asp-items="@ViewBag.Employees">
    <option>Please select</option>
</select>

您还可以使用:

<select id="EmployeeId" name="EmployeeId"  multiple="multiple" asp-items="@ViewBag.Employees">
    <option>Please select</option>
</select>

0

在获取:

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

在发布中:

var selectedIds= Request.Form["Tags"];

在视图中:

<label>Tags</label>
<select  asp-for="Tags"  id="Tags" name="Tags" class="form-control" asp-items="ViewBag.Tags" multiple></select>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.