Ошибка автозаполнения mvc angularjs при загрузке более 16000 записей из локальной базы данных - PullRequest
Новая
       20

Ошибка автозаполнения mvc angularjs при загрузке более 16000 записей из локальной базы данных

1 голос
/ 26 марта 2019

Я новичок в angularJS, поэтому прошу прощения, если что-то не очень понятно. Я пытаюсь создать мастер донора для поиска прототипа внутреннего приложения. Я могу получить данные, которые составляют ~ 7,5 млн записей и загружены в переменную. Проблема в том, что пользовательский интерфейс выдает ошибку, если я удаляю Take () или оставляю Take (> 16000) записей. Я что-то упускаю или это не рекомендуемый подход для целей поиска? В идеале я хочу, чтобы пользователи могли искать каждого донора. Я использую angucomplete-alt.js для автозаполнения части. angucomplete-alt.js

Просмотр: 

@{
    ViewBag.Title = "Index";
}

<div class="container">

    <h2>Search Donor</h2>

    <div ng-app="donorSearch">
        <div ng-controller="ngAutoCompleteController">
            <div angucomplete-alt id="txtAutocomplete" placeholder="Type Donor name" pause="100" 
                 selected-object="afterSelectedDonor" local-data="Donors" search-fields="LastName,FirstName,AccountNumber"
                 title-field="AcctNm"  minlength="1" input-class="form-control" match-class="highlight" >

            </div>
            <div ng-show="SelectedDonor">
                Selected Donor : {{SelectedDonor.FullName}}
            </div>
        </div>
    </div>

</div>

@* JS *@
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script>
<script src="~/Scripts/angucomplete-alt.js"></script>
<script src="~/Scripts/donorSearch.js"></script>
@* CSS *@
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/angucomplete-alt.css" rel="stylesheet" />
<style type="text/css">
    .angucomplete-dropdown {
        overflow-y: auto;
        max-height: 200px;
    }
</style>

Контроллер: 

public JsonResult GetDonors()
    {

        using (SeDbEntities dc = new SeDbEntities())
        {

            var v = (from ln in dc.A01_AccountMaster
                     where ln.LastName != null & ln.LastName != string.Empty
                     select new 
                     {
                         ln.LastName
                         ,
                         ln.FirstName
                         ,
                         ln.AccountNumber
                         ,
                          FullName = ln.FirstName +" "+ ln.LastName
                         ,
                         AcctNm = ln.LastName + ", " + ln.FirstName +" "+ln.AccountNumber
                     }
                    ).OrderBy(n => n.LastName.Trim()).Take(16000).ToList();
            return new JsonResult { Data = v, JsonRequestBehavior = JsonRequestBehavior.AllowGet }; 
        }
    }
}

Сценарии 

var app = angular.module('donorSearch', ['angucomplete-alt']);
app.controller('ngAutoCompleteController', ['$scope', '$http', function($scope, $http) {
  $scope.Donors = [];
  $scope.SelectedDonor = null;


  //After select donor event
  $scope.afterSelectedDonor = function(selected) {
    if (selected) {
      $scope.SelectedDonor = selected.originalObject;
    }
  }

  //Populate data from database 
  $http({
    method: 'GET',
    url: '/home/GetDonors'
  }).then(function(data) {
    $scope.Donors = data.data;
  }, function() {
    alert('Error');
  })
}]);

1 Ответ

0 голосов
/ 27 марта 2019

Остерегайтесь любых "образцов", предоставленных создателями контроля.Они гарантированно представляют только самые основные сценарии и, как правило, не актуальны в реальном мире.Из того, что я вижу в этом элементе управления, пример демонстрирует автозаполнение на стороне клиента, которое для всех практических целей бесполезно.(Просто используйте раскрывающийся список в этом случае) Вы столкнулись с проблемой, потому что вы пытаетесь предоставить полный список всех данных клиенту.Клиентская сторона работает, когда у вас есть относительно небольшое количество элементов (от 100 до 1000), но не когда у вас намного больше.

Для автоматического завершения управления вы хотите найти примеры реализации на стороне сервера.автозаполнение.Это включает в себя привязку элемента управления к HTTP GET / Fetch, чтобы при вводе в элемент управления серверный вызов выполнял и выполнял запрос, чтобы получить предложения, совпадающие с типом человека, и вернуть ограниченное число предложений.(Т.е. 500) Вы должны реализовать логику поиска, такую ​​как поиск совпадений, начиная с того, что набрано, или используя другие методы запросов.Другой важной деталью является также использование debounce для вашего события ввода, чтобы гарантировать, что ваш поиск не будет повторяться при каждом нажатии клавиши пользователем, но ждет, чтобы, если пользователь печатал 4 символа («fred»)") и пауза, 1 поиск уходит на" fred ", а не 4 поиска:" f "," fr "," fre "и" fred ".

С чего начать: https://itnext.io/using-angular-6-material-auto-complete-with-async-data-6d89501c4b79

Возможно, существует большое количество элементов автозавершения для Angular, ищите примеры / реализации на стороне сервера и обязательно добавьте debounce.

...