ASP.NET AJAX Control Toolkit

ASP.NET --- Веб-сайты ASP.NET --- ASP.NET AJAX Control Toolkit

К этому моменту может показаться, что допустимо создать специальный элемент управления ASP.NET, который визуализирует клиентский код JavaScript, использующий клиентские библиотеки ASP.NET AJAX. Фактически, именно это в основном и делают рассмотренные до сих пор элементы управления ASP.NET AJAX (UpdatePanel, UpdateProgress и Timer). Реализация данного подхода достаточно проста. Понадобится просто добавить код, который регистрирует специальный код JavaScript в ScriptManager внутри страницы, и визуализировать необходимую базовую HTML-разметку и JavaScript-код, который создает элемент управления.

Хотя такой подход работает, он утомителен и излишне ограничен. Проблема в том, что ASP.NET AJAX не просто позволяет разрабатывать новые типы элементов управления, но также создавать эффекты, которые применимы к многочисленным элементам управления. Фактически эти универсальные эффекты - такие как автоматическое завершение, перетаскивание, анимация, изменение размеров, сворачивание, редактирование с применением масок, и т.д. - представляют наиболее распространенный способ работы с ASP.NET AJAX.

По этой причине ASP.NET AJAX поощряет применение другой модели - модели, которая для добавления функциональности ASP.NET AJAX к существующим элементам управления использует расширители элементов управления. С помощью расширителей элементов управления эффекты Ajax можно добавлять к существующей странице, не изменяя используемый ею набор элементов управления.

Собственно платформа ASP.NET не содержит какие-либо расширители элементов управления. Их включает в себя инструментарий ASP.NET AJAX Control Toolkit - замечательная коллекция элементов управления и расширителей элементов управления, которые используют функции ASP.NET AJAX, но могут быть помещены на веб-страницу, подобно любому обычному серверному элементу управления.

Наиболее примечательная особенность инструментария ASP.NET AJAX в том, что он разрабатывается с применением совместной модели с открытым исходным кодом, которая позволяет принимать участие в разработке всему сообществу. Инструментарий ASP.NET Control Toolkit AJAX является бесплатным и включает полный исходный код, что делает его прекрасным выбором для разработчиков, стремящихся украсить свои веб-страницы эффектами Ajax, и разработчиков, которые хотят научиться создавать собственные расширители элементов управления.

В последующих разделах мы испытаем в действии AutoCompleteExtender из ASP.NET Control Toolkit и бегло рассмотрим другие возможности, предлагаемые этим средством.

Установка инструментария ASP.NET AJAX Control Toolkit

Чтобы получить инструментарий ASP.NET AJAX Control Toolkit, перейдите к странице Ajax Control Toolkit. Следуя ссылкам, можно перейти к странице загрузки CodePlex, которая предлагает несколько вариантов загрузки в зависимости от версии .NET и от того, нужен ли исходный код. На момент написания этих строк самой простой опцией загрузки был ZIP-файл размером в 11 Мбайт по имени AjaxControlToolkit.Binary.NET4.zip, который разработан для ASP.NET 4 и не включает исходный код. После загрузки этого ZIP-файла содержащиеся в нем файлы можно извлечь в постоянное место хранения на жестком диске.

ZIP-файл содержит центральную сборку AjaxControlToolkit.dll и ряд более мелких сопровождающих сборок, которые поддерживают локализацию для различных культур. Вы увидите также архивированную папку AjaxControlToolkitSampleSite, которая содержит огромный образец веб-сайта, демонстрирующий все компоненты инструментария ASP.NET AJAX Control Toolkit, и файл ReadMe.html с инструкциями по установке.

Чтобы приступить к разработке с применением ASP.NET AJAX Control Toolkit, можно было бы просто скопировать сборку AjaxControlToolkit.dll (и специфичные для данной культуры подпапки) в каталог Bin своего веб-приложения. Однако задача значительно упрощается, если позволить Visual Studio добавить компоненты в панель инструментов Toolbox. Для этого выполните перечисленные ниже действия:

