Отображение огромных данных в DropdownList ASP.NET Webform [дубликат]
Вы можете использовать конструкцию
<(command)
, чтобы bash создал fifo с выводами команд для вас. Поэтому просто попробуйте:
-i <(echo "$inputData")
9 ответов
Вы можете достичь этого с помощью веб-службы.
прежде всего добавьте следующий код на страницу aspx.
<div>
<input type="text" value="" id="tbCountries" />
</div>
Теперь создайте свой веб-сервис, используя следующий код .
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;
}
}
Наконец, создайте метод jquery для связывания Текстовое поле с webservice,
<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>
Я бы рекомендовал использовать плагин автозаполнения jQuery:
https://jqueryui.com/autocomplete/
Он настраивается и имеет автозаполнение поиск из коробки. Он также может потреблять ваш удаленный источник данных (хотя вы можете рассмотреть ответ с разбивкой по страницам):
У меня была такая же проблема, как вы, и я использовал RadAutoCompleteBox . Он имеет множество клиентских и серверных событий, которые помогают вам справляться с различными ситуациями. Это очень удобно для проектов ASP.NET.
Я вижу два немедленных решения для этого.
- Поскольку другой предложил usign ajax для поиска связанного элемента в качестве типов пользователей и отображения их.
- На загрузке страницы все ваши данные и сохраните их в переменной javascript, то вы можете выполнить поиск по этой переменной в качестве типов пользователей и связать результат поиска с выпадающим списком.
Подобно этому :
Использовать текстовое поле автозаполнения и задавать источник данных из удаленного API, особенно при работе с огромным набором данных. Это позволит избежать зависания вашего пользовательского интерфейса приложения при каждом поиске символов.
<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;
}
Определенно любая реализация Autocomplete будет работать в вашем сценарии.
Решение 1: Используйте поле выбора автозаполнения
- Если вы не хотите тратить пропускную способность или хотите поддерживать устройства с низкой спецификацией, вы должны пойти в AutoComplete с извлечением данных на стороне сервера.
- Если вы хотите иметь высокую удобство использования и не заботитесь о пропускной способности, вы можете использовать автозаполнение с локальными данными (Fetch 50k записывается один раз и привязать к автозаполнению). Но чтобы убедиться, что вы не рисуете все эти данные в DOM за один раз. Вы должны ограничить записи, отображаемые в определенное время.
Решение 2: использовать select с виртуализацией
- Но если вы хотите дать лучшее из удобство использования для ваших клиентов, вы должны пойти с решением, в котором виртуализирован ваш поле выбора, и данные, загруженные в
DOMпри прокрутке окна выбора. По виртуализации вы убедитесь, что только те элементы попадают в DOM, которые отображаются на экране в этот момент времени. Здесь вы можете найти виртуальный select jQuery здесь . Аналогичная реализация в React здесь
В бэкэнд создайте controller action (если вы используете ASP.NET MVC) или page method (если вы используете веб-формы ASP.NET), который получает параметр searchTerm и возвращает массив (например, 100).
В интерфейсе используйте плагин typeahead / autocomplete, такой как этот . Когда пользователь устанавливает поисковый запрос, выполните запрос Ajax к серверу и отобразите результаты. При выполнении запроса Ajax вы также можете включить и настроить кеширование. Больше необходимости не требуется.
зависит от того, откуда берутся элементы списка. если они поступают из списка или базы данных, просто добавьте их, а затем используйте javascript для поиска в списке.