ASP.NET搭配Ajax实现搜索提示功能-前端开发

ASP.NET是一种用于构建动态网站和Web应用程序的框架。它可以与AJAX（异步JavaScript和XML）结合使用来实现各种功能，其中之一是搜索提示功能。

ASP.NET是一种用于构建动态网站和Web应用程序的框架。它可以与AJAX（异步JavaScript和XML）结合使用来实现各种功能，其中之一是搜索提示功能。

搜索提示功能允许用户输入关键字时，动态地显示相关联的结果。这种实时反馈可以提高用户的操作效率和用户体验。

以下是使用ASP.NET和AJAX实现搜索提示功能的完整攻略：

创建ASP.NET Web应用程序

首先，我们需要创建一个ASP.NET Web应用程序。可以使用Visual Studio等工具来创建。在创建应用程序时，不要勾选"Web Forms"选项，因为我们将使用ASP.NET MVC模式。

安装AJAX库

在ASP.NET MVC应用程序中使用AJAX需要安装Microsoft.AspNet.Mvc.Ajax NuGet包和Microsoft.jQuery.Unobtrusive.Ajax NuGet包。使用NuGet包管理器可以轻松安装这些包。

创建搜索控制器和视图

在ASP.NET MVC中，控制器用于处理所有HTTP请求，并将它们转发到正确的方法和视图。我们需要创建一个控制器来处理搜索请求。

在Visual Studio中，右键单击Controllers文件夹，选择“添加” -> “控制器”，在“添加新项”对话框中选择“MVC控制器 -Empty”选项，然后在名称字段中输入“SearchController”。单击“添加”按钮创建控制器。

创建控制器后，我们需要为其添加一个方法来处理搜索请求。在SearchController类中添加以下代码：

public JsonResult GetSearchSuggestions(string searchTerm)
{
     // TODO: Query the database and get search suggestions
     return Json(new List<string>() { "suggestion1", "suggestion2" }, JsonRequestBehavior.AllowGet);
}

此方法将获取搜索关键字，并从数据库中检索相关的搜索建议。在这种情况下，我们只是硬编码了一些搜索建议。

接下来，我们需要为这个搜索方法创建一个视图。在Visual Studio中，右键单击Views文件夹，选择“添加” -> “视图”，在“添加新项”对话框中选择“搜索View”选项，然后在名称字段中输入“GetSearchSuggestions”，单击“添加”按钮创建视图。

在GetSearchSuggestions视图中，我们需要指定返回的搜索建议的格式。因此，我们将创建一个JavaScript数组，用于存储搜索建议。在视图中添加以下代码：

@model List<string>
@{
    Layout = null;
}
@{
    List<string> searchSuggestions = Model;
}
var suggestions = [];
@foreach (var suggestion in searchSuggestions)
{
    @:suggestions.push("@suggestion");
}
@suggestions

这将创建一个名为“suggestions”的JavaScript数组，其中包含从控制器返回的搜索建议。

创建搜索文本框

在HTML标记中，添加一个文本框元素来获取搜索关键字。例如：

<input type="text" name="search" id="search" />

实现AJAX调用

最后，我们需要编写JavaScript代码来处理搜索文本框中输入的搜索关键字，并调用控制器方法来获取搜索建议。

我们可以使用jQuery库来轻松实现AJAX调用。在HTML标记的底部，添加以下代码：

@section scripts {
    <script>
        $(function() {
            $("#search").keyup(function () {
                var searchString = $(this).val();
                if (searchString.length >= 3) {
                    $.ajax({
                        url: '@Url.Action("GetSearchSuggestions", "Search")',
                        type: 'GET',
                        data: { searchTerm: searchString },
                        dataType: 'json',
                        success: function (response) {
                            var suggestions = response;
                            // Display suggestions to the user
                            console.log(suggestions);
                        },
                        error: function (error) {
                            console.log(error);
                        }
                    });
                }
            });
        });
    </script>
}

此代码将使用jQuery选择器来获取搜索文本框，监视文本框中键入的内容，并调用控制器方法来获取搜索建议。

在调用控制器方法时，我们使用调用“Url.Action”方法来生成URL，该URL将在浏览器中生成我们上面创建的控制器和方法。我们也传递搜索关键词作为查询字符串参数。

当我们成功的从控制器方法返回搜索建议时，我们使用“console.log”方法来在浏览器控制台中输出搜索建议。可以根据需求修改该代码来对搜索建议执行其他操作。

示例1：使用基于实例代码实现

假设流程的代码实现内容如下：

// Controller
public JsonResult Search(string q)
{
    var cities = new List<string> {"New York","London", "Los Angeles", "Chicago","Houston","Philadelphia",
    "Phoenix","San Antonio","San Diego","Dallas","San Jose","Austin","Jacksonville","Fort Worth","Columbus",
    "San Francisco"};
    var results = cities.Where(s => s.ToLower().Contains(q.ToLower()));
    return new JsonResult { Data = results, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}

// View
@model List<string>
@{
    Layout = null;
}

var items = @Html.Raw(Json.Encode(Model));

$(function () {
    $("#search-text-box").autocomplete({
        source: function (request, response) {
            var filtered = $.map(items, function (item) {
                if (item.toLowerCase().startsWith(request.term.toLowerCase()))
                    return item;
            });
            response(filtered.slice(0, 10));
        },
        minLength: 2
    });
});

该示例中，可以看到一个Action方法Search被创建，其作用是仅简单匹配名字（城市名称），并将结果返回为JSON。这将用于自动完成，因为它接受一个字符串作为参数并返回JSON格式的结果。

接下来我们看看它所生成的视图代码，展示了使用 jQuery UI AutoComplete 组件的 JavaScript 代码。在读取完包含城市列表的 ViewModel 后，它将自动完成初始化为文本框。

示例2：使用jQueryUI库中的Autocomplete方法实现

步骤如下：

创建一个Action方法Search，按照用户输入查询相关数据。

public JsonResult Search(string term)
{
    //database search logic

    List<string> result = new List<string>
    {
        "Result 1",
        "Result 2",
        "Result 3",
        "Result 4",
        "Result 5"
    };
    return Json(result, JsonRequestBehavior.AllowGet);
}

在View视图中添加CSS和JS文件，用于Autocomplete插件

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

在View视图中添加文本框 input 元素，用于测试调用search方法

<input type="text" id="searchTextBox" />

通过 Ajax 调用 Action 方法，获取 Autocomplete 建议

$(document).ready(function () {
    $("#searchTextBox").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/Home/Search",
                data: { term: request.term },
                type: "GET",
                dataType: "json",
                success: function (data) {
                    response(data);
                },
                error: function (xhr, status, error) {
                    alert("Error Occured!");
                }
            });
        },
        minLength: 1
    });
});

最终结果是，当用户在搜索框中输入首字母时，将根据其所输入的搜索文本框，检索数据库中所有类似的搜索项，直到找到正确的建议为止。