向列表框异步添加项目

本文关键字:添加 项目 异步 列表 | 更新日期: 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的内容发生变化时,面向客户端的显示也会更新。