Создание элемента управления Calendar (календарь), использующего AJAX

Written on . Posted in ASP.NET

ОГЛАВЛЕНИЕ

Зайдите на любой сайт, регистрирующий поездки либо события, и вы найдете там один и тот же пользовательский интерфейс для сбора информации - календарь (Calendar). Вы с легкостью можете предоставить такой интерфейс в приложениях ASP.NET благодаря встроенному веб-элементу управления Calendar. Использование элемента  управления Calendar  имеет некоторые недостатки: во-первых, он не очень пригоден при выборе дат, которые находятся в далеком будущем или прошлом, так как вы можете передвигать только к следующему либо к предыдущему месяцу; во-вторых, календарь (Calendar) не использует концепцию AJAX, так что каждый клик - будь то выбор даты или переход к следующему либо предыдущему месяцу - требует выполнения полноценного постбэка.

Mehmet Genc описал первый недостаток в статье "Расширяем возможности навигации в элементе управления Calendar", путем демонстрации способа добавления месяца и года в выпадающие списки. Но та статья была написана в 2004 году, и с тех пор веб-сайты, использующие AJAX, стали более продвинутыми. Мы решили, что пора обновить этот элемент управления Calendar таким образом, чтобы он поддерживал AJAX. В частности, я реализовал элемент управления Calendar как пользовательский (User Control). Пользовательский элемент управления (User Control) обрабатывает элемент TextBox так, что после щелчка мыши он отображает элемент управления Calendar, где пользователь может выбрать дату. Как и в календаре Мехмета, пользователи могу быстро перейти к определенному месяцу и году, используя два выпадающих списка. А самое интересное то, что уровень отзывчивости достаточно велик.

Читайте далее, чтобы больше узнать об этом!


 

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

Для того чтобы использовать данный элемент управления Calendar, убедитесь, что среда разработки поддерживает ASP.NET AJAX Framework. Если вы используете Visual Studio 2008, то данный фрэймворк уже есть в наличии. Тем не менее, если вы используете Visual Studio 2005, то вам нужно загрузить и установить ASP.NET AJAX framework с сайта Майкрософт, http://www.asp.net/ajax/. Для более детальной информации обратитесь к статье "Основы AJAX и начало работы с Microsoft's ASP.NET AJAX Framework".

Наш элемент Calendar использует элементы UpdatePanel и PopupControlExtender. В то время как UpdatePanel является частью "Essential Components" (основных компонентов) фрэймворка, PopupControlExtender является частью инструментария ASP.NET AJAX Control Toolkit, который должен быть загружен отдельно (даже для Visual Studio 2008). Если вы рассмотрите статью "Примеры Control Toolkit", то вы заметите, что элемент управления Calendar уже содержится в Toolkit. Я создаю свой собственный календарь, использующий AJAX, вместо того, чтобы использовать уже существующий в Control Toolkit, поскольку я хочу добавить выпадающие списки выбора месяца и года. Кроме того, имелось также несколько ошибок  отображения в данном элементе управления Calendar. Я советую вам опробовать мой, а также календарь из AJAX Control Toolkit, и использовать тот, который больше всего подойдет вам.


Начало работы с элементом управления Calendar, использующим AJAX

Полный код данного пользовательского элемента управления с примером веб-страницы вы можете загрузить в конце данной статьи. Вы можете открыть папу как сайт либо в Visual Studio 2005, либо Visual Studio 2008.

Элемент Calendar реализован в файле CoolCalendar.ascx как пользовательский элемент управления (User Control). Выделите время и изучите разметку в данной странице. Вы заметите в ней следующие ключевые элементы управления:

  1. DateTextFrom TextBox
  2. RequiredFieldValidator названныйDateTextFromRequired
  3. Элемент управления Panel
  4. Элемент управления UpdatePanel
  5. Выпадающие списки месяца и года
  6. Элемент управления Calendar
  7. Элемент управления AJAX PopupControlExtender

Некоторые из этих элементов необходимо обсудить более детально. Запомните разметку для элемента DateTextFrom TextBox (первый элемент):

<asp:TextBox ID="DateTextFrom" Text="" runat="server" onFocus="javascript:this.blur();" Width="80" autocomplete="off" />

Взгляните на onfocus="javascript:this.blur();". Эта часть кода клиентской стороны обеспечивает переход фокуса с элемента управления при нажатии на DateTextFromTextBox. Смысл заключается в том (мы скоро  в этом убедимся), что когда пользователь передает фокус на TextBox, он сразу переводится с него и отображается элемент управления Calendar. Это заставит пользователя выбрать дату в календаре. Если вы уберете скрипт onfocus, то пользователь сможет ввести дату в TextBox используя клавиатуру. Для меня данная опция не столь пригодна, так как существует вероятность ошибочного пользовательского ввода.

