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

85

Элемент управления 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> имеется ряд важных свойств, конфигурирующих ссылку, изображение и частоту. Все они перечислены в таблице:

Элементы файла рекламных объявлений
Элемент Описание
ImageUrl Изображение, которое будет отображаться. Здесь может быть указана как относительная ссылка (файл в текущем каталоге), так и полностью уточненный URL-адрес в Интернете
NavigateUrl Ссылка, по которой будет направляться пользователь в случае щелчка на баннере
AlternateText Текст, который будет показываться вместо рисунка, если отобразить его невозможно. В некоторых новых браузерах этот текст также будет использоваться в качестве всплывающей подсказки
Impressions Число, которое определяет, насколько часто будет отображаться данное рекламное объявление. Это число берется в соотношении с теми, что были указаны для других рекламных объявлений. Например, баннер со значением 10 будет отображаться в два раза чаще, чем баннер со значением 5
Keyword Ключевое слово, идентифицирующее группу рекламных объявлений. Может применяться для фильтрации. Например, вы можете создать 10 объявлений, назначить половине из них ключевое слово Retail, а другой половине — ключевое слово Computer. Веб-страница затем сможет фильтровать возможные объявления и отображать только те, которые соответствуют этим ключевым словам

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

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

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

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

Элемент управления 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;
        }
}

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

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

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

Пройди тесты
Лучший чат для C# программистов