ASP.NET Core 有条件地加载用户搜索关键字输入的部分视图答案

【问题标题】：ASP.NET Core conditionally load partial view on user search keyword inputASP.NET Core 有条件地加载用户搜索关键字输入的部分视图
【发布时间】：2021-05-23 07:25:50
【问题描述】：

我们有一个显示大量（大）表格的 Web 应用程序。对于用户友好的 UI，我们使用 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() 函数可以在先前的搜索甚至加载之前为新的搜索字符串触发。这可能会导致用户输入的实际关键字的结果被先前的关键字之一覆盖。

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

米
我的
我的
我的
我的海
mysearc
mysearch（停止输入）

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

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

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

【问题讨论】：

嗨@TheMixy，尝试使用input event 或change event 来获取输入的值。
嗨@Zhi Lv.输入的值不是问题。我通过keyup 事件阅读它就好了。问题是显示结果的顺序 - 因为 ajax 正在异步工作。
嗨@TheMixy，根据您的代码，我已经使用keyup 事件创建了一个示例，正如您所说，如果快速键入，该事件可能不会立即触发。所以，在我之前的回复中，我建议你可以尝试使用 input 或 change 事件。对于Ajax功能，可以考虑将the async property设置为false，这样会同步发送请求。
我正在考虑将 async 设置为 false，但我认为这会对用户体验产生负面影响
是的，你是对的，使用同步方法可能会影响用户体验。我也搜索了一些类似的线程，例如：Thread 1 Thread 2和Thread 3。有些人会尝试在keyup事件中添加一个计时器，在最后一次键入后，稍等片刻然后调用Ajax方法。但是，大多数人会尝试使用输入或更改事件。所以，你可以考虑使用它们。

标签： javascript jquery asp.net-core asp.net-ajax partial-views

【解决方案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);
               
            }
        }
    });
}

【讨论】：