使用Javascript和C#动态搜索数据库并显示结果

本文关键字：数据库 显示 结果 搜索 动态 Javascript 使用 | 更新日期: 2023-09-27 18:20:05

我想在数据库中搜索clientName，并在用户键入时动态显示结果，以便他们可以选择user。现在我明白了，如果不使用javascript，就无法做到这一点。

因此，如果用户键入"Al"，则名为"Allan、Alison、Ali…"的客户端的重用将显示在其下方类似下拉列表的显示中。此时，用户正在将Clients名称输入到文本框中。

我知道创建DropDownList应该这样做：

private void InitializeNameDropDown(DataTable dtTable)
{
    string ClientName = Clienttb.Text;
    MySqlDataReader Reader = MySQLQuery(ClientName);
    int nTotalRecords = dtTable.Rows.Count;
    for (int i = 0; i < nTotalRecords; i++)
    {
        NameDropDown.Items.Add(dtTable.Rows[i]["Client"].ToString());
    }
}

MySQLQuery（）只是检查客户端是否存在于数据库中。但我不知道如何在用户输入时动态地与数据库交互以返回结果。

如有任何帮助，我们将不胜感激，提前表示感谢。

使用Javascript和C#动态搜索数据库并显示结果

您可以在没有JS的情况下执行此操作，在TextBox上挂起文本更改事件（OnTextChanged），并在其中更新DDL（不要忘记将AutoPostBack设置为true）。但是，如果您使用Ajax.NET，它可以很容易地让用户等待（"冻结页面"），甚至回滚他所写的内容

我强烈建议使用JS，而不是这样（使用JS和WCF/ashx/regular WS，其中任何一个都可以），因为性能提升和定制的可能性要大得多。ASP无论如何都会为"ASP控件"生成一个JS负载。

这可以应用于例如http://www.codeproject.com/KB/aspnet/Cross_Domain_Call.aspx

您必须挂接到文本框上的keyup事件，并从该事件中激发XmlHttpRequest-如果您使用的是jQuery，则非常简单：

$('#mytextbox').keyup(function() { $.ajax(blah blah) });

或者，正如Dennis所说，只需使用自动完成插件——它非常简单，运行良好。

至于客户端尝试jquery和jqueryui的自动完成，这只是一个建议，jquery有一个很好的ajax调用，使用起来非常简单，对于jqueryui自动完成，你只需传递关键字，它就会在输入框下创建一个列表。

http://jquery.com/

http://jqueryui.com/

http://api.jquery.com/jQuery.ajax/

这里有一些代码可能会让你开始。

它使用jqueryJavascript库。它假设您获得了要显示给用户的结果列表的完整HTML。您需要更多的Javascript来动态显示/隐藏包含列表的框。您还需要一个服务器端脚本，它可以根据一些搜索文本获取搜索结果的集合。该脚本应位于#searchPartialUrl标记中定义的URL（可以隐藏）。搜索文本应位于名为#searchText的输入中。

我喜欢这种方法，因为你可以在一个单独的文件中维护JS代码并重用它。你的服务器只需要创建HTML视图，这些视图在常规HTML标记中包含所有异步目标信息。

我还实现了在检查关键事件之间的延迟，这样您就不会不断地向服务器发送请求。（我从stackoverflow上的另一个答案中得到了这个方法，但我现在似乎找不到。我会在找到的时候给予表扬。）

// This function is used to delay the async request of search results
// so we're not constantly sending requests.
var mydelay = (function() {
    var timer = 0;
    return function(callback, ms) {
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
    };
})();
var asyncSearchForm = function(onSuccess) {
    var keyupWrapper = function(keyCode) {
        // if this key was an arrow key, then
        // ignore the press
        for (var i = 37; i <= 40; i++)
            if (keyCode == i)
            return;
        // get all the search info from the form
        var searchText = $('#searchText').val();
        var searchPartialUrl = $('#searchPartialUrl').val();
        // make the ajax call
        $.ajax({
            type: "POST",
            url: searchPartialUrl,
            data: {
                searchText: searchText
            },
            dataType: "html",
            // on success, the entire results content should be replaced
            // by the results returned
            success: function(data, textStatus, jqXHR) {
                $('#searchResults').html(data);
                onSuccess();
            },
            // on error, replace the results with an error message
            error: function(jqXHR, textStatus, errorThrown) {
                $('#searchResults').html('<p>An error occurred while getting the search results.</p>');
            }
        });
    };
    onSuccess = (typeof (onSuccess) == 'undefined') ? function() { } : onSuccess;
    // On each key-up event, we'll search for the given input. This event
    // will only get triggered according to the delay given, so it isn't
    // called constantly (which wouldn't be a good idea).
    $('#searchText').keyup(function(e) {
        // delay between each event
        mydelay(function() {
            // call key up
            keyupWrapper(e.keyCode);
        }, 500);
    });
}

更新：

你说你在用C#。如果您使用MVC，则需要在控制器中执行一个操作，作为异步请求的目标。这里有一个例子：

[HttpPost]
public ActionResult GetSearchResults(string searchText)
{
    // Here, you should query your database for results based
    // on the given search text. Then, you can create a view
    // using those results and send it back to the client.
    var model = GetSearchResultsModel(searchText);
    return View(model);
}
相关文章：