如何在 .NET 中生成动态嵌套 CheckBoxLists

Question

我正在尝试使用 C# 在 .NET 中生成动态嵌套 CheckBoxLists。

我想在每个部门和区域旁边显示一个复选框。当一个部门的复选框被选中时，它应该在其正下方显示该部门的区域，缩进，旁边有复选框。

我可以动态生成带有复选框的部门，但我不确定如何处理这些区域。部分问题是我没有每个部门的个人 ID，它只是一个列表。

<div class="TABLE">
    <div class="ROW">
        <div class="CELL CELL50">
            <asp:CheckBoxList id="cblDepts" runat="server" OnSelectedIndexChange="cblDepts_OnSelectedIndexChange"></asp:CheckBoxList>
        </div>
        <div class="CELL CELL50">
            <asp:CheckBoxList id="cblAreas" runat="server" Visible="false"> 
         </asp:CheckBoxList>
        </div>
    </div>
</div>

protected void LoadFilters()
    {
        _datalayer = new DataLayer();
        deptAreas = new Dictionary<string, Tuple<string, string>>();
        Dictionary<string, string> depts = new Dictionary<string, string>();
        DataSet dsDepts = _datalayer.GetDepartments();

        if(dsDepts != null && dsDepts.Tables[0].Rows.Count > 0)
        {
            foreach (DataRow dr in dsDepts.Tables[0].Rows)
            {
                depts.Add(dr["DepartmentId"].ToString(), dr["DepartmentDetails"].ToString());
            }
        }

        this.cblDepts.Items.Clear();
        this.cblAreas.Items.Clear();

        foreach(var dept in depts)
        {
            this.cblDepts.Items.Add(new ListItem(dept.Value, dept.Key));
            DataSet dsAreas = _datalayer.GetAreas(dept.Key.ToChange<int>().Value);

            if(dsAreas != null && dsAreas.Tables[0].Rows.Count > 0)
            {
                foreach (DataRow dr in dsAreas.Tables[0].Rows)
                {
                    deptAreas.Add(dept.Key, Tuple.Create(dr["AreaId"].ToString(), dr["AreaDetails"].ToString()));
                }
            }

        }

    }

结果应该是，当您单击部门旁边的复选框时，该部门的区域显示在该部门下方，缩进，每个旁边都有一个复选框。

Answer 1

一个超级简单的例子如下：

<div class="TABLE">
        <div class="ROW">
            <div class="CELL CELL50">
                <asp:CheckBoxList ID="cblDepts" runat="server" OnSelectedIndexChanged="cblDepts_SelectedIndexChanged" AutoPostBack="True"></asp:CheckBoxList>
            </div>
            <div class="CELL CELL50">
                <asp:CheckBoxList ID="cblAreas" runat="server" Visible="false">
                </asp:CheckBoxList>
            </div>
        </div>
    </div>

public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                this.cblDepts.Items.Add(new ListItem() { Text = "1", Value = "1" });
                this.cblDepts.Items.Add(new ListItem() { Text = "2", Value = "2" });
                this.cblDepts.Items.Add(new ListItem() { Text = "3", Value = "3" });
            }
        }

        protected void cblDepts_SelectedIndexChanged(object sender, EventArgs e)
        {
            this.cblAreas.Items.Clear();
            foreach (ListItem item in this.cblDepts.Items) {
                var selectedValue = "-1";
                if (item.Selected)
                {
                    selectedValue = item.Value;
                }

                if (selectedValue == "1")
                {
                    this.cblAreas.Items.Add(new ListItem() { Text = "1.1", Value = "1.1" });
                }
                else if (selectedValue == "2")
                {
                    this.cblAreas.Items.Add(new ListItem() { Text = "2.2", Value = "2.2" });
                }
                else if (selectedValue == "3")
                {
                    this.cblAreas.Items.Add(new ListItem() { Text = "3.3", Value = "3.3" });
                }
            }

            if (this.cblAreas.Items == null || this.cblAreas.Items.Count == 0)
            {
                this.cblAreas.Visible = false;
            }
            else
            {
                this.cblAreas.Visible = true;
            }

        }
    }

上面的示例是虚拟的，仅用于演示，它绝不是适合生产的代码，但你明白了！

Answer 2

如果使用 javascript 对您来说不是问题，您可以执行以下操作：

<asp:Repeater ID="DepartmentsRepeater" runat="server">
        <ItemTemplate>
            <input class="departments" onclick="show(this)" type="checkbox" value="<%# Container.DataItem?.ToString() %>" /><%# Container.DataItem?.ToString() %> </br>
            <asp:Repeater ID="AreasRepeater" runat="server" DataSource='<%# GetAreasOfDepartment(Container.DataItem?.ToString()) %>'>
                <ItemTemplate>
                    <div class="areas <%#((RepeaterItem)Container.Parent.Parent).DataItem?.ToString() %>">
                        <input type="checkbox" value="<%# Container.DataItem?.ToString() %>" /><%# Container.DataItem?.ToString() %> </br>
                    </div>
                </ItemTemplate>
            </asp:Repeater>
        </ItemTemplate>
    </asp:Repeater>

    <script>
        $(".areas").hide();

        function show(e) {
            $(".areas").hide();
            $(".departments").each(function (d) {
                if (this.checked) {
                    var c = "." + this.value;
                    $(c).show();
                }
            })
        }
    </script>


public partial class _Default : Page
    {
        public List<string> Departments = new List<string> { "HR", "Finance" };
        public Dictionary<string, List<string>> Areas = new Dictionary<string, List<string>>
        {
            {"HR", new List<string>{"HR1","HR2"} },
            {"Finance", new List<string>{ "Finance1", "Finance2" } }
        };
        protected void Page_Load(object sender, EventArgs e)
        {
            this.DepartmentsRepeater.DataSource = Departments;
            this.DepartmentsRepeater.DataBind();
        }

        public List<string> GetAreasOfDepartment(string dep)
        {
            return Areas[dep];
        }
    }

如前所述，此代码仅用于演示，并未针对生产使用进行优化

Answer 3

如果没有在 Visual Studio 中编写所有代码，真的很难。所以在这里我会帮助你开始。据我了解，每个部门都有一个区域列表，您应该创建一个类来说明这一点。

例如这样：

public class Area()
public int AreaId {get; set; }

public string AreaDetails { get; set; }

}

public class Departments (){
public int DepartmentId { get; set; }

public string DepartmentDetails { get; set; }

public List<Area> Areas { get; set; } // all area that are included in the current depertment

}

获得列表后，您现在应该开始创建复选框。

因此，您现在可以检索所需的部门 ID OnSelectedIndexChange。接下来您在列表中找到选定的部门，然后创建复选框和一个 div 详细部门和Areas。

您知道如何创建复选框列表，但如果您需要更多信息，请点击以下链接：How to create dynamic checkbox in asp.net