asp.net – 使用OptGroup组构建选择列表

当前的项目：

> 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中,RegionId设置为带回RegionName的键(它本身被格式化为SelectListGroup).

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

我没有在互联网上看到任何实际从数据库中提取内容的例子 – 所有示例中有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提供的the solution,但稍作修改.

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是Guid且DB字段是uniqueidentifier,我也会将此值作为字符串显示在视图中,因为客户端验证会为Guids提供驴球.如果将Value作为字符串而不是Guid处理,则在下拉菜单上进行客户端验证要容易得多.您只需将其转换回Guid,然后再将其重新插入该表的主模型中.另外,CityName不是City表中的实际字段 – 它纯粹作为下拉菜单本身的占位符存在,这就是它存在于Create页面的CreateClientviewmodel中的原因.这样,在视图中我们可以创建一个DropDownListFor,它明确地将CityId绑定到下拉菜单,实际上首先允许客户端验证(Guids只是一个令人头疼的问题).

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

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

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

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

我希望这有帮助.

解决方法

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

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

然后在控制器中,您可以使用SelectList的一个重载接受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,null,null)
};
return View(model);

在视图中

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

或者,您也可以使用SelectListItem的Group属性执行此操作

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);

asp.net – 使用OptGroup组构建选择列表

解决方法

猜你在找的asp.Net相关文章