代码之家 › 专栏 › 技术社区 › aminvincent

在DropDownList ASP.NET Web窗体中显示大量数据[重复]

jquery-select2 webforms asp.net c#

aminvincent · 技术社区 · 8 年前

我必须将近5万条记录绑定到我的ASP.NET DropDownlist,并且它必须是可搜索的。实现它的最佳方法是什么?是否有任何缓存技术可以在我们滚动时加载列表?感谢你的建议。

请告知。

0 回复 | 直到 8 年前

Krishan Dutt Sharma 8 年前

您可以通过使用Web服务来实现这一点。

首先,在ASPX页面中添加以下代码。

<div>
    <input type="text" value="" id="tbCountries" />
</div>

现在,使用以下代码创建Web服务。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data.SqlClient;

[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.>WebService {
    [WebMethod]
    public List<string> ShowCountryList(string sLookUP)
    {
        List<string> lstCountries = new List<string>();

        string sConnString = "Data Source=DNA;Persist Security Info=False;" +
            "Initial Catalog=DNA_CLASSIFIED;User Id=sa;Password=;Connect Timeout=30;";

        SqlConnection myConn = new SqlConnection(sConnString);
        SqlCommand objComm = new SqlCommand("SELECT CountryName FROM Country " + 
            "WHERE CountryName LIKE '%'+@LookUP+'%' ORDER BY CountryName", myConn);
        myConn.Open();

        objComm.Parameters.AddWithValue("@LookUP", sLookUP);
        SqlDataReader reader = objComm.ExecuteReader();

        while (reader.Read()) {
            lstCountries.Add(reader["CountryName"].ToString());
        }
        myConn.Close();  return lstCountries;
    }
}

最后,使用WebService为bind文本框创建jquery方法,

<script>
    $(document).ready(function() {
        BindControls();
    });

    function BindControls() {
        $("#tbListOfCountries").autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "WebService.asmx/ShowCountryList",
                    data: "{ 'sLookUP': '" + request.term + "' }",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function(data) { return data; },
                    success: function(data) {
                        response($.map(data.d, function(item) {
                            return { value: item }
                        }))
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            },
            minLength: 1    // MINIMUM 1 CHARACTER TO START WITH.
        });
    }
</script>

Adam 8 年前

我建议利用jquery的自动完成插件:

https://jqueryui.com/autocomplete/

它是可配置的,并且具有开箱即用的自动完成搜索功能。它还可以使用远程数据源(尽管您可能会考虑使用分页API响应):

http://api.jqueryui.com/autocomplete/#option-source

turdus-merula 8 年前

在后端,创建 controller action (如果使用的是ASP.NET MVC)或 page method (如果您使用的是ASP.NET Web窗体)接收 searchTerm 参数,并返回顶部(例如100)结果的数组。

在前端,使用输入 / 自动完成 插件,如 this one . 当用户设置搜索词时,对后端执行Ajax请求并显示结果。当执行 Ajax request ,您还可以启用和配置缓存。不再需要优化。

Jebin 8 年前

使用自动完成文本框并从远程API设置数据源,尤其是在处理大型数据集时。这将避免应用程序UI在每次字符搜索时被挂起。

参考链接: https://github.com/ghiden/angucomplete-alt

user1753377 8 年前

取决于列表项的来源。如果它们来自一个列表或数据库,只需附加它们,然后使用javascript搜索该列表。

Kaptan 8 年前

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>    

</head>
<body>
    <form id="form1" runat="server">
        <div class="ui-widget">
            <asp:TextBox ID="txtDepartment" runat="server"  ClientIDMode="Static" />            
        </div>
    </form>
    <script>       

        $(function () {

            $("[id$=txtDepartment]").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "FetchDropdownList.aspx/GetDepartment",
                        data: "{'departmentName':'" + document.getElementById('txtDepartment').value + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        dataFilter: function (data) { return data; },
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    value: item.Name
                                }
                            }))
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(textStatus);
                        }
                    });
                },
                minLength: 1
            });
        });        
    </script>
</body>
</html>

public class Department
        {
            public int Id { get; set; }
            public string Name { get; set; }
        }

        private static List<Department> GetDepartment()
        {
            List<Department> departments = new List<Department>();
            for (int i = 0; i < 10000; i++)
            {
                Department department = new Department();
                department.Id = i;
                department.Name = "Department " + i.ToString();
                departments.Add(department);
            }
            return departments;
        }

        [WebMethod]
        public static List<Department> GetDepartment(string departmentName)
        {            
            int totalDepartments = GetDepartment().Count;
            List<Department> departments = GetDepartment().Where(d => d.Name.ToLower().StartsWith(departmentName.ToLower())).Take(20).ToList();

            return departments;
        }

Ali Soltani 8 年前

我和你有同样的问题 RadAutoCompleteBox . 它有很多客户端和服务器端事件,帮助您处理各种情况。它对于ASP.NET项目非常舒适。

Bhuban Shrestha 8 年前

我看到了两个直接的解决办法。

正如其他人所建议的那样,使用usign-ajax将相关项目作为用户类型搜索并显示出来。
在页面加载时,获取所有数据并将其存储在javascript变量中,然后您可以将该变量作为用户类型进行搜索,并将搜索结果绑定到下拉列表中。

类似 this one :

PSK 8 年前

当然,任何自动完成的实现都可以在您的场景中工作。

解决方案1: 使用自动完成选择框

如果您不想浪费带宽或想支持设备低规格,应该在服务器端进行自动完成数据提取。
如果你想的话 高可用性 不在乎带宽, 您可以对本地数据使用自动完成功能(一次提取50k条记录并绑定到自动完成)。但要确保你不画画所有这些都在同一时间进入DOM。 你需要限制记录在特定的时间被展示。

解决方案2 :使用Select进行虚拟化

但是如果你想 最适合您的客户 ,您应该使用选择框所在的解决方案 虚拟化 以及加载到 DOM 滚动选择框时。通过 虚拟化 你要确保只有那些项目被推到 DOM 显示在在那个时间点进行筛选。

您可以找到一个基于jquery的虚拟选择 here

在React中类似的实现 here