强制 asp.net 列表控件在为空时生成 html

Question

我有一对复选框列表，我想在它们之间切换项目。这些项目的切换是使用 javascript 完成的。基本上，生成页面，生成复选框列表的表，然后通过单击按钮，您可以在两者之间交换项目。

    <tr>
        <th>Report Columns</th>
        <td>
            <div id="allFieldsContainer" style="overflow-y: scroll; height: 200px; width: auto; border: 1px solid #DDDBDB;">
                <a href="#" class="list-group-item active">All Columns 
                    <input title="toggle all" type="checkbox" class="all pull-right" /></a>
                <asp:CheckBoxList ID="allFields" CssClass="list-group" runat="server">
                </asp:CheckBoxList>
            </div>
        </td>
        <td>
            <div id="transferButtons">
                <button class="add" onclick="return false;" style="width: 100%;">--></button>
                <button class="remove" onclick="return false;" style="width: 100%;"><--</button>
            </div>
        </td>
        <td>
            <div id="selectedFieldsContainer" style="overflow-y: scroll; height: 200px; width: auto; border: 1px solid #DDDBDB;">
                <a href="#" class="list-group-item active">Selected Columns 
                    <input title="toggle all" type="checkbox" class="all pull-right" /></a>
                <asp:CheckBoxList ID="selectedFields" CssClass="list-group" runat="server" >
                </asp:CheckBoxList>
            </div>
        </td>
    </tr>

当然，其中一个复选框列表应该从空开始，另一个是满的。因此，"allFields"将包含他们想要选择的所有字段，然后"selectedFields"将从空开始。问题是，空的复选框列表不会为它们生成任何 html。请参阅下面生成的页面。

        <th>Report Columns</th>
        <td>
            <div id="allFieldsContainer" style="overflow-y: scroll; height: 200px; width: auto; border: 1px solid #DDDBDB;">
                <a href="#" class="list-group-item active">All Columns 
                    <input title="toggle all" type="checkbox" class="all pull-right"></a>
                <table id="ContentPlaceHolder1_allFields" class="list-group">
                    <tbody>
                        <!–– Data in here is generated fine, along with the table -->
                    </tbody>
                </table>
            </div>
        </td>
        <td>
            <div id="transferButtons">
                <button class="add" onclick="return false;" style="width: 100%;">--&gt;</button>
                <button class="remove" onclick="return false;" style="width: 100%;">&lt;--</button>
            </div>
        </td>
        <td>
            <div id="selectedFieldsContainer" style="overflow-y: scroll; height: 200px; width: auto; border: 1px solid #DDDBDB;">
                <a href="#" class="list-group-item active">Selected Columns 
                <input title="toggle all" type="checkbox" class="all pull-right"></a>
                <!-- There should be a table here, there isn't one -->
                <!-- This causes javascript to fail as it references a missing table -->
            </div>
        </td>

我已经尝试了一些方法，例如添加一个带有display:none;的虚拟项目，但这会在表格中留下尴尬的间距。我一直在考虑编写一些 javascript 以在页面加载后立即将其删除，但我想知道我是否缺少一些更容易的东西。

Answer 1

我建议将 asp.net 控件与更新面板一起使用，因为它将使编写代码和管理它变得容易。除非你不擅长JS，否则在Webform中工作时会遇到问题。当我不得不从Listbox中选择和移动项目时，我最近遇到了类似的使用，所以对我来说简单的解决方案是使用 asp.net Listbox，因为我在JS上遇到了很多问题

我对列表框所做的事情的简要示例，您可以对列表检查做同样的事情

例

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div class="row-auto">
            <div class="c1">
                <asp:ListBox ID="lstAllPlayers" CssClass="all-player-list" SelectionMode="Multiple" DataTextField="Name" DataValueField="ID" runat="server"></asp:ListBox></div>
            <div class="c2">
                <div class="btn-wrapper">
                    <asp:Button ID="btnAddTeamZA" CssClass="btn-square" runat="server" Text=">" OnClick="btnAddTeamZA_Click" />
                    <asp:Button ID="btnRemoveTeamZA"  CssClass="btn-square" runat="server" Text="<" OnClick="btnRemoveTeamZA_Click" />
                </div>
                <asp:ListBox ID="lstTournamentPlayers" CssClass="all-player-zone" SelectionMode="Multiple" runat="server"></asp:ListBox>
            </div>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

//ZONE A
protected void btnAddTeamZA_Click(object sender, EventArgs e)
{
    lstTournamentPlayers.Items.Add(new ListItem(lstAllPlayers.SelectedItem.Text, lstAllPlayers.SelectedItem.Value));
    lstAllPlayers.Items.Remove(lstAllPlayers.SelectedItem);
}
protected void btnRemoveTeamZA_Click(object sender, EventArgs e)
{
    lstAllPlayers.Items.Add(new ListItem(lstTournamentPlayers.SelectedItem.Text, lstTournamentPlayers.SelectedItem.Value));
    lstTournamentPlayers.Items.Remove(lstTournamentPlayers.SelectedItem);
}
protected void getPlayers()
{
    String strSql = " SELECT * FROM  Players Order by Name ASC";
    DataSet ds = new DataSet();
    ds = DataProvider.Connect_Select(strSql);
    lstAllPlayers.DataSource = ds;
    lstAllPlayers.DataBind();
    //  lstAllTeams.Items.Insert(0, new ListItem("Select Tournament", "0"));
}