Опубликован: 13.07.2010 | Доступ: свободный | Студентов: 889 / 20 | Оценка: 4.40 / 4.20 | Длительность: 77:34:00
Самостоятельная работа 4:

Управление Web-элементами в ASP.NET

Упражнение 9. Web-элемент управления Calendar

Создадим новую страницу, на которой познакомимся с элементом управления Calendar вкладки Standard панели Toolbox.

  • Добавьте в проект новую страницу с именем Page9.aspx, поместите на нее таблицу, кнопку, тег заголовка и элемент управления Calendar с именем Cal. Сделайте страницу стартовой

Source-код страницы должен быть примерно таким

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="Page9.aspx.cs" Inherits="Page9" %>
    
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <h1 align="center">
            Испытание элемента Calendar</h1>
        <p align="center">
            Выберите режим и щелкните по кнопке</p>
        <table align="center" border="1" width="100%">
            <tr>
                <td align="center">
                    <asp:Calendar ID="Cal" runat="server" Width="172px" />
                    <asp:Button ID="Button1" runat="server" 
                                Text="Восстановить текущую дату" />
                </td>
                <td align="center">
                    <h1 id="result" runat="server" style="color: Red">
                        Результат
                    </h1>
                </td>
            </tr>
        </table>
    </form>
    <hr>
    <center>
        <a href="Page8.aspx">Назад</a> 
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="Page1.aspx">В начало</a>
    </center>
</body>
</html>
Листинг 4.20. Source-код страницы Page9.aspx

Внешне страница должна выглядеть так


Элемент Calendar имеет ряд свойств и событий, представленных в таблице

Свойства и события элемента управления Calendar
Имя Описание
Свойства
CellPadding Получает или устанавливает расстояние между границами и содержимым ячейки таблицы
CellSpacing Получает или устанавливает расстояние между ячейками
DayHeaderStyle Получает текущий стиль строки "день недели"
DayNameFormat Получает или устанавливает формат отображения дней недели
DayStyle Получает текущий стиль ячеек для одного дня
FirstDayOfWeek Получает или устанавливает день недели, который должен отображаться в первой колонке
NextMonthText Получает или устанавливает текст ссылки для перехода на следующий месяц
NextMonthFormat Получает или устанавливает формат названия месяца для кнопок "Следующий месяц" и "Предыдущий месяц"
NextPrevStyle Получает текущий стиль отображения селекторов "Следующий" и "Предыдущий"
OtherMonthDayStyle Получает текущий стиль для ячеек дня, относящихся к предыдущему месяцу
PrevMonthText Получает или устанавливает текст ссылки для перехода на предыдущий месяц
SelectedDate Получает или устанавливает текущую выбранную дату
SelectedDates Получает набор выбранных дат
SelectedDateStyle Получает текущий стиль отображения выбранной даты
SelectionMode Получает или устанавливает вид выбранного диапазона: Day (день), Week (неделя), Month (месяц)
SelectMonthText Получает или устанавливает текст для выбора месяца в колонке селектора
SelectorStyle Получает текущий стиль селекторов недели и месяца
SelectWeekText Получает или устанавливает текст для выбора недели в колонке селектора
ShowDayHeader Получает или устанавливает значение признака, показывающего, надо ли выводить заголовок с названиями дней недели
ShowGridLines Получает или устанавливает значение признака, показывающего, надо ли показывать линии, разделяющие ячейки
ShowNextPrevMonth Получает или устанавливает значение признака, показывающего, надо ли выводить ссылки на следующий и предыдущий месяц
ShowTitle Получает или устанавливает значение признака, показывающего, надо ли выводить заголовок календаря
TitleFormat Получает или устанавливает способ форматирования имени месяца в заголовке календаря
TitleStyle Получает текущий стиль заголовка календаря
TodayDayStyle Получает текущий стиль отображения текущей даты
TodaysDate Получает значение текущей даты
VisibleDate Получает или устанавливает значение даты, определяющей, какой месяц выводить в календаре
WeekendDayStyle Получает текущий стиль отображения нерабочих дней
События
DayRender Возникает при прорисовке ячейки для одного дня
SelectionChanged Возникает, когда значение свойства SelectedDate изменяется в результате действия пользователя
VisibleMonthChanged Возникает, когда пользователь щелкает по ссылке "Следующий месяц" и "Предыдущий месяц"
  • Создайте обработчики для кнопки и календаря и заполните их кодом, приведенным ниже
protected void Cal_SelectionChanged(object sender, EventArgs e)
    {
        result.InnerText = "Установлена дата "
            + Cal.SelectedDate.ToShortDateString();
    }
    
    protected void Button1_Click(object sender, EventArgs e)
    {
        Cal.SelectedDate = Convert.ToDateTime(DateTime.Now);
        result.InnerText = "Сегодня "
            + Cal.SelectedDate.ToShortDateString();
    }
Листинг 4.21. Код обработчиков кнопки и календаря
  • Добавьте в таблицу еще одну строку с двумя ячейками, разместите в каждой ячейке по календарю и настройти их свойства в соответствии с таблицей
Значения свойств двух дополнительных календарей
Свойство Значение
Первый календарь
ID Cal2
DayNameFormat FirstLetter
SelectionMode DayWeekMonth
NextMonthText 4
PrevMonthText 3
TodayDayStyle/Font/Size 8pt
TodayDayStyle/Font/Name Verdana
TodayDayStyle/Font/Bold True
TodayDayStyle/BackColor Gainsboro
SelectorStyle/Font/Size 6pt
SelectorStyle/Font/Name Verdana
NextPrevStyle/Font/Underline True
NextPrevStyle/Font/Name Webdings
DayHeaderStyle/Font/Size 8pt
DayHeaderStyle/Font/Name Verdana
DayHeaderStyle/Font/Bold True
TitleStyle/Font/Size 8pt
TitleStyle/Font/Name Verdana
TitleStyle/Font/Bold True
Второй календарь
ID Cal3
DayNameFormat Full
SelectionMode DayWeekMonth
NextMonthText Следующий месяц
PrevMonthText Предыдущий месяц
Font/Size 8pt
Font/Name Verdana
SelectMonthText Выбрать месяц
SelectWeekText Выбрать неделю
SelectorStyle/BackColor #EEEECC
NextPrevStyle/ForeColor White
DayHeaderStyle/BackColor #EEEECC
SelectedDayStyle/BackColor #009900
TitleStyle/ForeColor White
TitleStyle/BackColor #009900
OtherMonthDayStyle/BackColor LemonChiffon
  • После настройки календари должны выглядеть так