Построение интерфейса пользователя с серверными элементами управления tutorial 07

asp

Вступительное слово. В этом задании необходимо  добавить серверные элементами управления ASP.NET на форму онлайнового взаимодействия, созданного в задании 1. Эти элементы управления обеспечат дополнительные возможности дизайна страницы и дополнительные возможности элементов графического пользовательского интерфейса.

1. Расширить в режиме конструктора макет страницы Survey.aspx с помощью веб- серверного элемента управления Table.

а) Открыть Survey.aspx в режиме конструктора.

б) Перетащить серверный элемент управления Table из группы Standard  на панели элементов в область ниже самого нижнего элемента управления добавленного  в задании 1.

в) Использовать окно Свойств для изменения следующих свойств  элемента управления Table:

  • Установить свойство ID в tblOuter.
  • Установить свойство ForeColor в# OE0E6C.
  • Установить свойство Width в 100%.

г) Кликнуть в окне Свойств свойство Rows, а затем кликнуть  кнопку с многоточием (…).

д) Кликнуть три раза кнопку Add (Добавить), чтобы добавить три строки в таблице.

е) Кликнуть первую строку только что добавленной таблицы, а затем использовать  список свойств TableRow, чтобы установить ее свойство ID в значение outerR1.

ж) Кликнуть кнопку с многоточием (…) в свойстве Cells первой строки.

з) Кликнуть кнопку Add (Добавить), чтобы добавить ячейку. Установить свойство ID новой ячейки в значение outerR1C1, а затем установить свойство CoIumnSpan в значение 2.

и) Кликнуть кнопку ОК, чтобы установить настройки, сделанные в диалоговом окне TableCell Collection Editor (Редактор коллекции TableCell).

2. Изменить свойства серверного элемента управления Table

а) В окне TableRow Collection Editor (Редактор коллекции TableRow), установить свойства ID второй  и третьей строки таблицы в значения outerR2 и outerR3, соответственно.

б) Добавить во второй строке две ячейки.

в) Установить для первой ячейки второй строки следующие свойства:

  • Text: Поездки:
  • VerticalAlign: Middle
  • Width: 1%
  • Wrap: False
  • ID: outerR2C1

г) Установить свойство ID второй ячейки второй строки  в значение outerR2C2.

д) Добавить в третьей строке две ячейки.

е) Установите для первой ячейки третьей строки следующие свойства:

  • Text: Ваши возможности:
  • HorizontalAlign: Left
  • VerticalAlign: Middle
  • Width: 1%
  • Wrap: False
  • ID: outerR3C1

ж) Установить свойство ID второй ячейки третьей строки  в значение outerR3C2.

3. Добавить строки в серверный элемент управления Table с помощью исходного кода.

а) Переключиться в режим редактирования исходного кода.

б) Выlделить код разметки для элемента ASP:TableRow с идентификатором outerR3.

Важно выбрать весь элемент, включая его закрывающий тег и оба  asp:TableCell субэлемента.

в) Копировать выделенный текст в буфер обмена, а затем поместить курсор после текста, который бал только что скопирован, но до закрывающего asp:TableCell.

г) Вставить содержимое буфера обмена пять раз, чтобы создать пять новых строк.

д) Изменить свойство ID каждой новой строки, так чтобы продолжить последовательность именования, используемой для первых трех строк. Например, четвертая строка должна иметь идентификатор outerR4, пятая строка – outerR5, и так далее.

е) Изменить свойство ID каждой новой ячейки, так чтобы продолжить последовательность именования, используемой для первых трех строк. Например, первая ячейка в четвертой строке должна иметь идентификатор outerR4C1.

ж) Изменить текстовое содержимое каждой ячейки так, чтобы оно соответствовало следующим указаниям:

  • outerR4C1: Ваш опыт:
  • outerR5C1: Ваши цели:
  • outerR6C1: Ваши контакты:
  • outerR7C1: Где вы обычно ездите?

з) Удалить текстовое содержимое ячейки outerR8C1.

4. Добавить вложенный серверный элемент управления Table в режиме редактора исходного кода

а) В режиме конструктора нет возможности перетаскивать элементы управления в ячейки элемента управления Table. Для этого в режиме редактора исходного кода нужно между начальным и конечным тегами элемента outerR2C2 asp:TableCell добавить HTML-разметку из Приложения 1 :

б) Переключиться в режим конструктора и просмотреть дизайн страницы.

5. Добавить серверные элементы управления в серверный элемент управления Table

а) Переключиться назад в режим редактирования исходного кода.

Перетащить элемент управления Panel из группы Standard на панели элементов в  область между начальным и конечным тегами элемента outerR1C1 asp:TableCell. Используя окно Свойств, задать в HTML-разметке элемента управления Panel следующие свойства:

  • ID: pnlActivity
  • BackColor: Maroon
  • ForeColor: White
  • HorizontalAlign: Left
  • Width: 100%
  • Удалить значение атрибута Height