1. Удостоверьтесь, что папка SampleWebSite находится в подходящем месте на жестком диске. В случае перемещения папки SampleWebSite после завершения этого процесса Visual Studio будет не в состоянии обнаружить сборку AjaxControlToolkit.dll. В результате не получится добавить необходимую ссылку на сборку при перетаскивании элементов управления на веб-страницу. (Единственный способ решения этой проблемы - удаление элементов управления из Toolbox и затем их повторное добавление из нового расположения.)

2. Создайте в Visual Studio новую вкладку панели инструментов для размещения элементов управления. Щелкните в панели инструментов правой кнопкой мыши и выберите пункт Add Tab (Добавить вкладку) в контекстном меню. Введите имя вкладки (например, AJAX Toolkit) и нажмите <Enter>.

3. Теперь в новую вкладку нужно добавить элементы управления. Щелкните правой кнопкой мыши на созданной пустой вкладке и выберите пункт Choose Items (Выбрать элементы) в контекстном меню.

4. В диалоговом окне Choose Toolbox Items (Выбор элементов панели инструментов) щелкните на кнопке Browse (Обзор). Найдите сборку AjaxControlToolkit.dll и щелкните на кнопке OK.

5. Теперь все компоненты из сборки AjaxControlToolkit.dll отобразятся в списке, будут выделены, а флажки рядом с каждым из них будут установлены. Чтобы добавить на вкладку AJAX Toolkit все элементы управления одним действием, щелкните на кнопке OK.

На рисунке ниже показана часть элементов управления, которые появятся на новой вкладке панели инструментов Toolbox:

Теперь компоненты из ASP.NET AJAX Control Toolkit можно использовать в любой веб-странице любого веб-сайта. Начните с добавления к веб-странице элемента управления ScriptManager. Затем перейдите к созданной ранее вкладке AJAX Toolkit и перетащите нужный элемент управления ASP.NET AJAX на свою страницу. При первом добавлении компонента из ASP.NET Control Toolkit AJAX среда Visual Studio скопирует сборку AjaxControlToolkit.dll в папку Bin веб-приложения, наряду со сборками локализации.

Инструментарий ASP.NET Control Toolkit AJAX содержит множество полезных компонентов. В последующих разделах более подробно рассматривается компонент AutoCompleteExtender.

Компонент AutoCompleteExtender

Команда ASP.NET делала все возможное, чтобы избежать дублирования существующих элементов управления разновидностями ASP.NET AJAX. Например, может показаться заманчивым создание серверного элемента управления AutoCompleteTextBox. Однако это сопряжено с рядом проблем:

• Чтобы использовать эту функциональную возможность, существующие элементы управления TextBox понадобится заменить элементами управления AutoCompleteTextBox. Это изменение является слишком глобальным (и потенциально разрушительным), чтобы его выполнять в успешно работающей странице.

• Если функциональные возможности элемента управления TextBox уже были расширены или применяется сторонний компонент, который расширяет возможности элемента управления TextBox, этими возможностями придется пожертвовать.

• Если другая функциональная возможность ASP.NET AJAX реализована в другом классе, производном от TextBox (например, NumericOnlyTextBox, который отклоняет нажатия клавиш, не являющихся цифровыми), одновременно использовать оба средства не получится.

• Если необходимо применять средство автозавершения с другим элементом управления, придется дождаться, пока кто-то создаст элемент управления, который инкапсулирует эту функциональность. Для поддержки всех текстовых элементов управления требуется значительный объем работы по дублированию.

• Разработчики должны изучить две аналогичные, но различающиеся модели элемента управления и в зависимости от сценария переходить от одной к другой.

