html - 强制asp.net列表控件为空时生成html
问题描述
我有一对复选框列表,我想在它们之间切换项目。这些项目的切换是使用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%;">--></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>
<!-- 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 以在页面加载后立即将其删除,但我想知道是否有一些更简单的东西我错过了。
解决方案
我建议使用带有更新面板的 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"));
}
推荐阅读
- node.js - Nestjs 是否支持同时在操作上获取和发布?
- docker - Docker:数据库、客户端和 API 之间的分离级别
- laravel - 如何在 laravel 的查询生成器中使用 with
- css - 如何使用 w3.css 制作全角和响应式表格
- python - Raspberry Pi Reboot 时运行 Python3 Web 服务器程序
- postgresql - 如何使用 golang-migrate 进行迁移
- database - 关于可空外键及其替代方案的实践
- mvel - 访问 MVEL ASTNode 信息
- moodle - 如何为moodle mobile设置自定义网址?
- maven - 使用“mvn deploy”命令和 Artifactory UI 将工件部署到 Artifactory 有什么区别?