使用OptGroup组构造选择列表

Question

当前的项目:

• ASP.NET 4.5.2
• MVC 5

我正在尝试使用OptGroups模型构建一个选择菜单,但我的问题是我似乎无法构建OptGroups自己.

我的模特:

[DisplayName("City")]
public string CityId { get; set; }
private IList<SelectListItem> _CityName;
public IList<SelectListItem> CityName {
  get {
    List<SelectListItem> list = new List<SelectListItem>();
    Dictionary<Guid, SelectListGroup> groups = new Dictionary<Guid, SelectListGroup>();
    List<Region> region = db.Region.Where(x => x.Active == true).OrderBy(x => x.RegionName).ToList();
    foreach(Region item in region) {
      groups.Add(item.RegionId, new SelectListGroup() { Name = item.RegionName });
    }
    List<City> city = db.City.Where(x => x.Active == true).ToList();
    foreach(City item in city) {
      list.Add(new SelectListItem() { Text = item.CityName, Value = item.CityId.ToString(), Group = groups[item.RegionId] });
    }
    return list;
  }
  set { _CityName = value; }
}

每个城市都可以在一个地区.我想要一个选择菜单按地区分组城市.通过我可以弄清楚的一切,上面的代码应该可以完成这项工作,但是我得到一个下拉菜单,其中所有城市都在OptGroup下分组命名System.Web.Mvc.SelectListGroup

上面代码中的关键是我首先遍历Regions,并将它们放入Dictionary中,将RegionIdset设置为带回的键RegionName(它本身被格式化为SelectListGroup).

然后我遍历城市,并为每个城市分配与城市相匹配的组RegionId.

我还没有在Internet上看到任何实际从数据库中提取内容的示例 - 所有示例中有100%使用硬编码SelectListGroup和SelectListItem值.

我的观点也是正确的,AFAIK:

@Html.DropDownListFor(x => x.CityId, new SelectList(Model.CityName, "Value", "Text", "Group", 1), "« ‹ Select › »", htmlAttributes: new { @class = "form-control" })

正如你所看到的那样,该组应该被带入SelectList,并且DropDownList 正在被创建OptGroups,而不是正确的.

我生成的下拉菜单如下所示:

« ‹ Select › »
System.Web.Mvc.SelectListGroup
  City1
  City2
  ...
  LastCity

它应该是这样的:

« ‹ Select › »
Region1
  City2
  City4
  City5
Region2
  City3
  City1
  City6

建议？

---

修改后的解决方案:我遵循了Stephen Muecke提供的解决方案,但稍微修改了一下.

MVC 的一般规则是,您拥有一个比控制器更重的模型,并且该模型定义了您的业务逻辑.Stephen声称所有数据库访问都应该在控制器中完成.我同意这两点.

我最大的"问题"之一是每次调用页面时都需要调用任何创建下拉菜单或任何其他预先填充的表单元素.这意味着,对于创建或编辑页面,您不仅需要在[HttpGet]方法上调用它,还需要在[HttpPost]方法中调用它,在该方法中模型被发送回视图,因为它没有正确验证.这意味着您必须向每个方法添加代码(传统上通过ViewBags),只是为了预先填充下拉列表等元素.这称为代码复制,并不是一件好事.必须有一个更好的方法,并且由于斯蒂芬的指导,我找到了一个.

将数据访问保留在模型之外的问题是您需要使用数据填充模型.避免代码重用和避免潜在错误的问题是您不应该将数据绑定到控制器中的元素.后一种行为是业务逻辑,理所当然地属于模型.我的业务逻辑是,我需要将用户输入限制为按地区分组的城市列表,管理员可以从下拉列表中进行选择.因此,虽然我们可能在控制器中组装数据,但我们将其绑定到模型中的模型.我之前的错误是在模型中做了两件事,这完全不合适.

通过将数据绑定到模型中的模型,我们避免必须将它绑定两次 - 一次在控制器的[HttpGet]和[HttpPost]方法中.我们只需要在由两种方法处理的模型中绑定一次.如果我们有一个可以在Create和Edit函数之间共享的更通用的模型,我们只能在一个地方而不是四个地方进行这种绑定(但我没有这种程度的通用性,所以我不会这样做一个例子)

