使用 ViewModel 在编辑时选择 DropDownList

Question

我正在尝试使用 ViewModel 使用具有下拉列表的数据填充编辑视图。数据已填充，但未根据数据选择下拉列表。

已经检查过 SO 中的类似问题，例如 [SO1][1]，SO2 , SO3 但无法解决。知道这可能是我想念但无法找到的愚蠢的东西。

代码：视图模型：

 public class ProductVM
    {
        public int ID { get; set; }
        [Required]
        [DisplayName("Product Name")]
        public string ProductName { get; set; }

        public int SupplierID { get; set; }
        public IEnumerable<SelectListItem> Suppliers { get; set; }
        public Supplier Supplier { get; set; }

        public int UnitID { get; set; }
        public IEnumerable<SelectListItem>  Units { get; set; }
        public Unit Unit { get; set; }

        public int ItemCategoryID { get; set; }
        public IEnumerable<SelectListItem> Categories { get; set; }
        [DisplayName("Categories")]
        public ItemCategory ItemCategory { get; set; }
     }
Controller Edit :
  public ActionResult Edit(int id)
        {
            var productVM = GetProductById(id);


            return View(productVM);
        }
 private ProductVM GetProductById(int id)
        {
            Product product = db.Products.Find(id);

            var productVM = new ProductVM();


           var suppliers = new SelectList(db.Suppliers, "ID", "SupplierName", product.SupplierID);
            productVM.Suppliers = suppliers.ToList();

            var categories = new SelectList(db.ItemCategories, "ID", "Name", product.ItemCategoryID);
            productVM.Categories = categories.ToList();

  var units = new SelectList(db.Units, "ID", "Name", product.UnitID);
            productVM.Units = units.ToList();
        }

查看：

<div class="form-group">
            @Html.LabelFor(model => model.ProductName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.ProductName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.ProductName, "", new { @class = "text-danger" })
            </div>
        </div>


        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.SupplierID, "SupplierID", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">

                @Html.DropDownListFor(u => u.SupplierID, Model.Suppliers, "--Select--")

                @Html.ValidationMessageFor(model => model.SupplierID, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.UnitID, "UnitID", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(u => u.UnitID, (IEnumerable<SelectListItem>)Model.Units, "--Select--")
                @Html.ValidationMessageFor(model => model.UnitID, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.ItemCategoryID, "ItemCategoryID", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(u => u.ItemCategoryID, (IEnumerable<SelectListItem>)Model.Categories, "--Select--")
                @Html.ValidationMessageFor(model => model.ItemCategoryID, "", new { @class = "text-danger" })
            </div>
        </div>

感谢任何帮助。提前致谢。 [1]: Binding Viewmodel Property to dropdown selected item in razor

到剃须刀中的下拉所选项目

Answer 1

如果您希望下拉列表加载预选值，则需要在将模型传递给视图之前为控制器中的选定值设置一个初始值。例如：

public ActionResult Edit(int id)
{
    var productVM = GetProductById(id);
    //Set your pre-determined values here and they will show up on the view once binded
    productVM.SupplierID = 1;
    productVM.UnitID = 1;
    productVM.ItemCategoryID  = 1;

    return View(productVM);
}

这个问题很好地分解了这个过程：

Answer 2

无论您在 SelectList 中的 selectedValue 参数中设置什么，都将被忽略。为什么？因为您有一个 strongly typed view 并且您将 ProductVM 中的 SupplierID 属性绑定到下拉列表。在您的 GetProductById 方法中，您实际上并未填充 productVM.SupplierID、UnitID 和 ItemCategoryID。因此它们将具有默认的 int 值 0。

因此您可以将方法更改为：

private ProductVM GetProductById(int id)
{
    Product product = db.Products.Find(id);

    var productVM = new ProductVM
    {
        // No need to pass the 4th parameter "selectedValue" in SelectList. 
        Suppliers = new SelectList(db.Suppliers, "ID", "SupplierName"),
        Categories = new SelectList(db.ItemCategories, "ID", "Name"),
        Units = new SelectList(db.Units, "ID", "Name"),

        // Populate these properties
        SupplierID = product.SupplierID,
        ItemCategoryID = product.ItemCategoryID,
        UnitID = product.UnitID
    };

    return productVM ;
}

可选的 selectedValue 参数通常在我们不使用强类型 view 时使用。如果您要将视图更改为以下内容，那么您的下拉列表将预先选择值：

@Html.DropDownList("Supplier", Model.Suppliers, "--Select--")

使用 ViewModel 在编辑时选择 DropDownList

DropDownList To be Selected on Edit using ViewModel

c#

asp.net-mvc

ef-code-first

asp.net-mvc-4