All geek questions in one place

Asp.net caching dropdownlist for huge data

I need to bind almost 50 thousand entries to my asp.net drop-down list, and it should be searchable. What is the best way to implement it. Are there caching methods to let the list load as it scrolls? Rate the suggestions.

Please inform.

+4
source share
9 answers

You can achieve this using the web service.

First of all, add the following code to your aspx page.

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

Now create your web service using the following code.

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;
    }
}

Finally, create a jquery method to bind the text field to the 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>
+1
source

I would recommend using the jQuery autocomplete plugin:

https://jqueryui.com/autocomplete/

. ( ):

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

+3

controller action ( ASP.NET MVC) page method ( - ASP.NET), searchTerm (, 100).

typeahead/ autocomplete, . , Ajax . Ajax- . .

+2

, . , , javascript .

0
<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;
        }
0

, RadAutoCompleteBox. , . ASP.NET.

0

.

  • usign ajax .
  • javascript, .

:

0

Autocomplete .

1:

  • , .
  • , (Fetch 50k ). , DOM . .

2: select

  • But if you want to provide the best of customer convenience , you have to go with a solution in which the selection box is virtualized and the data loaded in DOMwhile scrolling through the selection window. Thanks to virtualization, you will make sure that only those elements are clicked on the DOM that are displayed on the screen at this point in time.

    You can find jQuery-based virtual selections here

    A similar implementation in React is here

    enter image description here

0
source

Source: https://habr.com/ru/post/1692780/

More articles:


All Articles