Элементы управления AdRotator и Calendar

ASP.NET --- Основы ASP.NET --- Элементы управления AdRotator и Calendar

Элемент управления AdRotator

Этот элемент управления позволяет создавать рекламный баннер, в котором согласно расписанию (задаваемому заранее и сохраняемому в XML-файле) отображается одно из набора изображений. Элемент управления AdRotator случайным образом выбирает графические баннеры из списка, который указан во внешнем XML-файле расписания.

Очевидно, что перед созданием этого элемента управления понадобится определить XML-файл расписания. Ниже приведен пример:

<?xml version="1.0" encoding="utf-8" ?> 
<Advertisements>
  <Ad>
    <ImageUrl>hdr_logo.gif</ImageUrl>
    <NavigateUrl>http://www.mysite.com</NavigateUrl>
    <AlternateText>Some text</AlternateText>
    <Impressions>20</Impressions>
    <Keyword>Some keyword</Keyword>
  </Ad>
  <Ad>
    <ImageUrl>sub_hero.jpg</ImageUrl>
    <NavigateUrl>http://www.microsoft.com/</NavigateUrl>
    <AlternateText>Microsoft Company</AlternateText>
    <Impressions>20</Impressions>
    <Keyword>Microsoft</Keyword>
  </Ad>
  <!-- И т.д. -->
</Advertisements>

У каждого элемента <Ad> имеется ряд важных свойств, конфигурирующих ссылку, изображение и частоту. Все они перечислены в таблице:

Сам класс AdRotator предоставляет ограниченный набор свойств. В свойстве AdvertisementFile указывается соответствующий файл рекламных объявлений, а в свойстве Target — тип окна, к которому должна приводить ссылка. Можно также установить свойство KeyWordFilter, что позволит выбирать баннер из записей, которые имеют специфичное ключевое слово.

Ниже приведен пример, в котором рекламная ссылка открывается в новом окне:

<asp:AdRotator AdvertisementFile="~/ads.xml" runat="server" Target="_blank" />

На рисунке показан элемент управления AdRotator. Попробуйте обновить эту страницу, и вы увидите, что каждый раз для отображения будет случайным образом выбираться новое рекламное объявление:

Вдобавок можно также реагировать на событие AdRotator.AdCreated. Это событие происходит во время создания страницы, когда изображение произвольно выбирается из файла. Оно предоставляет информацию об изображении, которая может использоваться для настройки остальной части страницы.

Элемент управления Calendar

Этот элемент управления создает многофункциональное и привлекательное окно календаря, которое показывает по одному месяцу за раз. Пользователь может переходить от одного месяца к другому, выбирать определенную дату, и даже выбирать диапазон дней (если разрешен множественный выбор). Элемент управления Calendar имеет много свойств, которые все вместе позволяют изменять практически любую его часть.

Например, можно настраивать цвета переднего плана и фона, шрифт, заголовок, формат даты, выбранную в текущий момент дату и т.д. Он также предоставляет несколько событий, которые позволяют реагировать на изменение пользователем текущего месяца (VisibleMonthChanged), выбор пользователем даты (SelectionChanged) и подготовку элементом управления Calendar к визуализации дня (DayRender).

В следующем дескрипторе Calendar устанавливается несколько базовых свойств:

<asp:Calendar runat="server" ID="Calendar1" ForeColor="green" BackColor="lightyellow" />

Наиболее важным событием Calendar является SelectionChanged, которое запускается каждый раз, когда пользователь щелкает на какой-то дате. Ниже показан базовый обработчик событий, отвечающий на событие SelectionChanged и отображающий выбранную дату:

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
        Label1.Text = "Вы выбрали: " + Calendar1.SelectedDate.ToLongDateString();
}

