ASP.NET 核心在用户搜索关键字输入时有条件地加载局部视图

Question

我们有一个显示很多（大）表的网络应用程序。为了用户友好 [=70=]，我们在您使用 ajax 键入并加载部分视图时实现了搜索（过滤器）。

简而言之：

输入控件 tbSearch，带有 keyup 事件的侦听器：

.on('keyup', 'input.filter', function () { showList(this); }

showList() 从 Controller 中获取一个 _PartialView，然后将过滤后的结果加载到 div/table (section-list):

function showList(control) { // search text var searchString = $('#tbSearch').val(); // url var url = 'mycontroller/myaction'; //parameters var data = { searchString: searchString, }; $('.section-list').load(url, data, function () { }); }

到目前为止，使用 ajax 加载非常基本的部分视图。大多数时候效果很好。

当用户快速键入并且搜索数据库的查询有点复杂时会出现问题。在这种情况下（因为 ajax.load 是异步的） showList() 函数可以在上一个搜索加载之前触发一个新的搜索字符串。这可能会导致用户输入的实际关键字的结果被先前的关键字之一覆盖。

例如，我开始快速写入搜索框：

米

我的

我的

我的

mysea

我的搜索

我的搜索（停止输入）

而不是结果显示过滤到“mysearch”的数据，它们实际上可以是“mysea”。

我正在考虑将 ajax get partialview 代码放入一个单独的异步函数（即 returns 一个 Promise），添加一个计数器（计算页面上的 keyups）并等待 ajax 函数完成，如果计数器匹配最后一个请求，单独加载 div 的内部 html...但这似乎是一个复杂的解决方案。

有什么想法（更简单的解决方案）吗？

Answer 1

我设法找到了一种解决方案，通过添加和检查计数器以及加载 ajax 结果来保持“键入时搜索”功能：

//counter
var searchCounter = 0;

function showList(control) {
    // counter 
    searchCounter++;
    var localCounter = searchCounter;

    // search text
    var searchString = $('#tbSearch').val();

    // url
    var url = 'mycontroller/myaction';

    //parameters
    var data = {
        searchString: searchString,
    };

    // ajax load partialview
    $.ajax({
        url: url,
        type: "POST",
        dataType: "html",
        data: data,
        success: function (partialViewHtml) {
            //only load, if counter is still a match
            if (localCounter === searchCounter) {
                $(".section-list").empty().append(partialViewHtml);
               
            }
        }
    });
}

ASP.NET 核心在用户搜索关键字输入时有条件地加载局部视图

ASP.NET Core conditionally load partial view on user search keyword input

javascript

jquery

asp.net-ajax

partial-views

asp.net-core