以编程方式进行多选分组 - MVC

Question

我有一个 table 这种格式：

table format

我尝试以编程方式获得此结果：

desired result

我正在使用 asp.net mvc with razor。我知道有一个例子 here 但我无法适应我的情况 :( 可以举个例子吗？

添加了我的作品：

我想我必须通过 json 获取记录，我错了吗？我不擅长 json

<script type="text/javascript">
      $('#ddl_Hours').multiselect();
</script>

<select id="ddl_Hours" multiple>
           @foreach (myModel item in ((MultiSelectList)ViewBag.MyList).Items)
           {
              int dayID = 0;

              if (dayID != item.DayID )
              {
                 <optgroup label="@item.DayID ">
                     <option value="@item.HourID">@item.Name</option>
                 </optgroup>
              }

              dayID = item.DayID;
            }
</select>

控制器：

var list = (from p in db.T_MYTABLE
            select new MyModel { HourID = p.HourID ,
                                 DayID = p.DayID,
                                 Name = p.Name 
                                }).ToList();

ViewBag.MyList= new MultiSelectList(list, !string.IsNullOrEmpty(selectedValue) ? selectedValue.Split(',').ToArray() : null);

Answer 1

要使用 jQuery 插件生成这样的分组多 select，首先需要为分组选项呈现 HTML 标记，如下所示

<select id="ddl_Hours">
    <optgroup label="4">
        <option value="1">00.00</option>
        <option value="2">01.00</option>
        <option value="3">02.00</option>
        <option value="4">03.00</option>
    </optgroup>
    <optgroup label="2">
        <option value="5">04.00</option>
        <option value="6">05.00</option>
        <option value="7">06.0</option>
    </optgroup>
    <optgroup label="3">
        <option value="8">07.00</option>
        <option value="9">08.00</option>
    </optgroup>
</select>

要在您的视图中生成上述标记，您可以使用 Group 属性.

在操作方法中创建项目列表

var list = db.T_MYTABLE.ToList();

//Create a list of Groups
var groups = list.Select(x => x.DayId)
            .Select(f => new SelectListGroup() { Name = "Day " + f.ToString() }).ToList();

var groupedOptions = list.Select(x => new SelectListItem
{
    Value = x.HourId.ToString(),
    Text = x.Name,
    Group = groups.FirstOrDefault(a => a.Name == "Day " + x.DayId.ToString())
}).ToList();

ViewBag.MyList = groupedOptions;

return View();

假设您的实体 Name 属性是 string 类型。如果是数值类型，在上面linq查询的projection部分设置Text属性值时使用ToString()方法(Text=x.Name.ToString())

现在，在您的剃刀视图中，您可以使用 Html.DropDownList 辅助方法来呈现 SELECT 元素。

@Html.DropDownList("ddl_Hours", ViewBag.MyList as List<SelectListItem>)

或为多select

@Html.ListBox("ddl_Hours", ViewBag.MyList as List<SelectListItem>)

现在你可以调用你的 jQuery 插件来让它更漂亮了。我会在文档的 ready 事件

中调用它

$(function () {

    $('#ddl_Hours').multiselect();

})

瞧！

以编程方式进行多选分组 - MVC

Multiselect grouping programmatically - MVC

asp.net-mvc

razor

bootstrap-multiselect