首先,我们实际上剥离了整个数据组件,并将其放在自己的类中:

public class SelectLists {
  public static IEnumerable<SelectListItem> CityNameList() {
    ApplicationDbContext db = new ApplicationDbContext();
    List<City> items = db.City.Where(x => x.Active == true).OrderBy(x => x.Region.RegionName).ThenBy(x => x.CityName).ToList();
    return new SelectList(items, "CityId", "CityName", "Region.RegionName", 1);
  }
}

这存在于命名空间内,但在我们正在处理的部分的控制器下面.为了清楚起见,我把它放在文件的最末端,就在关闭命名空间之前.

然后我们看一下这个页面的模型:

public string CityId { get; set; }
private IEnumerable<SelectListItem> _CityName;
public IEnumerable<SelectListItem> CityName {
  get { return SelectLists.CityNameList(); }
  set { _CityName = value; }
}

注意:即使CityId是a Guid而且DB字段是a uniqueidentifier,我也会通过视图将此值作为字符串引入,因为客户端验证会为Guids提供驴球.如果将Value其作为字符串而不是Guid处理,则在下拉菜单上进行客户端验证要容易得多.您只需将其转换回Guid,然后再将其重新插入该表的主模型中.另外,CityName不是City表中的实际字段 - 它纯粹作为下拉菜单本身的占位符存在,这就是它存在于CreateClientViewModelCreate页面中的原因.这样,在视图中我们可以创建一个DropDownListFor明确地将CityId绑定到下拉菜单,实际上允许客户端验证(Guids只是一个额外的头痛).

关键是get {}.正如您所看到的,没有更多丰富的代码可以进行数据库访问,只是一个简单的SelectLists目标类,以及方法的调用CityNameList().您甚至可以将变量传递给方法,因此您可以使用相同的方法返回同一下拉菜单的不同变体.比如,如果您希望在一个页面上创建一个下拉列表(创建)以使其选项按OptGroups分组,而另一个下拉列表(编辑)则不需要任何分组选项.

实际模型最终比以前更简单:

@Html.DropDownListFor(x => x.CityId, Model.CityName, "« ‹ Select › »", htmlAttributes: new { @class = "form-control" })

无需修改带入下拉列表数据的元素 - 您只需通过它调用它Model.ElementName.

我希望这有帮助.

Answer 1

首先,您查看模型不应包含数据库访问代码以填充其属性.这是控制器的责任,你已经使你的代码无法进行单元测试.首先将模型更改为

public class CreateClientViewModel
{
    [DisplayName("City")]
    public string CityId { get; set; }
    public IList<SelectListItem> CityList { get; set; }
    ....
}

然后在控制器中,您可以使用其中一个SelectList接受a 的重载groupName来生成集合

var cities = var cities = db.City.Include(x => x.Region).Where(x => x.Active == true)
    .OrderBy(x => x.Region.RegionName).ThenBy(x => x.CityName);

var model = new CreateClientViewModel()
{
    CityList = new SelectList(cities, "CityId", "CityName", "Region.RegionName", null, null)
};
return View(model);

并在视图中

@Html.DropDownListFor(x => x.CityId, Model.CityList , "« ‹ Select › »", new { @class = "form-control" })

作为替代方案,您也可以使用Group属性来执行此操作SelectListItem

var model = new CreateClientViewModel()
{
    CityList = new List<SelectListItem> // or initialize this in the constructor
};
var cities = var cities = db.City.Include(x => x.Region).Where(x => x.Active == true).GroupBy(x => x.Region.RegionName);
foreach(var regionGroup in cities)
{
    var optionGroup = new SelectListGroup() { Name = regionGroup.Key };
    foreach(var city in regionGroup)
    {
        model.CityList.Add(new SelectListItem() { Value = city.CityId.ToString(), Text = city.CityName, Group = optionGroup });
    }
}
return View(model);