б) Между начальным и конечным тегами элемента управления Panel введите текст: Недавние и планируемые действия

в) Перетащить элемент управления Literal из группы Standard на панели элементов в  область между начальным и конечным тегами элемента: innerR1C1 asp:TableCell. Используя окно Свойств, задать в HTML-разметке элемента управления Literal следующие свойства:

  • ID: ltlLast
  • Text: Последняя поездка>>

г) Добавить элемент управления Calendar в элемент: innerR1C2 asp:TableCell, а затем установить для него следующие свойства:

  • ID: calLast
  • TodayDayStyle-BackColor: Maroon

д) В элемент: innerR2C1 asp:TableCell, для элемента управления Literal добавить следующую HTML-разметку:

<asp:Literal ID=»ltlNext» runat=»server» Text=»Следующая поездка>>>»></asp:Literal>

е) В элемент: innerR2C2 asp:TableCell для элемента управления Calendar добавить следующую HTML-разметку:

<asp:Calendar ID=»calNext» runat=»server» TodayDayStyle-BackColor=»Maroon»></asp:Calendar>

ж) В элемент: outerR3C2 asp:TableCell добавить элемент управления DropDownList, а затем установить ему свойство ID в значение ddAbility. Добавить следующий текст между начальным и конечным тегами элемента управления ddAbility DropDownList:

<asp:ListItem Text=»Начинающий»></asp:ListItem>

<asp:ListItem Text=»Продвинутый»></asp:ListItem>

<asp:ListItem Text=»Эксперт»></asp:ListItem>

Эти элементы Listltem определяют пункты DropDownList.

з) В элемент: outerR4C2 asp:TableCell для элемента управления ListBox добавить следующую HTML-разметку:

<asp:ListBox ID=»lstExperience» runat=»server»>

<asp:ListItem Text=»Езжу только по трассах»></asp:ListItem>

<asp:ListItem Text=»Езжу по некоторым лесным дорогам»></asp:ListItem>

<asp:ListItem Text=»Езжу по бездорожью «></asp:ListItem>

<asp:ListItem Text=»Спускаюсь с гор»></asp:ListItem>

<asp:ListItem Text=»Участвую в соревнованиях по спуску с гор»></asp:ListItem>

<asp:ListItem Text=»Выигрывал соревнования по спуску с гор»></asp:ListItem>

</asp:ListBox>

Добавленные элементы Listltem определяют пункты ListBox.

и) В элемент: outerR5C2 asp:TableCell добавить элемент управления CheckBoxList, а затем установить ему свойство ID в значение chkGoals. В элемент управления CheckBoxList chkGoals добавить следующие пункты:

  • Получить больше опыта вождения по дорогам
  • Получить больше опыта вождения по горнам
  • Обновить свой ​​велосипед
  • Получить новые аксессуары

Эти элементы Listltem определяют пункты CheckBoxList.

к) В элемент: innerR6C2 asp:TableCell для элемента управления RadioButtonList добавить следующую HTML-разметку:

<asp:RadioButtonList ID=»optMarketing» runat=»server»>

<asp:ListItem Selected=»True»>Не посылать мне информацию о продажах </asp:ListItem>

<asp:ListItem>Посылать мне информацию только о продажах Adventure Works</asp:ListItem>

<asp:ListItem> Посылать мне любую информацию о продажах </asp:ListItem>

</asp:RadioButtonList>

Добавленные элементы Listltem определяют пункты RadioButtonList. Первый первый пункт в списке является выбранным по умолчанию.

л) В элемент outerR7C2 asp:TableCell добавить элемент управления ImageMap, а затем установить ему следующие свойства:

  • ID: imgMap
  • ImageUrl: ~/Images/BikeTheWorld.gif
  • HotSpotMode: PostBack

Свойство HotSpotMode в элементе управления ImageMap управляет действием выполняемым, когда пользователь кликает HotSpot (горячую точку). В этом случае будет установлена  обратная передача. Пункты HotSpot будут определяться позже в этом задании.

м) Добавить следующий атрибут в начальный  тег для элемента imgMap asp:ImageMap :

OnClick = «imgMap_Click»

Это свойство определяет обработчика событий процедуры, которая будут использоваться, когда пользователь нажимает HotSpot в ImageMap. Код для этого события буден написан позже.

н) Переключиться в режим конструктора и просмотреть текущий дизайн страницы. Обратить внимание как отображается картинка в элементе управления ImageMap. На этой картинке вы создадите активные области, которые охватывают Северную Америку и Европу.

о) Переключиться назад в режим редактирования исходного кода.

п) Между начальным и конечным тегами элемента управления imgMap asp:ImageMap ввести стедующий текст:

<asp:PolygonHotSpot

