Question

正如标题所述，我想在视图加载时预选项目。我有这段代码：

@{
    var categoryList = new List<SelectListItem>();
    foreach (var category in ViewBag.Categories)
    {
        categoryList.Add(new SelectListItem
        {
            Value = category.CategoryId.ToString(),
            Text = category.Name,
            Selected = category.Assigned
        });
    }
}
@Html.ListBox("Categories", categoryList, new { @class = "select-toggle", size = 5 })

这大致输出为：

"1", "Category 1", true
"2", "Category 2", false
"3", "Category 3", false
"4", "Category 4", false
"5", "Category 5", true

但是，当我加载页面时，它不会预先选择项目。我尝试了几种可能的解决方案，例如不同的格式，并从模型中选择类别，但它们似乎不适用于我的情况。有什么想法吗？

Answer 1

我个人更喜欢使用视图模型在视图和操作方法之间传输数据（加载数据以查看并将已发布的表单值传递回操作方法）。所以让我们通过创建一个视图模型来解决这个问题。

public class CreateProductVm
{
   public int ID { set;get;}
   public string Name { set;get;}
   public List<SelectListItem> Categories { set;get;}
   public int[] SelectedCategories { set;get;}
   //Add other properties as needed by the view
}

现在，在您的GET操作方法中，我们将创建此视图模型的对象，加载Categories属性并将该对象发送到视图。如果要预先选择列表框中的某些项目，可以加载SelectedCategories属性。

public ActionResult Edit(int id)
{
  //get the Product from db using id and assign to the properties of our view model
  var vm = new CreateProductVm();
  // Hard coded items for demo. You may replace with data from your db table(s)
  vm.Categories = new List<SelectListItem> {
                                            new SelectListItem { Value="1", Text="Books"},
                                            new SelectListItem { Value="2", Text="Toys"},
                                            new SelectListItem { Value="3", Text="Phone"}, 
                                            new SelectListItem { Value="4", Text="Cars"}
  };
  vm.SelectedCategories = new[] {2, 3}; // To preselect Toys & Phone
  return View(vm);
}

现在，您的视图将强烈输入我们的视图模型

@model CreateProductVm
@using(Html.BeginForm())
{
  @Html.TextBoxFor(s=>s.Name)
  @Html.HiddenFor(g=>g.Id)
  @Html.ListBoxFor(x=>x.SelectedCategories ,Model.Categories)
  <input type="submit" />
}

现在提交表单时，您可以阅读SelectedCategories属性以获取HttpPost操作中的选定类别，假设您的方法将CreateProductVm类的对象作为参数

[HttpPost]
public ActionResult Edit(CreateProductVm model)
{
  //check for model.SelectedCategories;
  var p =db.Products.FirstOrDefault(s=>s.Id==model.Id);
  if(p!=null)
  {
    p.Name = model.Name;
   //Update other properties as needed
   db.SaveChanges();
   return RedirectToAction("Index");
  }
  // to do : return something
}

Answer 2

我尝试了以下内容。它似乎工作正常。

@{
var categoryList = new List<SelectListItem>()
                   {
                       new SelectListItem()
                       {
                            Value = "1",
                            Text = "One",
                            Selected = true
                       },
                        new SelectListItem()
                       {
                            Value = "2",
                            Text = "Two",
                            Selected = false
                       },
                         new SelectListItem()
                       {
                            Value = "3",
                            Text = "Three",
                            Selected = true
                       }
                   };

}
@Html.ListBox("Categories", categoryList, new { @class = "select-toggle", size = 5 })

你确定你的输出吗？也许试试这个例子。

在SelectListBox

2 个答案: