Практическая работа №5 Тема: «Применение веб-частей» Создание веб - части средствами Visual Studio 2008

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

1. Прежде всего поместите на страницу элемент управления WebPartManager

2. Добавьте элемент управления WebPartZone с id WebPartZoneLinks

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

<asp:WebPartZone ID="WebPartZonelinks" runat="server">

<ZoneTemplate>

<asp:label runat="server" id="linksPart" title="Полезные ссылки">

<a href="http://msdn.microsoft.com/ru-ru/library/system.web.ui.webcontrols.webparts.webpartmanager.aspx">

WebPartManager - класс</a>

<br />

<a href="http://msdn.microsoft.com/ru-ru/library/e0s9t4ck.aspx">

Элементы управления веб-частей ASP.NET</a>

<br />

<a href="http://msdn.microsoft.com/ru-ru/library/kswx7h7e.aspx">

Пошаговое руководство. Создание страницы веб-частей</a>

<br />

</asp:label>

</ZoneTemplate>

</asp:WebPartZone>

В результате получим следующее:

При этом, мы можем либо свернуть, либо закрыть данную веб - часть:

Добавление элемента управления "Календарь"

1. В Visual Studio перейдите в представление конструктора.

2. Из раздела Стандартные на панели элементов перетащите элемент управления Calendar на страницу и разместите его под элементом div, который содержит другие элементы управления.

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

3. В области смарт-тега выберите Автоформат.

Откроется диалоговое окно Автоформат, которое позволяет выбрать схему форматирования календаря. На следующем рисунке показано диалоговое окно Автоформат для элемента управления Calendar.

4. В списке Выбор схемы выберите Простая и нажмите кнопку OK.

5. Перейдите в представление Исходный код.

Вы видите элемент <asp:Calendar>. Этот элемент гораздо длиннее, чем элементы простых элементов управления, создаваемых ранее. Он также содержит подэлементы, такие как <WeekEndDayStyle>, которые отражают различные параметры форматирования. На следующем рисунке показан элемент управления Calendar в представлении Исходный код. (Реальный код, отображаемый в представлении Исходный код, может несколько отличаться от показанного на иллюстрации.)

Программирование элемента управления "Календарь"

В этом разделе будет запрограммирован элемент управления Calendar на отображение текущей выбранной даты.

Программирование элемента управления "Календарь"

1. В представлении Конструктор дважды щелкните элемент управления Calendar.

В представлении Исходный код создается новый обработчик событий.

2. Завершите обработчик событий SelectionChanged следующим выделенным кодом.

protected void Calendar1_SelectionChanged(object sender, System.EventArgs e)

{

Label1.Text = Calendar1.SelectedDate.ToLongDateString();

}

Запуск страницы

Теперь можно проверить календарь.

Запуск страницы

1. Нажмите клавиши CTRL + F5 для запуска страницы в браузере.

2. Щелкните дату в календаре.

Указанная дата будет отображена в элементе управления Label.

3. Просмотрите исходный код страницы в обозревателе.

Обратите внимание, что элемент управления Calendar отображается на странице в виде таблицы, где каждый день является элементом td, содержащим элемент a.

4. Закройте браузер.

Добавление статического содержимого на главную страницу

1. В Панели элементов перетащите из группы Переходы элемент управления Menu в верхнюю ячейку.

2. Создайте меню с помощью следующих шагов:

   1. Присвойте свойству Orientation элемента управления Menu значение Horizontal.

   2. Щелкните смарт-тег в элементе управления Menu и выберите Редактировать элементы меню в диалоговом окне Задачи меню. Открывается диалоговое окно Правка элементов меню.

3. В диалоговом окне «Правка элементов меню» в разделе Элементы дважды щелкните значок Добавление корневого узла, чтобы добавить два элемента меню.

   1. Щелкните первый узел и задайте для параметра Text значение Home, а для параметра NavigateUrl — имя одной из ранее созданных страниц содержимого.

   2. Щелкните второй узел и установите для параметра Text значение About, а для параметра NavigateUrl — имя одной из ранее созданных страниц содержимого.

   3. Нажмите кнопку ОК, чтобы закрыть диалоговое окно Редактор элементов меню.

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

   1. В обозревателе решений щелкните правой кнопкой мыши имя веб-узла и выберите команду Добавить существующий элемент.

   2. Перейдите к файлу изображения, выберите его и затем щелкните Добавить.

   3. В Панели элементов перетащите из группы Стандартные элемент управления Image в средний левый столбец таблицы.

   4. Задайте для свойства ImageUrl элемента управления Image имя файла изображения.

Создание дополнительных страниц:

Страницы содержимого, возможно, создавать не только средствами элемента ContentPlaceHolder.

Создание страницы

1. В обозревателе решений щелкните правой кнопкой мыши имя веб-узла и выберите команду Добавить новый элемент.

2. В разделе Установленные шаблоны Visual Studio выберите Форма Web Forms.

3. В поле Имя введите имя страницы. И нажмите Ок.

Буде создан файл aspx. Страница содержит директиву @ Page, которая подключает текущую страницу к выбранной главной странице с помощью атрибута MasterPageFile, как показано в следующем примере кода.

<%@ Page Language="C#" MasterPageFile="~/Master1.master" ... %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

</asp:Content>

Если на странице остутствует данный код введите его вручную!

Страница также содержит элемент управления Content, с которым далее будет работать пользователь.

Страница содержимого не имеет обычных элементов, формирующих страницу ASP.NET, таких как html, body или form. Вместо этого добавляется только содержимое, которое должно отображаться на главной странице вместо областей-заполнителей.