При каждом взаимодействии пользователя с календарем инициируется обратная отправка. Это позволяет разработчику немедленно реагировать на событие выбора, а самому элементу управления Calendar — повторно визуализировать свой интерфейс и, следовательно, отобразить новый месяц или новую выбранную дату. Элемент управления Calendar не поддерживает свойство AutoPostBack.

Можно также разрешить выбирать целые недели или месяцы, а также отдельные даты, или же визуализировать элемент управления как статический календарь, не допускающий выбора. Единственное, что следует запомнить, это то, что при разрешении выбора месяца пользователь также может выбирать отдельные недели или дни.

Аналогично, когда разрешен выбор недели, пользователь также может выбирать отдельные дни. Тип выбора устанавливается с помощью свойства SelectionMode. Вам может также понадобиться установить свойство FirstDayOfWeek для настройки выбора недели. (Например, при установке FirstDayOfWeek в перечислимое значение Monday будут выбираться недели с понедельника до воскресенья.)

Если вы разрешаете множественный выбор даты (установив для Calendar.SelectionMode значение, отличное от Day), понадобится проверять свойство SelectedDates вместо SelectedDate. Свойство SelectedDates предоставляет коллекцию всех выбранных дат, которую можно просматривать, как показано ниже:

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
        Label1.Text = "Вы выбрали следующие даты: <br />";
        foreach (DateTime dt in Calendar1.SelectedDates)
        {
            Label1.Text += dt.ToLongDateString() + "<br />";
        }
}

Элемент управления Calendar поддерживает множество свойств, связанных с форматированием, большинство из которых отображается на представление лежащей в основе HTML-таблицы (такие как CellSpacing, CellPadding, Caption и CaptionAlign).

Вдобавок можно также отдельно настраивать части этого элемента управления с помощью групповых параметров форматирования, называемых стилями (которые предоставляют опции для установки цвета, шрифта и выравнивания). Примерами таких стилей могут служить DayHeaderStyle, DayStyle, NextPrevStyle, OtherMonthDayStyle, SelectedDayStyle, TitleStyle, TodayDayStyle и WeekendDayStyle. Подсвойства всех этих стилей можно изменять в окне Properties.

И, наконец, за счет обработки события DayRender можно полностью изменять вид визуализируемой ячейки. Это событие является чрезвычайно мощным. Оно позволяет не только указывать даты, которые должны быть доступны для выбора, но и посредством свойства e.Cell конфигурировать ячейку, в которой дата размещается. (Элемент управления Calendar, по сути, представляет собой сложную HTML-таблицу.)

Например, можно выделить важную дату или даже добавить в ячейку дополнительные элементы управления либо HTML-содержимое. Ниже приведен пример, в котором изменяются цвета фона и переднего плана для выходных дней, к тому же они делаются недоступными для выбора:

<asp:Calendar runat="server" ID="Calendar1" ForeColor="#663399" BackColor="#FFFFCC"
            OnSelectionChanged="Calendar1_SelectionChanged" BorderColor="#FFCC66"
            BorderWidth="1px" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt"
            Height="200px" SelectionMode="DayWeekMonth" ShowGridLines="True" Width="220px" 
            OnDayRender="Calendar1_DayRender">
            <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
            <SelectorStyle BackColor="#FFCC66" />
            <TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
            <OtherMonthDayStyle ForeColor="#CC9966" />
            <NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
            <DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" />
            <TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt"
                ForeColor="#FFFFCC" />
</asp:Calendar>

protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
{
        if (e.Day.IsWeekend)
        {
            e.Cell.BackColor = System.Drawing.Color.Green;
            e.Cell.ForeColor = System.Drawing.Color.Yellow;
            e.Day.IsSelectable = false;
        }
}

Ниже показан результат:

Если используется такой инструмент проектирования, как Visual Studio, можно даже изменять целую цветовую схему с помощью встроенного визуального конструктора. Для этого выберите ссылку Auto Format (Автоформатирование) в смарт-теге. Отобразится список предопределенных форматов, которые устанавливают различные свойства стилей.