Работа с jQuery UI

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

Одним из наиболее популярных плагинов jQuery является jQuery UI, поэтому его и включили в стандартный набор скриптов. Этот плагин предназначен для работы с пользовательским интерфейсом и содержит, во-первых, ряд интересных визуальных эффектов, типа bounce, explode, fade, pulsate и shake. Во-вторых, он содержит набор виджетов, как accordion, autocomplete, button, datepicker, dialog, progressbar, slider и tabs.

Чтобы начать работать с jQuery UI, надо прежде всего подключить эту библиотеку:

<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>

Обратите внимание, что в данном случае нам также нужно подключить и файл стилей jquery-ui.css, иначе плагин просто не будет работать. Дело в том, что для отображения и визуализации плагин использует темы. В данном случае в проектах по типу Basic и Internet Application по умолчанию включена одна тема - base. Все используемые ее файлы располагаются в папке Content/themes/base. Здесь есть изображения, нужные для визуализации. А также файлы стилей. Файл jquery-ui.css является основным, поэтому мы его подключаем к приложению.

Виджет Autocomplete

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

Для начала определим в представлении элемент ввода, для которого и будет производиться автозаполнение:

<input type="text" name="name" data-autocomplete-source="@Url.Action("AutocompleteSearch", "Home")" />
<input type="submit" value="Поиск" />

Итак, чтобы подключить автозаполнение, мы добавляем к элементу ввода атрибут HTML5 data-autocomplete-source. Этот атрибут указывает на источник данных. В данном случае источником данных будет действие AutocompleteSearch в контроллере Home:

public ActionResult AutocompleteSearch(string term)
{
    var authors = db.Books.Where(a => a.Author.Contains(term)).ToList().Select(a => new { value = a.Author }).Distinct();

    return Json(authors, JsonRequestBehavior.AllowGet);
}

Мы просто извлекаем все книги из базы, по ним формируем новый анонимный объект - автора, и получившийся массив новых объектов посылаем обратно клиенту в формате JSON. Причем каждый из создаваемых анонимных объектов должен иметь свойство label или свойство value (как в нашем случае), либо оба этих свойства. Свойство label используется при отображении текста пользователю. При выборе пользователем определенного элемента в списке объектов виджет помещает value выделенного элемента в элемент ввода на странице. Если либо свойство label, либо value не указано, виджет будет использовать значение одного указанного свойства как для value, так и для label.

И в конце надо добавить скрипт, поместив его где-нибудь представлении или во внешний js-файл, который вызывает функцию autocomplete для элемента заполнения:

$(function () {
        $("[data-autocomplete-source]").each(function () {
            var target = $(this);
            target.autocomplete({ source: target.attr("data-autocomplete-source") });
        });
    });

Функция each вызывает для каждого найденного по селектору элемента функцию, указанную в параметре. В этой функции вызывается метод плагина autocomplete для каждого элемента. Параметр, передаваемый в метод autocomplete, представляет собой объект, в котором определено одно свойство - свойство source. Но можно установить и большее количество свойств, например, задержку после нажатия клавиши или минимальное количество символов, необходимое для срабатывания автозаполнения и отправки запрос к источнику данных.

В итоге при обращении к источнику данных (в данном случае - к действию AutocompleteSearch контроллера Home) плагин передает текущее значение элемента ввода в качестве параметра term в строке запроса, а обратно клиенту отсылается массив объектов в формате JSON, которые на клиенте преобразуются в форму для отображения: