Работа с jQuery UI и визуальными элементами

jQuery UI и Autocomplete

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

Последнее обновление: 31.10.2015

Кроме стандартных элементов html мы можем использовать более богатые по функциональности и графической визуализации элементы, которые, как правило, реализуются в виде дополнительных плагинов на javascript и css. Наиболее популярным плагином является библиотека jQuery UI. Эта библиотека содержит набор виджетов, как accordion, autocomplete, button, datepicker, dialog, progressbar, slider и ряд других.

Для работы с jQuery UI необходимо прежде всего подключить библиотеку. Если в проектах для предыдущих версий MVC файлы jquery ui подключались по умолчанию, то в MVC 5 нам надо самим добавлять все необходимые файлы в проект. Для этого воспользуемся пакетным менеджером NuGet:

jQuery UI в ASP.NET MVC 5

Необходимый пакет называется jQuery UI (Combined Library). Также нужно учитывать, что данная библиотека зависит от главной библиотеки jQuery, которая также должна быть установлена.

После установки в проект в каталог Content/themes/base будет добавлен ряд файлов css jquery ui, а в папку Scripts - ее скрипт в полной и минимизированной версии.

Установка jquety ui в ASP.NET MVC 5

Теперь чтобы использовать библиотеку, нам надо в представлении подключить ее основной файл стилей all.css, иначе плагин просто не будет работать, а также скрипт 

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

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

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

public class Computer
{
    public int Id { get; set; }
    public string Model { get; set; }
    public int Year { get; set; }
}

Затем изменим стандартный контроллер HomeController следующим образом:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using AutocompleteApp.Models;

namespace AutocompleteApp.Controllers
{
    public class HomeController : Controller
    {
        static List<Computer> comps = new List<Computer>();

        static HomeController()
        {
            comps.Add(new Computer { Id = 1, Model = "IBM PC", Year = 1981 });
            comps.Add(new Computer { Id = 2, Model = "Apple II", Year=1977 });
            comps.Add(new Computer { Id = 3, Model = "Apple III", Year = 1980 });
            comps.Add(new Computer { Id = 4, Model = "Macintosh", Year=1984 });
        }

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult AutocompleteSearch(string term)
        {
            var models = comps.Where(a => a.Model.Contains(term))
							.Select(a => new { value = a.Model})
							.Distinct();

            return Json(models, JsonRequestBehavior.AllowGet);
        }
    }
}

Для краткости примера в качестве хранилища данных я использовал статический список. Основная работа производится методом AutocompleteSearch, который мы рассмотрим чуть позже.

Теперь изменим представление Index.cshtml, определив в нем элемент ввода, для которого и будет производиться автозаполнение:

@{
    Layout = null;
}
<html>
<head>
    <link href='@Url.Content("~/Content/themes/base/all.css")' rel="stylesheet" type="text/css" />
</head>
<body>
    <input type="text" name="name" data-autocomplete-source='@Url.Action("AutocompleteSearch", "Home")' />
    <input type="submit" value="Поиск" />

    <script src='@Url.Content("~/Scripts/jquery-1.10.2.min.js")' type="text/javascript"></script>
    <script src='@Url.Content("~/Scripts/jquery-ui-1.11.3.min.js")' type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
        $("[data-autocomplete-source]").each(function () {
            var target = $(this);
            target.autocomplete({ source: target.attr("data-autocomplete-source") });
        });
    });
    </script>
</body>
</html>

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

public ActionResult AutocompleteSearch(string term)
{
    var models = comps.Where(a => a.Model.Contains(term))
					.Select(a => new { value = a.Model})
					.Distinct();

    return Json(models, JsonRequestBehavior.AllowGet);
}

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

В конце представления определен скрипт, который вызывает функцию 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, которые на клиенте преобразуются в форму для отображения:

Автодополнение в ASP.NET MVC 5

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850