asp.net-mvc - MVC 视图中的下拉列表

Question

我正在尝试创建一个下拉列表，但下拉列表中除了“请选择一个”之外什么都没有，但没有值。

到目前为止，我已经尝试过：

看法：

<select asp-for="StatusToEdit.Color.Name" asp-items="Model.AvailableColors">
     <option>Please select one</option>
</select>

模型：

   public SelectList AvailableColors { get; set; }
    public void OnGet()
    {
        AvailableColors = new SelectList(nameof(StatusColor.ColorId), 
        nameof(StatusColor.Name));
    }

模拟列表：

    private static List<ItemStatus> _mockStatuses = new List<ItemStatus>
    {
        new ItemStatus  { StatusId = 1, Name = "Complete", Color = new 
         StatusColor{ ColorId = 1, Name = "Auto" } },
        new ItemStatus  { StatusId = 2, Name = "Complete, Ongoing", Color =  
        new StatusColor{ ColorId = 2, Name = "Green" }},
        new ItemStatus  { StatusId = 3, Name = "In Process", Color = new 
        StatusColor{ ColorId = 3, Name = "Yellow" }}
    };

我希望看到所有颜色都显示在下拉列表中。

标签： asp.net-mvcasp.net-core

Answer 1

如果您使用的是 asp.net core MVC（Razor Pages 类似），则需要将模型属性类型修改为IEnumerable<SelectListItem> AvailableColors或List<SelectListItem> AvailableColors

1.型号

public class ManageStatusesEditViewModel
{
    //other properties
    public List<SelectListItem> AvailableColors { get; set; }
}

2.动作：

[HttpGet]
public IActionResult ManageStatusesEdit(int id)
    {
        //other logic
        var dropdownData = new List<SelectListItem>();

        _mockStatuses.ForEach(d => dropdownData.Add(new SelectListItem()
        {
            Value = d.Color.Name,
            Text = d.Color.Name
        }));

        var editManageStatusesEditViewModel = new ManageStatusesEditViewModel
        {

            AvailableColors = dropdownData
        };
        return View(editManageStatusesEditViewModel);
    }

3.查看：

<select asp-for="StatusToEdit.Color.Name" asp-items="Model.AvailableColors">
    <option>Please select one</option>
</select>

4.结果：