Asp.net web表单列表框分组 [英] Asp.net webforms ListBox Grouping
问题描述
我有了与它的摄像机列表上有一个列表框一个WebForm页面。它是由具有摄像头名，IP地址和组列的DataTable填充。
I have a webform page that has a Listbox on it with a list of cameras on it. It is populated by a datatable that has a column for camera name, ip address, and group.
DataClasses1DataContext dc = new DataClasses1DataContext();
public List<CameraTable> CameraListBox;
public List<ListItem> SelectedListBox;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
CameraListBox = (from x in dc.CameraTables
select x).ToList();
ListBox1.DataSource = CameraListBox;
ListBox1.DataTextField = "CameraName";
ListBox1.DataValueField = "IPAddress";
ListBox1.DataBind();
}
}
这code正常工作来用摄像机名称列表框，但我想使它所以它具有组，则该组中的摄像机。我不知道如何做到这一点。我学会了不问的问题在这里，除非我绝对必须的，但我已经研究这几天，找不到任何东西。这可能吗？我会做这一切的编程？
That code works fine to populate the listbox with the camera names, but I would like to make it so that it has the group then the cameras in that group. I have no idea how to do this. I learned not to asked questions on here unless I absolutely have to, but I've researched this for a few days and cannot find anything. Is this possible? Would I have to do all of this programmatically?
推荐答案
根据从这么回答一个伟大的方法：
<一href=\"http://stackoverflow.com/questions/16167862/how-can-i-add-option-groups-in-asp-net-drop-down-list\">How我可以添加选项组中的ASP.NET下拉列表？
Based on a great approach from SO answer: How can I add option groups in ASP.NET drop down list?
在ASP.NET列表框不支持 OPTGROUP HTML做分组您正在请求必需的。一种方法通过添加一个属性列表项目注入该功能捕捉类别，然后使用你喜欢的前端框架修改DOM来构建相应的 OPTGROUP 结构
A ListBox in ASP.NET does not support the optgroup html required to do the grouping you are requesting. One approach to inject this functionality by adding an attribute to the list items to capture the category, then using your favorite front-end framework to modify the DOM to build the appropriate optgroup structure.
由于ListBox控件不具有 OnItemDataBound 类型的事件，你不能得到数据绑定过程中，访问每个项目。由于这将是唯一的一次，你可以访问组的CameraTable记录，你不能做绑定 - 你必须自己建立列表，以便您可以添加组作为HTML属性每个选项。
Because the ListBox control does not have an OnItemDataBound type of event, you can't get access to each item during the data binding process. Since that would be the only time you could access the group of the CameraTable record, you cannot do databinding - you have to build the list yourself so that you can add the group as an html attribute to each option.
下面的方法是一个辅助创建与数据属性如果可能的话单列表项。
The method below is a helper to create a single list item with the data attribute if possible.
public ListItem GetListItem(CameraTable item)
{
var listItem = new ListItem(item.CameraName, item.IPAddress);
if (string.IsNullOrEmpty(item.GroupName) == false)
listItem.Attributes.Add("data-category", item.GroupName);
return listItem;
}
然后，而不是在列表框的绑定code，干脆直接建列表框。你必须考虑在回传视图状态和持久性，但是这至少是方法：
Then, instead of your databinding code on the listbox, just build the listbox directly. You'll have to account for the view state and persistence across postbacks, but this at least is the approach:
var itemsToAdd = CameraListBox
.Select(c => GetListItem(c))
.ToArray();
ListBox1.Items.AddRange(itemsToAdd);
最后，拿出你最喜欢的客户端框架（JQuery的下面）建OPTGROUP元素。
Finally, pull out your favorite client framework (JQuery below) to build the optgroup elements.
var groups = {};
$("select option[data-category]").each(function () {
groups[$.trim($(this).attr("data-category"))] = true;
});
$.each(groups, function (c) {
$("select option[data-category='"+c+"']").wrapAll('<optgroup label="' + c + '">');
});
这应该完成分组为你的元素。
This should complete the grouping for your elements.
更新基于COMMENT问题
如果你打算把它放在HTML的头部，你必须确保在DOM加载 - 否则你操纵那些还没有准备好元素。
If you're going to put it in the head of the html, you have to ensure the DOM has loaded - otherwise you are manipulating elements that are not yet ready.
要留在这儿的JQuery在的$（document）包裹的客户端脚本。就绪事件。我下面提供了一个完整的示例页面。
To stay with JQuery here, wrap the client script in a $(document).ready event. I included a full sample page below.
aspx页面
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Web.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var groups = {};
$("select option[data-category]").each(function () {
groups[$.trim($(this).attr("data-category"))] = true;
});
$.each(groups, function (c) {
$("select option[data-category='" + c + "']").wrapAll('<optgroup label="' + c + '">');
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="BodyContent" runat="server">
<asp:ListBox ID="ListBox1" runat="server" Height="100" Width="200" />
</asp:Content>
ASPX code的背后（与嘲笑数据上下文和cameratable）
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI.WebControls;
namespace Web
{
public partial class WebForm1 : System.Web.UI.Page
{
DataClasses1DataContext dc = new DataClasses1DataContext();
public List<CameraTable> CameraListBox;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
CameraListBox = (from x in dc.CameraTables
select x).ToList();
var itemsToAdd = CameraListBox
.Select(c => GetListItem(c))
.ToArray();
ListBox1.Items.AddRange(itemsToAdd);
}
}
public ListItem GetListItem(CameraTable item)
{
var listItem = new ListItem(item.CameraName, item.IPAddress);
if (string.IsNullOrEmpty(item.GroupName) == false)
listItem.Attributes.Add("data-category", item.GroupName);
return listItem;
}
}
public class DataClasses1DataContext
{
public IQueryable<CameraTable> CameraTables
{
get
{
return new List<CameraTable>()
{
new CameraTable("Back Hallway", "1.1.1.1", "Floor 1"),
new CameraTable("Bedroom 1", "2.2.2.2", "Floor 1"),
new CameraTable("Bedroom 2", "3.3.3.3", "Floor 2"),
}.AsQueryable();
}
}
}
public class CameraTable
{
public string CameraName { get; set; }
public string IPAddress { get; set; }
public string GroupName { get; set; }
public CameraTable(string name, string ip, string group)
{
this.CameraName = name;
this.IPAddress = ip;
this.GroupName = group;
}
}
}
这篇关于Asp.net web表单列表框分组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
