Принудительно заставить элементы управления списком 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, у вас будут проблемы с работой в веб-форме. Недавно я столкнулся с подобным использованием, когда мне пришлось выбирать и перемещать элементы из списка, поэтому для меня было простым решением использовать список списков asp.net, так как я столкнулся с большой проблемой с js

Краткий пример того, что я сделал со списком, вы можете сделать то же самое для 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"));
}