强制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 时会遇到问题。当我不得不从列表框中选择和移动项目时，我最近遇到了类似的使用，所以对我来说简单的解决方案是使用 asp.net 列表框，因为我遇到了很多 js 问题

我对 listbox 所做的简单示例，您可以对 listcheckbo 做同样的事情

例子

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