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

Written on . Posted in ASP.NET

ОГЛАВЛЕНИЕ

Страница 3 из 6

Начало работы с элементом управления 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".

форум c# asp net