ASP.NET MVC 3 для початківців: додаємо введення дати з допомогою jQueryUI і NuGet, HTML, XML, DHTML, Інтернет-технології, статті

В ході навчання новим технологіям перед новачками часто виникають типові завдання, які не так просто вирішити. У циклі статей MVC3 для початківців будуть представлені рішення таких задач.


Частий питання, яке постає перед веб-розробниками – це додавання на сторінку зручного введення дати з допомогою спадаючого елемента у вигляді календаря. У цій статті дається короткий опис того, як в MVC 3 додати такий елемент за кілька миттєвостей з допомогою пакетного менеджера NuGet і бібліотеки jQuery UI.


Нижче представлено повне рішення з вихідними кодами.


Установка компонентів через Nuget


Насамперед нам потрібно додати в проект пакет з елементом управління jQuery UI DatePicker, який дозволяє організувати на веб-сторінці зручне введення дати в полі введення.


Відкрийте панель NuGet і введіть команду:


install-package jQuery.UI.Widgets.Datepicker


Через кілька секунд пакет буде завантажений і встановлено разом з усіма залежностями (рисунок 1).



Рис.1. Виконання команди NuGet для додавання пакетів в проект


Розмітка


Для демонстрації роботи елемента керування створимо таку розмітку сторінки Index.cshtml контролера Home:

<p>
Введіть дату: @ Html.TextBox ("exampleDateTime")
</p>
<p>
Введіть першу дату: @ Html.TextBox ("exampleDateTime2", null, new {@ class = "datePicker"})
Введіть другу дату: @ Html.TextBox ("exampleDateTime3", null, new {@ class = "datePicker"})
</p>

У розмітці присутній одиничне поле для введення дати і два поля для вводу даних, які мають однаковий клас CSS.


Скрипти та стилі


Для того, щоб на сторінці заробив компонент нам необхідно підключити скрипти відповідають за його поведінку і працездатність. Крім того, нам потрібно хоча б найпростіше оформлення для елемента керування.


Для цього додамо в початок сторінки вказівку про необхідність підключення файлів скриптів і стилів:

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

Три CSS-стилю підключають тему оформлення і обробку елемента керування. При бажанні їх можна об'єднати в один файл.


Перший скрипт підключає бібліотеку jQuery UI, а другий її компонент Datepicker.


Тепер все готово для включення елемента керування на сторінку. Активуємо його і прив'яжемо до оголошених елементів керування за допомогою наступного JavaScript-коду, який необхідно помістити в кінці сторінки:

<script type=”text/javascript”>
$(document).ready(function () {
$ (# ExampleDateTime). Datepicker ({firstDay: 1, dateFormat: dd.mm.yy});
$ (. DatePicker). Datepicker ({firstDay: 1, dateFormat: dd.mm.yy});
});
</script>

Тут відбувається ініціалізація одиничного елемента вводу тексту через звернення за ідентифікатором. І, як приклад, ініціалізація декількох елементів відразу за єдиним класу CSS.


Параметр firstDay задає перший день тижня (1 – понеділок, 0 – неділя, за замовчуванням). Для вказівки формату дати використовується спеціальний параметр dateFormat.


У підсумку, після запуску сторінки, ви отримаєте можливість вводити дані за допомогою зручного елемента керування, який пропонує jQuery UI (малюнок 2).



Рис. 2. Робота елемента керування jQuery UI


Локалізація


Ви можете відредагувати скрипт jquery.ui.datepicker.js для того, щоб елемент відображав написи російською мовою. Ще можна скористатися плагіном глобалізації від Microsoft, який призначений для швидкої локалізації та глобалізації подань на веб-сторінці. Про те як він працює і інтегрується з jQuery можна почитати тут.


PS: після написання статті мені справедливо помітили (спасибі, Сергію Попову), що питання локалізації вирішується простіше і правильніше іншими засобами. По-перше, ви можете скористатися стандартним механізмом jQuery UI Datepicker і встановити локалізації самостійно:


$. Datepicker.setDefaults ({dayNamesMin: [Нд, Пн, Вт, Ср, Чт, Пт, Сб]});


По-друге і це найкращий шлях ви можете скористатися готовим скриптом локалізації від розробників, отримавши його за адресою http://jqueryui.com/download. У пакеті серед іншого буде файл jquery.ui.datepicker-ru.js. Якщо його додати на сторінку ви отримаєте локалізований варіант елемента управління (рисунок 3).



Рис. 3. Локалізація в дії


Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*