https://technet.microsoft.com/en-us/library/ms143221(v=sql.105).aspx |
Серверные элементы управления (продолжение)
Calendar
Этот класс не имеет аналогов в HTML. Определив единственный элемент управления, можно создать и предоставить в распоряжение посетителей полноценный календарь, где они смогут прокручивать месяцы, выбирать день или неделю. Внешний вид этого элемента управления может быть самым разнообразным. И все это реализуется средствами HTML. Раньше это было возможно только с помощью ActiveX — контролов, которые нужно загружать с сервера, регистрировать в системе и проверять на безопасность.
Calendar имеет множество свойств.
CellPadding | "Набивка" (расстояние между границами клетки и ее содержимым) |
CellSpacing | Расстояние между клетками |
DayNameFormat | Способ написания названий дней недели. Может принимать значения FirstLetter, FirstTwoLetters, Full, Short |
FirstDayOfWeek | Для задания первого дня недели, Default — установки, принятые в системе |
NextPrevFormat | Показ названий предыдущего и последующего месяцев. FullMonth — полное название, ShortMonth — первые 3 буквы, CustomText — любой текст, определенный программистом |
SelectionMode | Способ выбора даты. Доступны Day, DayWeek, DayWeekMonth и None |
ShowDayHeader | Показывать ли названия дней недели (да по умолчанию) |
ShowGridLines | Показывать ли сетку (нет по умолчанию) |
ShowTitle | Показывать ли заголовок (нет по умолчанию) |
TitleFormat | MonthYear, Month |
TodaysDate | Какая дата будет выбрана текущей. По умолчанию — дата на сервере |
VisibleDate | Месяц, который будет показан в календаре |
Calendar поддерживает различные календарные системы — не только привычный григорианский, но и юлианский, иудейский, мусульманский, буддистский. Это можно сделать, изменяя культурную информацию страницы.
Выбор клиентом даты начала путешествия на сайте туристического агентства:
<%@ Page Language="C#" %> <script runat="server"> void Page_Load(Object sender, EventArgs e) { if (Page.IsPostBack) { TextToUser.Text = "Вы поедете " + calVoyage.SelectedDate.ToLongDateString(); } } void calSelectChange(Object sender, EventArgs e) { if (calVoyage.SelectedDate > DateTime.Today) { TextToUser.Text = "Вы действительно хотите отпра- виться в путешествие " + calVoyage.SelectedDate.ToShortDateString() + "?"; Button ok = new Button(); ok.Width = 100; ok.Text = "Да"; form1.Controls.Add(ok); } else TextToUser.Text="Выберите будущую дату"; } </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Пример календаря</title> </head> <body> <form runat="server" id="form1"> <asp:Calendar ID="calVoyage" runat="server" BackColor="lightgreen" CellPadding="3" CellSpacing="3" NextPrevFormat="FullMonth" SelectionMode="DayWeekMonth " OnSelectionChanged="calSelectChange" /> <asp:Label ID="TextToUser" runat="server" Font- Bold="True" Font-Underline="False" /><br> </form> </body> </html>
Если мы посмотрим на HTML-код страницы, которая сгенерирована этой программой, то увидим довольно объемный текст, в том числе функцию на JavaScript и большую таблицу, каждая ячейка которой ссылается на эту функцию. Было бы непросто написать все это самим.
Свойства SelectMonthText и SelectWeekText задают символы HTML, по умолчанию > и >> эта последовательность отображается в символы >.
С событием выбора даты OnSelectionChanged связан обработчик calSelectChange. В нем мы сначала проверяем, является ли выбранная дата будущей по отношению к сегодняшнему дню. Если да, то создается новая кнопка для подтвержения выбранной даты.
Такая строка в Page_Load —
this.Culture=new CultureInfo("th-TH").ToString();
сделает календарь таким, какой принят в Таиланде. Не забудьте включить пространство имен глобализации:
%@Import Namespace= "System.Globalization" %
Свойство SelectionMode, равное DayWeekMonth, позволяет выбрать как конкретный день, так и неделю или месяц. Как же получить выбранный диапазон дат? SelectedDate возвращает только первый день диапазона. Для этого существует коллекция Calendar1.SelectedDates:
TextToUser.Text = "Вы пробудете в путешествии "; for (int i = 0; i < calVoyage.SelectedDates.Count; i++) { TextToUser.Text += calVoyage.SelectedDates[i].ToShortDateString() + "<br>"; }
А еще элегантнее будет написать так:
foreach ( DateTime i in calVoyage.SelectedDates) { TextToUser.Text += i.ToShortDateString() + "<br>"; }
Можно запретить пользователю выбирать прошлую дату. Для этого можно воспользоваться свойством IsSelectable:
if (e.Day.Date < DateTime.Now) { e.Day.IsSelectable = false; }
Автоформатирование календаря
У календаря не один стиль, а несколько. Разные стили применяются к заголовку, к выходным и будним дням, дням нетекущих месяцев и к сегодняшнему дню. Стили можно задать как с помощью внешних классов, так и непосредственно. Все это просто поражает. Можно поставить календарь на тысячах разных сайтов, и везде он будет выглядеть по-разному.
В Visual Studio 2005 можно поменять внешний вид календаря с помощью предопределенных шаблонов. У многих элементов управления в режиме дизайна есть "умные ярлычки" (smart tags). В них есть ссылка на диалог автоформатирования календаря. При этом уже сделанные изменения свойств сохранятся.
Внешний вид календаря можно менять в обработчике события DayRender. У аргумента обработчика DayRenderEventArgs два свойства: Cell с типом TableCell — наследника WebControl и Day типа CalendarDay. В Cell можно добавлять новые элементы, но только такие, которые не запускают событий:
protected void calVoyage_DayRender(object sender, DayRenderEventArgs e) { if (e.Day.Date.Day == 8 && e.Day.Date.Month == 3) { e.Cell.BorderColor = System.Drawing.Color.Red; e.Cell.BorderWidth = 4; e.Cell.Controls.Add(new LiteralControl("<br>Без жен- щин жить нельзя")); } }
В этом примере проверяется день, и если это 8 марта, то вокруг него рисуется красная рамка. А еще добавляется элемент LiteralControl с текстом, соответствующим моменту.