RequiredFieldValidator (второй элемент) используется для проверки того, что значение даты было определено. Пользовательский элемент управления (User Control) содержит логическое (Boolean) публичное (public) свойство DateTextRequired. При установке  данного значения в True ("Истина") активируется RequiredFieldValidator, а установка в False ("Ложь") отключает  его. По умолчанию, RequiredFieldValidator активирован.

Элемент управления AJAX PopupControlExtender выводит (как всплывающая подсказка) определенный элемент Panel на странице в ответ на определенное действие с клиентской стороны. Элемент Panel (третий) определяет область, которая "высвечивается", и включает в себя UpdatePanel (четвертый элемент), DropDownList месяца\года (пятый элемент), а также элемент Calendar (шестой элемент).

Последней частью разметки страницы является элемент PopupControlExtender (седьмой элемент), и он сконфигурирован так, чтобы отображать элемент Panel (третий элемент) тогда, когда DateTextFrom TextBox получает фокус. Данное поведение осуществляется исключительно при помощи свойств элемента PopupControlExtender, а значит, нет никакой необходимости в написании кода или скрипта JavaScript! 

<ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server"
              TargetControlID="DateTextFrom"
              PopupControlID="Panel1"
              Position="Bottom" />

Для получения более подробной информации об PopupControlExtender обратитесь к статье "Демонстрация PopupControlExtender". Также советую прочитать статью Брайна Смита  - "Отображаем подробную информацию в GridView при помощи Ajax Pop-Up".


Исследуем код элемента управления Calendar

Класс code-behind пользовательского элемента управления (User Control) определяет несколько свойств и включает в себя код заполнения DropDownList месяца\года, а также взаимодействия пользователя с календарем. Самым важным свойством является DateTextFromValue, которое устанавливает и получает выбранную дату. Данное свойство просто читает и записывает значение в DateTextFrom TextBox. 

public string DateTextFromValue
         {
             get { return DateTextFrom.Text; }
             set { DateTextFrom.Text = value; }
         }

Примечание: Приведенный в конце статьи код включает в себя версию пользовательского элемента управления (User Control) написанную как на VB, так и на C# ...

Два дополнительных свойства определены для указания того, что RequiredFieldValidator должен быть активирован (DateTextRequired), а также  для вывода сообщения об ошибке, если требуемое значение даты не предоставлено (DateTextRequiredText).

DropDownLists месяца\года заполняются методами Populate_MonthList и Populate_YearList, которые вызываются при первом посещении страницы. Populate_MonthList возвращает список названий месяцев (January, February, ...) в то время как Populate_YearList заполняет DropDownList годами, начиная с 20 года до момента заполнения и заканчивая следующим годом.

В  том случае если  изменены DropDownList месяца\года, вызывается частичный постбэк и выполняется метод Set_Calendar. Метод Set_Calendar устанавливает свойство TodaysDate элемента Calendar в первый выбранный месяц\год. 

public void Set_Calendar(object Sender, EventArgs E)
         {
             string theDate = drpCalMonth.SelectedItem.Value + " 1, " + drpCalYear.SelectedItem.Value;
         
             DateTime dtFoo;
             dtFoo = System.Convert.ToDateTime(theDate);
         
             Calendar1.TodaysDate = dtFoo;
         }

Когда пользователь выбирает дату в календаре, вызывается частичный постбэк и событие SelectionChanged элемента Calendar. Обработчик события Calendar1_SelectionChanged вызывает метод Commit элемента PopupControlExtender, передавая свойство SelectedDate элемента Calendar. Результатом является то, что элемент Calendar исчезает и выбранная дата отображается в TextBox. 

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
         {
             PopupControlExtender1.Commit(Calendar1.SelectedDate.ToShortDateString());
         }


Мой элемент управления Calendar в действии

Приложение в конце данной статьи включает в себя простую страницу, TestCoolCalendar.aspx. Данный пример демонстрирует использование свойств DateTextRequired и DateTextRequiredText элемента User Control для получения даты и для отображения настроенного сообщения об ошибке. В дополнение к пользовательскому элементу управления TestCoolCalendar.aspx включает в себя кнопку Save ("Сохранить"), при нажатии которой выводится значение, выбранное в элементе управления Calendar. Данное значение возвращено при помощи свойства DateTextFromValue пользовательского элемента управления.


Вывод

В данной статье мы рассмотрели способ использования UpdatePanel и PopupControlExtender из AJAX Control Toolkit для преобразования встроенного элемента управления Calendar в более богатую версию, использующую AJAX. Данный элемент реализован как пользовательский элемент управления (User Control), делая его реальным кандидатом на то, чтобы быть включенным в ваши проекты.

Веселого программирования!

Scott D. Smith

Исходный код примеров

форум c# asp net