c# - MVC 中的下拉菜单

Question

在我的 MVC 应用程序中，我需要添加一个显示域名列表的下拉列表。

我已经有一个包含多个属性的 ViewModel。我不确定步骤的顺序应该是什么：

1. 将新属性添加到我的ViewModel? 应该是什么类型？列表？
2. 定义一个用值填充上述属性的方法。
3. 在视图中使用该属性？使用HTML.DropdownFor？

我知道我应该在我的问题中添加一些代码，但现在我很难开始使用这个......

编辑： 向 ViewModel 添加了以下属性：

 public IEnumerable<SelectListItem> DomainList { get; set; }

并实现了一个返回域列表的方法：

internal static List<Domain> FetchAllDomains()

接下来在我的控制器操作中，我有：

var domains = FetchAllDomains().Select(d => d.DomainName);
return new EmailModel() {DomainList = domains };

但我收到以下错误：

无法将类型“System.Collections.Generic.IEnumerable”隐式转换为“System.Collections.Generic.IEnumerable”。存在显式转换（您是否缺少演员表？）

Answer 1

1) 向我的 ViewModel 添加新属性？应该是什么类型？列表？

您需要 2 个属性更精确：一个IEnumerable<SelectListItem>保存所有可用选项，一个标量属性保存所选值

2) 定义一个用值填充上述属性的方法。

是的。

3）在视图中使用该属性？使用 HTML.DropdownFor?

不，不在视野中。视图不调用任何方法。视图与视图模型一起使用。控制器负责将正确填充的视图模型传递给视图。

例如：

public class MyViewModel
{
    public string SelectedValue { get; set; }
    public IEnumerable<SelectListItem> Values { get; set; }

    ... some other properties that your view might need
}

然后是一个将填充此视图模型的控制器操作：

public ActionResult Index()
{
    var model = new MyViewModel();
    model.Values = new[]
    {
        new SelectListItem { Value = "1", Text = "item 1" },
        new SelectListItem { Value = "2", Text = "item 2" },
        new SelectListItem { Value = "3", Text = "item 3" },
    };
    return View(model);
}

最后是强类型视图，您将在其中显示下拉列表：

@model MyViewModel
@Html.DropDownListFor(x => x.SelectedValue, Model.Values)

---

更新：

根据您更新的问题IEnumerable<SelectListItem>，您的视图模型上有一个属性，您试图为其分配一个IEnumerable<string>显然不可能的类型值。您可以将其转换为IEnumerable<SelectListItem>这样的：

var domains = FetchAllDomains().Select(d => new SelectListItem
{
    Value = d.DomainName,
    Text = d.DomainName
});
return new EmailModel { DomainList = domains };

Answer 2

如果您不介意，我将向您展示考试示例列表

public class SomeClass
{
    //Properties

    public int ExamId { get; set; }
    public SelectList ExamList { get; set; }
}

帮手：

public static void PopulateExamList(MarkEditViewModel model,
    List<Exam> examList)
{
    model.ExamList = new SelectList(examList, "Id", "ExamName");
}

在我的示例中，您必须添加所有考试的列表。在视图中之后，您将获得考试
和视图的下拉列表（foreach 模型中的每个元素）：

@Html.DropDownListFor(model => model.ExamId,
                                        Model.ExamList,
                                        "Choose exam")

Answer 3

一旦你的控制器上的列表将它传递给视图（作为模型或使用 ViewBag），然后使用帮助器：

Html.DropDownList(
    string name,
    IEnumerable<SelectListItem> selectList,
    string optionLabel,
    object htmlAttributes) 

或者 (MVC 3)

@Html.DropDownListFor(model => model.Property.ID,
    new SelectList(model.PropertyList, "ID", "Type"))

Answer 4

在您的视图模型中

public class ViewModelClass
{
    public string DomainName { get; set; }

    public IEnumerable<SelectListItem> DomainList
    {
        get
        {
            return GetDomainNames()  //your method to get domain names
             .Select(d => new SelectListItem() { Text = d, Value = d });
        }
    }
}

你的强类型视图

@model ViewModelClass

@Html.DropDownListFor(model => model.DomainName, Model.DomainList)

Answer 5

1. 是的，您需要模型中的属性来处理DropDownList
2. 取决于，通常可以是一个整数，它引用 DropDownlist 的值 您将用于填充元素的列表可以定义为 ViewBag 中的元素，或模型中的另一个属性
3. razor 语法完全取决于您尝试实现的目标，您应该使用@Html.DropDownListFor()引用模型的属性以保证视图是 strongTyped

Answer 6

您走在正确的轨道上，在您的 ViewModel 中有 2 个属性。一个用于保存项目列表，另一个用于从 UI 中选择的项目 ID

public class ProductViewModel
{
    public IEnumerable<SelectListItem> Items { get; set; }
    public string SelectedItemId { get; set; }
    //Other Properties
}

在您的 Get Action 方法中，返回带有数据的 ViewModel

 public ActionResult Index()
 {
    var objProduct = new ProductViewModel();
    objProduct.Items = new[]
    {
          new SelectListItem { Value = "1", Text = "Domain 1" },
          new SelectListItem { Value = "3", Text = "Domain 2" },
          new SelectListItem { Value = "3", Text = "Domain 3" }
    };
    // can replace the above line with loading data from Data access layer.
    return View(objProduct);
}

并且在您看来，这是对 ProductViewModel 的强类型

@model ProductViewModel
@using (Html.BeginForm())
{ 
  @Html.DropDownListFor(x => x.SelectedItemId, new SelectList(Model.Items,"Value","Text"), "Select..")
  <input type="submit" value="save" />
}

在您的 HTTPpost 操作中，您将拥有可用的选定值

[HttpPost]
public ActionResult Index(ProductViewModel model)
{
 //  check model.SElectedItemId here

}