向列表框异步添加项目
本文关键字:添加 项目 异步 列表 | 更新日期: 2023-09-27 17:53:40
我正在为列表框uxSearchList
添加项目。然而,即使后面的代码如预期的那样工作,,点击Search
后,更改并没有反映在uxSearchList
列表框中。
我做了以下事情:
- 输入搜索条件(
uxEsnCheck/Text
,uxLocationList/Text
) - 点击
Search
- (正在进行中)将搜索结果填充到
uxSearchList
我如何通过我目前拥有的填充uxSearchList
列表框?我的代码如下:
.ASPX.CS
protected void uxSearchParams_Click(object sender, EventArgs e)
{
uxSearchList.Items.Clear();
var selectedSerial = uxEsnText.Text;
var selectedLocation = uxLocationList.Text;
if (!uxEsnText.Enabled)
{
selectedSerial = string.Empty;
}
if (!uxLocationList.Enabled)
{
selectedLocation = string.Empty;
}
if (Page.IsValid)
{
var selectedParams = _presenter.OnSelectionParams(selectedSerial, selectedLocation);
foreach (var param in selectedParams)
{
uxSearchList.Items.Add(param.SerialNumber);
}
}
}
。ASPX
<asp:UpdatePanel ID="uxParamsPanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:CheckBox ID="uxEsnCheck" runat="server" CssClass="form-label" Text="Engine Serial Number" OnCheckedChanged="uxEsnCheck_CheckedChanged" AutoPostBack="true" />
<asp:TextBox ID="uxEsnText" runat="server" Enabled="False"/>
<asp:CheckBox ID="uxLocationCheck" runat="server" CssClass="form-label" Text="Location" OnCheckedChanged="uxLocationCheck_CheckedChanged" AutoPostBack="true" />
<asp:DropDownList ID="uxLocationList" runat="server" Enabled="False"/>
<asp:Button ID="uxSearchParams" runat="server" onclick="uxSearchParams_Click" CssClass="form-label" Text="Search" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="uxSearchParams" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="uxEsnCheck" EventName="CheckedChanged" />
<asp:AsyncPostBackTrigger ControlID="uxLocationCheck" EventName="CheckedChanged" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel ID="uxSelectionPanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="uxSearchDisplay" runat="server" CssClass="form-label" Text="Search Results" />
<asp:ListBox ID="uxSearchList" runat="server" Width="250px" />
<asp:Label ID="uxMemberDisplay" runat="server" CssClass="form-label" Text="Engine Group Members" />
<asp:ListBox ID="uxMemberList" runat="server" Width="250px" />
<asp:Button ID="uxAdd" runat="server" onclick="uxAdd_Click" Text=">" />
<asp:Button ID="uxRemove" runat="server" onclick="uxRemove_Click" Text="<" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="uxAdd" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="uxRemove" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
使用数据绑定方法可能会得到更好的结果。使用下面的类,我能够得到正确显示的结果。
using System;
using System.Collections.Generic;
namespace Test.Web
{
public partial class Test : System.Web.UI.Page
{
private readonly IList<string> database;
private string currentSearch;
public Test()
{
database = new List<string>();
database.Add("hello");
database.Add("world");
}
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
uxSearchList.DataBinding += dataBindSearch;
}
protected void OnSearch(object sender, EventArgs e)
{
currentSearch = searchText.Text;
uxSearchList.DataBind();
}
private void dataBindSearch(object sender, EventArgs e)
{
IList<string> results = new List<string>();
foreach (string item in database)
{
if (item.StartsWith(currentSearch))
{
results.Add(item);
}
}
uxSearchList.DataSource = results;
}
}
}
主要区别在于我使用DataSource
而不是Items
集合,并在搜索查询更改时调用列表上的DataBind。
如果此更改不适合您,则标记可能存在另一个问题。我只是绑定了OnTextChanged事件,仅此而已。
<div>
<asp:TextBox ID="searchText" OnTextChanged="OnSearch" AutoPostBack="true" runat="server" />
<asp:UpdatePanel ID="uxSelectionPanel" runat="server">
<ContentTemplate>
<asp:Label ID="uxSearchDisplay" runat="server" CssClass="form-label" Text="Search Results" />
<asp:ListBox ID="uxSearchList" runat="server" Width="250px" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
当您点击搜索时,您正在更新服务器端的列表。您需要为客户端提供一种更新的方式。我看到uxSearchList在UpdatePanel中。我不太擅长这些,但我会尝试添加额外的触发器。这样,当uxSearchList的内容发生变化时,面向客户端的显示也会更新。