asp.net AutoCompleteExtender的一个简单例子代码

让我们来详细讲解“asp.net AutoCompleteExtender的一个简单例子代码”的完整攻略。

概述

AutoCompleteExtender是ASP.NET AJAX库的一个控件，可以帮助实现输入框的“自动补全”功能，可方便地进行基于 AJAX 技术的实时搜索，并返回搜索结果。它可以很方便地增强用户的输入体验，提高某些场景下的用户体验。

下面我将分享一个简单的AutoCompleteExtender的例子，以帮助大家更好地理解它的使用方式。

步骤

本例子的实现，包含以下内容：

一个包含数据源、提供AutoCompleteExtender支持的服务页面。
用来显示自动补全数据的页面。

第一步：创建数据库

首先需要创建一个表，用来存储我们所需的数据。在本例中，我们假设有一个包含国家名称和ISO 3166-1-alpha-2标准代码的国家列表，它们存储在一个名为Countries的表中。

CREATE TABLE [dbo].[Countries] (
    [CountryName] NVARCHAR(100) NOT NULL,
    [CountryCode] NVARCHAR(2) NOT NULL
)

插入一些示例数据以便测试：

INSERT INTO [dbo].[Countries] ([CountryName], [CountryCode]) VALUES (N'中国', 'CN')
INSERT INTO [dbo].[Countries] ([CountryName], [CountryCode]) VALUES (N'美国', 'US')
INSERT INTO [dbo].[Countries] ([CountryName], [CountryCode]) VALUES (N'加拿大', 'CA')
INSERT INTO [dbo].[Countries] ([CountryName], [CountryCode]) VALUES (N'日本', 'JP')
INSERT INTO [dbo].[Countries] ([CountryName], [CountryCode]) VALUES (N'英国', 'GB')

第二步：创建Web服务

我们需要将此服务挂接在ASP.NET的页面上，以使用AutoCompleteExtender控件进行访问。

我们将使用C#编写此服务，因此需要创建一个Web服务项目。创建完成后，我们在根目录下创建一个名为Countries.asmx.cs的文件，并编写以下代码：

using System.Collections.Generic;
using System.Data.SqlClient;
using System.Web.Script.Services;
using System.Web.Services;

namespace AutoCompleteExtenderSample
{
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    [System.Web.Script.Services.ScriptService]
    public class Countries : System.Web.Services.WebService
    {
        private const string CONNECTION_STRING = "Data Source=(local);Initial Catalog=MYDATABASE;Integrated Security=True";

        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public List<string> GetCountryNames(string prefix)
        {
            var countries = new List<string>();

            var query = "SELECT CountryName FROM Countries WHERE CountryName LIKE @prefix + '%'";
            using (var conn = new SqlConnection(CONNECTION_STRING))
            using (var cmd = new SqlCommand(query, conn))
            {
                cmd.Parameters.AddWithValue("@prefix", prefix);

                conn.Open();
                var reader = cmd.ExecuteReader();
                while (reader.Read())
                {
                    countries.Add(reader.GetString(0));
                }
            }

            return countries;
        }
    }
}

上述代码为C#语言编写的Web服务，GetCountryNames函数将根据查询的前缀字符串返回匹配的国家名称列表。代码中 @prefix 是匹配的前缀，在查询中使用 % 来虚拟类似于 SQL LIKE 的匹配功能。

第三步：创建用来展示自动补全数据的页面

此页面将被使用者输入的值自动填充。我们在此页面中放置一个文本框，并使用AutoCompleteExtender控件将该文本框与我们的服务Countries.asmx绑定。

我们的网页代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AutoCompleteExtenderSample.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="tbCountry" runat="server"></asp:TextBox>
            <ajaxToolkit:AutoCompleteExtender ID="aceCountry" runat="server"
                ServicePath="~/Countries.asmx"
                ServiceMethod="GetCountryNames"
                TargetControlID="tbCountry"
                MinimumPrefixLength="1" />
        </div>
    </form>
</body>
</html>

在上面的代码中，我们添加了JQuery和JQuery UI的引用，以及在页面上添加了一个文本框和一个AutoCompleteExtender控件。

AutoCompleteExtender将文本框 “绑定”到了刚才创建的服务Countries.asmx，并传递了最小前缀长度的值，MinimumPrefixLength指示当输入字符串的长度大于等于MinimumPrefixLength时，才会调用服务进行查询。

第四步：运行

运行我们的应用程序，输入国家名称的前几个字符，即可看到自动补全下拉框中匹配的国家名称。此下拉框的内容是基于我们在GetCountryNames函数中使用查询语句返回的结果动态生成的。

注意, 以上Url中的 "~/Countries.asmx" 在项目的根目录, 否则请将URL修改为相对于应用程序根路径的路径。

示例说明

示例1: 最小前缀长度(MinimumPrefixLength)

AutoCompleteExtender控件的MinimumPrefixLength属性是指当用户开始输入时，需要等待用户至少输入的字符数目才能调用“自动补全”服务进行数据查询。

例如：为了在本例中的服务上获取国家名称，在输入至少2个字符后，AutoCompleteExtender控件将调用GetCountryNames方法进行匹配操作。

<ajaxToolkit:AutoCompleteExtender ID="aceCountry" runat="server"
    ServicePath="~/Countries.asmx"
    ServiceMethod="GetCountryNames"
    TargetControlID="tbCountry"
    MinimumPrefixLength="2" />

示例2: 分页(Pagination)

如果你需要为自动补全设置“分页”，可以在GetCountryNames中使查询语句进行相应的更改。

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List<string> GetCountryNamesWithPagination(string prefix, int pageNumber)
{
    var countries = new List<string>();
    var pageSize = 10;
    var query = "SELECT CountryName FROM Countries WHERE CountryName LIKE @prefix + '%' ORDER BY CountryName OFFSET @offset ROWS FETCH NEXT @pageSize ROWS ONLY";
    using (var conn = new SqlConnection(CONNECTION_STRING))
    using (var cmd = new SqlCommand(query, conn))
    {
        cmd.Parameters.AddWithValue("@prefix", prefix);
        cmd.Parameters.AddWithValue("@pageSize", pageSize);
        cmd.Parameters.AddWithValue("@offset", (pageNumber - 1) * pageSize);

        conn.Open();
        var reader = cmd.ExecuteReader();
        while (reader.Read())
        {
            countries.Add(reader.GetString(0));
        }
    }

    return countries;
}

这个示例中，使用pageNumber来指示当前页码，pageSize指示每页显示的最大数量。由于是根据前缀匹配查找，因此我们需要使用 Order By 子句来进行排序，并使用 Offset 来指示查询时从哪一条记录开始返回结果。最后使用Fetch Next指示查询的结果数。

综上，我们详细介绍了如何使用AutoCompleteExtender控件，完成了包含数据源、自动补全的Web服务和展示自动补全数据的页面，并给出了两个进一步的示例说明。希望可以对大家有所帮助！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：asp.net AutoCompleteExtender的一个简单例子代码 - Python技术站