Более рациональным решением было бы добавление динамических средств к веб-сайту без замены уже используемых элементов управления. Делает это возможным еще одна новая концепция ASP.NET AJAX, которая называется расширителями элементов управления. Расширители элементов управления - это фрагменты функциональности в стиле Ajax, которые подключаются к обыкновенным серверным элементам управления, Чтобы использовать определенное средство, понадобится просто добавить требуемый расширитель элемента управления и присоединить его к соответствующему элементу управления.

Одним из примеров может служить AutoCompleteExtender, который позволяет отображать список предположений, когда пользователь осуществляет ввод в другом элементе управления (таком как текстовое поле).

Хотя имя AutoCompleteExtender, как и имена многих расширителей элементов управления, завершается словом Extender, это характерно не для всех расширителей. В следующем разделе приведен краткий обзор с перечнем всех расширителей и всех обычных элементов управления в ASP.NET AJAX Control Toolkit.

Влияние AutoCompleteExtender на работу обычного серверного элемента управления TextBox продемонстрировано на рисунке ниже. Во время ввода текстом пользователем раскрывающийся список предлагает возможные варианты. Если пользователь щелкает на одном из этих элементов списка, соответствующий текст копируется в текстовое поле:

Создание этого примера достаточно просто. Сначала на страницу нужно добавить элемент управления ScriptManager. Затем необходимо добавить обычное текстовое поле. Затем должен быть добавлен элемент управления AutoCompleteExtender, который расширяет текстовое поле средством автозавершения. Трюк в том, что список предположений должен быть получен из веб-метода, который понадобится создать. Ниже приведен пример веб-службы AutoCompleteService, содержащей метод GetNames(), который предоставляет список предположений:

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

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class AutoCompleteService : System.Web.Services.WebService 
{
    [WebMethod]
    public string HelloWorld() {
        return "Hello World";
    }

    [System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public List<string> GetNames(string prefixText, int count)
    {
    	// ...
    }
    
    // Вспомогательный метод
    private static List<string> GetNameListFromDB()
    {
        // ...
    }
    
}

Ниже показана разметка исходной страницы:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="AutoCompleteTextBox" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <title>Основы ASP.NET</title>
    <style>
        .textbox {
            position: absolute;
            width: 400px;
            height: 32px;
            top: 10%;
            left: 50%;
            margin-left: -200px;
            font-family: Georgia, serif;
            font-size: 24px;
            font-style: italic;
            font-weight: normal;
            letter-spacing: normal;
            padding: 4px 4px 6px 4px;
            border: 1px solid #ddd;
            font-weight: bold;
            color: #59a6d6;
            border-radius: 5px;
            box-shadow: 1px 1px 3px #000;
        }

        .textbox:focus {
            box-shadow:0px 0px 8px #59a6d6;
        }

        .listitem, .listitemhighlight {
            padding:10px;
        }
        .listitem:hover {
            cursor:pointer;
            background:#15a4ee;
            color:white;
        }
        
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server" CssClass="textbox" autocomplete="off" />
            <ajaxToolkit:AutoCompleteExtender ID="autoComplete1" runat="server"
                TargetControlID="TextBox1" ServicePath="AutoCompleteService.asmx"
                ServiceMethod="GetNames" MinimumPrefixLength="2" 
                CompletionListItemCssClass="listitem">
            </ajaxToolkit:AutoCompleteExtender>
            <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" CombineScripts="false" />
        </div>
    </form>
</body>
</html>

Обратите внимание, что AutoCompleteExtender привязывается к соответствующему серверному элементу управления через свойство AutoCompleteExtender.TargetControlID. Он использует также свойство MinimumPrefixLength, которое позволяет дождаться, пока пользователь не ввел определенное количество букв, прежде чем предлагать список предположений. Эта функция полезна, если список настолько длинный, что единственный символ не позволяет вывести полезный список предположений.

Наиболее трудоемкая часть этого примера - создание веб-метода GetNames(). Он принимает два параметра, которые указывают текст, уже введенный пользователем, и требуемое количество соответствий (которое по умолчанию равно 10). Ниже показано определение этого метода для веб-службы AutoCompleteService:

public class AutoCompleteService : System.Web.Services.WebService 
{
    [System.Web.Services.WebMethod]
    public List<string> GetNames(string prefixText, int count)
    {
        List<string> names = null;

        // Загрузить список имен из кэша
        if (HttpContext.Current.Cache["NameList"] == null)
        {
            // Если список еще не сохранен в кэше, то создать его.
            // GetNameListFromDB() - вспомогательный метод с кодом ADO.NET 
            // для извлечения данных из базы Northwind
            names = GetNameListFromDB();

            // Сохранить список в кэше на 60 минут
            HttpContext.Current.Cache.Insert("NameList", names, null,
              DateTime.Now.AddMinutes(60), TimeSpan.Zero);
        }
        else
        {
            // Загрузить из кэша список имен
            names = (List<string>)HttpContext.Current.Cache["NameList"];
        }

        int index = -1;
        for (int i = 0; i < names.Count; i++)
        {
            // Остановить, если поиск переходит к следующей букве.
            // (Это повышает производительность.)
            if (names[i].StartsWith(prefixText, StringComparison.InvariantCultureIgnoreCase))
            {
                index = i;
                break;
            }
        }

        // Остановить поиск при отсутствии соответствия
        if (index == -1) return new List<string>();

        List<string> wordList = new List<string>();
        for (int i = index; i < (index + count); i++)
        {
            // Остановить, если достигнут конец списка
            if (i >= names.Count) break;

            // Остановиться, если имена перестают соответствовать вводу
            if (!names[i].StartsWith(prefixText, StringComparison.InvariantCultureIgnoreCase)) break;

            wordList.Add(names[i]);
        }

        return wordList;
    }
    
    // ...
}

Давайте разберем этот код более подробно. Сначала код получает полный список возможных предположений, который извлекается из базы данных Northwind с помощью вспомогательного метода GetNameListFromDB():

public class AutoCompleteService : System.Web.Services.WebService 
{
    // ...
    
    private static List<string> GetNameListFromDB()
    {
        string connectionString = WebConfigurationManager.ConnectionStrings["Northwind"].ConnectionString;
        SqlConnection con = new SqlConnection(connectionString);
        SqlCommand cmd = new SqlCommand("SELECT ContactName FROM Customers ORDER BY ContactName", con);

        List<string> names = new List<string>();

        try
        {
            con.Open();
            SqlDataReader reader = cmd.ExecuteReader();

            while (reader.Read())
            {
                names.Add((string)reader["ContactName"]);
            }
            reader.Close();

            return names;
        }
        finally
        {
            con.Close();
        }
    }
}

Этот список кэшируется на протяжении часа, чтобы обеспечить быстрое извлечение. После того как список получен, его нужно сократить так, чтобы он включал только 10 предположений, наиболее близко соответствующих введенным символам. В этом примере список уже упорядочен. Это означает, что нужно просто найти начальную позицию - первое соответствие, которое начинается с тех же букв, что и префиксный текст.

После этого поисковый код начинает свою работу с позиции индекса и просматривает список, пытаясь получить 10 соответствий. Если он достигает конца списка или обнаруживает значение, которое не соответствует префиксу, поиск останавливается. И, наконец, все найденные соответствия возвращаются.

Комплект инструментов ASP.NET AJAX Control Toolkit

AutoCompleteExtender - только один из множества компонентов, которые входят в состав ASP.NET Control Toolkit. Доступные в настоящее время расширители элементов управления перечислены в таблице ниже, а элементы управления - во второй таблице:

Чтобы использовать любой из этих элементов управления или расширителей элементов управления, нужно просто перетащить их на форму, установить соответствующие свойства и запустить страницу. По адресу www.asp.net/ajax/ajaxcontroltoolkit все компоненты ASP.NET AJAX Control Toolkit можно опробовать в онлайновом режиме.