Coordinates=»0,0,150,0,75,60,75,100,0,75″

HotSpotMode=»PostBack»

PostBackValue=»USA»

TabIndex=»1″ />

<asp:PolygonHotSpot

Coordinates=»160,0,225,0,200,60,125,60,125,25″

HotSpotMode=»PostBack»

PostBackValue=»Europe»

TabIndex=»2″ />

Элемент управления ImageMap поддерживает три различных типа областей HotSpot: RectangleHotSpot, CircleHotSpot, и  PolygonHotSpot. Только что было добавлено  две области PolygonHotSpots,  каждая с пятью сторонами.

Форма области PolygonHotSpot определяется парами координат х и у, разделенные запятой, которые относятся к основному изображению, использованному в элементе управления ImageMap. Координаты определяют контур  многоугольника формы, представляя, где начинается каждая ее сторона.

На изображении, используемом в элементе управления ImageMap, были добавлены две области, покрывающие  Северную Америку и  Европу.

р) Добавьте элемент управления HiddenField, поместив его после закрывающего тега элемента управления  imgMap ImageMap. Установить свойство ID элемента управления HiddenField  в значение hdnRegion.

с) В элемент outerR8C2 asp:TableCell добавить элемент управления ImageButton, а затем установить ему следующие свойства:

  • ID: ibtnSubmit
  • ImageUrl: ~/Images/Submit.GIF
  • PostBackUrl: ~/SurveyReceipt.aspx

т) Переключиться в режим конструктора и просмотреть текущий дизайн веб-страницы.

6. С помощью веб- серверных элементов управления добавить функциональность навигации по сайту

а) Скопировать в папку Adventure-Works, содержащую  файлы веб-сайта, файлы Web.sitemap и  AdSchedule.xml с сетевого ресурса \\2-213-s2\Хранилище\Программы\Microsoft\MSLearning\2543\Unit03\Labfiles.

б) В меню Website выберите команду Add Existing Item (Добавить существующий элемент), в диалоговом окне найти файл Web.sitemap, а затем добавить файл в проект.

в) Дважды кликнуть Web.sitemap в обозревателе решений, чтобы открыть его. Просмотреть содержимое файла.

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

г) Вернуться к странице Survey.aspx в режиме конструктора.

д) Перетащить элемент управления SiteMapPath из группы Navigation на панели элементов в  область на первую строку ниже логотипа Adventure Works на правой стороне страницы.

е) Установить свойство ForeCoIor элемента управления SiteMapPath в #0E0E6C.

ж) Переключиться в режим просмотра исходного кода и добавить следующий текст между начальным и конечным тегами элемента управления SiteMapPathl asp:SiteMapPath:

<NodeStyle ForeColor=»#0E0E6C» />

з) Открыть страницу Default.aspx в режиме конструктора. Перетащить элемент управления Menu из группы Navigation на пустую строку таблицы ниже изображения Adventure Works в верхней части страницы. Появится Menu Tasks.

и) В Menu Tasks, в списке Choose Data Source  (Выбрать источник данных) кликнуть кнопку New Data Source (Создать источник данных). Появится Мастер настройки источника данных.

к) На странице Choose Data Source  (Выбрать источник данных) кликните Site Map (Карта узла), и нажмите кнопку ОК.

л) Установить следующие свойства элементу управления Menu в окне Свойств:

  • BackColor: #0E0E6C
  • DynamicHoverStyle-BackColor: #0E0E6C
  • DynamicMenuItemStyle-BackColor: #0E0E6C
  • ForeCoIor: White

7. Включить функции динамической смены рекламаций в серверные элементы управления.

а) В меню Website выберите команду Add Existing Item (Добавить существующий элемент), в диалоговом окне найти файл AdSchedule.xml, а затем добавить файл в проект.

в) Дважды кликнуть AdSchedule.xml в обозревателе решений, чтобы открыть его. Просмотреть содержимое файла.

Файл содержит код XML, который определяет график показа картинок. Элемент управления AdRotator может быть привязан к этому файлу и будет отображать картинки в соответствии с информацией  в этом файле. График в файле указывает, что картинка BikeTheWorld.gif появляется на экране в три раза чаще, чем WaterBottle.gif, потому что их веса указанные в элементе управления Impressions равны соответственно 75 и 25.

Как следует из названия, AdRotator, как правило, используется для управления графиком баннерной рекламы на веб-сайтах. Тем не менее, веб-приложение Adventure Works просто использует функциональность этого планирования, чтобы обеспечить динамическое отображения картинок на домашней странице.

г) Вернуться к Default.aspx.

д) Перетащить элемент управления AdRotator из группы Standard на панели элементов  на пустое месте в таблице ниже раздела Услуги велосипедистам, на правой стороне веб-страницы Default.aspx.

д) Используя окно свойств, установить свойство AdvertisementFile в значение  ~/AdSchedule.xml