Управление данными ЛАБОРАТОРНАЯ РАБОТА № 3 1. ЦЕЛЬ РАБОТЫ

ЛАБОРАТОРНАЯ РАБОТА № 3
Управление данными
1. ЦЕЛЬ РАБОТЫ
Целью работы является рассмотреть элементы управления источниками данных и
элементы управления для отображения данных. Задачей работы является создание Webформ с различными элементами управления.
2. СОСТАВ РАБОЧЕГО МЕСТА
2.1. Оборудование: IBM-совместимый персональный компьютер (ПК).
2.2. Программное обеспечение: операционная система Windows, среда разработки
Microsoft Visual Studio, СУРБД Microsoft SQL Server.
3. КРАТКИЕ ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ
Технология Web Forms
Технология Web Forms, реализованная в ASP.NET, реализует модель
программирования, в которой веб-страницы динамически генерируются на веб-сервере и
передаются браузеру через Интернет. В определенном смысле эта технология является
развитием технологии ASP, позволяя объединить Web-ориентированый подход написания
Web-приложений ASP с методами традиционного программирования.
При этом разработчик создает разметку HTML-страницы со статическим
содержимым и пишет программу С# для вывода динамического содержимого. Программа
С# выполняется на сервере, и созданные ею данные интегрируются со статической
HTML-разметкой , в результате чего получается веб-страница. Браузеру отсылается
полученный стандартный HTML-код.
Веб-формы (страницы приложений, созданные с помощью Web Forms) могут
работать с любым браузером, если он может работать с версией HTML, используемой
сервером при создании этих страниц. Логика работы веб-формы может быть реализована
на любом языке программирования, поддерживаемоговерсией .NET Framework, которая
установлена на веб-сервере.
Веб-приложения можно создавать в любом текстовом редакторе . , но все-таки
Visual Studio значительно облегчает процесс разработки и тестирования веб-приложений.
Любая веб-форма состоит, как правило, из трёх составляющих: директивной,
декларативной и императивной (программной).
Директивная составляющая необходима для сообщения исполняющей среде
ASP.NET настроек для обработки текущей страницы.
Декларативная составляющая содержит статическую информацию о разметке
текущей страницы, а также о правилах привязки к динамическим данным.
Императивная составляющая реализует поведенческие аспекты задекларированных
элементов управления ASP.NET, а также позволяет создавать для их взаимодействия
объектные модели из любых классов, входящих в состав платформы .NET Framework или,
при надобности, любых других платформ любым возможным стандартным способом. Эта
составляющая может находиться как в файле разметки, так и в отдельном файле, имя
которого формируется с помощью конкатенации имени файла разметки страницы,
символа точки и сокращения языка программирования (для C# - расширение файла .cs)
Страница хранится в файле с расширением .аsрх. При обращении к веб-серверу по
виртуальному адресу формы в итоге производится обращение к классу вызываемой вебформы, динамически создающему ответный код HTML, посылаемый браузеру клиента.
ASP.NET предлагает богатый выбор элементов пользовательского интерфейса.
Количество и сложность элементов управления значительно возросли за последние годы,
соответственно возросли и ожидания пользователей относительно внешнего вида и
поведения веб-приложений. Кроме всего прочего, веб-приложения по своей природе
являются распределенными. В типичном случае клиент и сервер расположены в разных
местах. В большинстве веб-приложений при их создании приходится учитывать
такиехарактеристики, как время ожидания в сети, ширина полосы пропускания и
производительность веб-сервера и т.д. Передача информации от клиента к веб-серверу и
обратно может длиться несколько секунд.
Серверные элементы управления ASP.NET
Добавить некоторое содержимое в код ASP.NET в VisualStudio с помощью
конструктора Web Forms, который поддерживает перетаскивание элементов мышью из
панели элементов управления Web.
На страницы ASP.NET можно добавлять три типа серверных элементов
управления.

Серверные элементы управления HTML — имитируют стандартные
элементы HTML, которые должны быть знакомы разработчикам на HTML.

Серверные элементы управления Web — новый набор элементов, часть
которого имеют ту же функциональность, что и элементы HTML. Эти элементы
управления используют общую схему именования свойств и прочих элементов
для облегчения разработки и согласования с аналогичными элементами
ynpaвления WindowsForms. Как увидим позднее, доступны также некоторые
совершенно новые и очень мощные элементы управления. Среди Webсерверных элементов управления есть стандартные — такие как кнопки,
элементы проверки допустимости для контроля пользовательского ввода,
элементы peгистрации (Login), упрощающие управление пользователями, а
также более сложные элементы, предназначенные для работы с источниками
данных и т.д.

Настраиваемые и пользовательские элементы управления — эти элементы
определяются разработчиком и могут быть созданы разными способами.
Web-серверные элементы управления ASP.NETПочти все Web-серверные
элементы управления (в этой и других категориях) унаследованы от класса
System.Web.UI. WebControls .WebControl, который, в свою очередь, унаследован от
System.Web.UI .Control. Те же из них, которые не используют это наследование,
наследуются либо напрямую от Control, либо от более специализированных базовых
классов, которые в конечном итоге происходят от Control. Этим объясняется, что Webсерверные элементы управления имеют множество общих свойств и событий, которые
можно использовать при необходимости.
Многие из часто используемых унаследованных свойств имеют отношение к стилю
отображения. Внешним видом элементов управления можно легко управлять, используя
такие свойства, как ForeColor, BackColor, Font и так далее; управлять ими можно также с
помощью классов каскадных таблиц стилей (CSS). Это достигается установкой
строкового свойства CssClass значением имени класса CSS из соответствующего файла.
Другие достойные упоминания свойства — это Width и Height, с помощью которых
можно управлять размером элемента управления, AccиssKey и TabIndex — для
облегчения взаимодействия с пользователем, а также Enabled — для
включения/отключения функциональности элемента управления в составе разрешённых
для реагирования серверных элементов управления Web Forms.
Некоторые элементы управления могут содержать в себе другие элементы управления, таким образом, образуя иерархию в пределах одной страницы. Получить доступ к
вложенным элементам управления можно через свойство Controls, а к контейнерному
элементу управления — через свойство Parent.
Вероятно, вам придется использовать унаследованное событие Load чаще другихдля инициализации элемента управления, и PreRender — для выполнения самых последних модификаций перед выводом HTML.
Web-серверные элементы управления для работы с данными
Эти элементы управления подразделяются на два типа:
1. Элементы управления источниками данных (SqlDataSource, AccessDataSource,
ObjectDataSource, XmlDataSource, SiteMapDataSource);
2. Элементы управления отображением данных (GridView, DataList, DetailsView,
FormView, Repeater, Reportviewer).
Обычно на страницу помещается один из (не визуальных) элементов управления
источников данных для связи с хранилищем данных; затем добавляются элементы
управления для отображения данных, привязанные к источнику. Некоторые из наиболее
усовершенствованных элементов управления для отображения данных вроде GridView
также позволяют редактировать данные.
Элементы управления источников данных
Элемент
управления
SqlDataSource
Описание
Служит источником данных, хранимых в базе SQL Server. Поместив
этот элемент на страницу, можно манипулировать данными SQL
Serval с помощью элементов управления, отображающих данные.
Далее в этой главе мы покажем его в действии.
AccessDataSource
Как SqlDataSource, но работает с данными из базы Access.
ObjectDataSource
Этот элемент управления позволяет манипулировать данными,
сохраненными в созданных вами объектах, которые могут быть
сгруппированы в класс коллекции. Это может быть очень быстрый
способ представить пользовательскую объектную модель на
странице ASP.NET.
Аналогично SqlDataSource , но работает с иерархическими
данными. Удобно применять в связке с элементом управления
TreeView(один из элементов управления,
предназначенныйвизуализации иерархических данных). Можно
также при необходимости трансформировать данные XML с
помощью таблицы стилей XSL.
SiteMapDataSource Позволяет связаться с иерархическими данными карты сайта. См.
далее раздел, посвященный Web-серверным элементам управления
для навигации
XmlDataSource
Элементы управления для отображения данных
Элемент управления
Описание
GridView
Отображает множественные элементы данных (такие как записи
базы данных) в форме строк, где каждая строка состоит из
столбцов, отображающих поля данных. Манипулируя свойствами
этого элемента управления, можно выбирать, сортировать и
редактировать элементы данных.
DataList
Отображает множественные элементы данных, где для каждого
элемента можно применять произвольный шаблон отображения.
Как и в случае GridView, можно выбирать, сортировать и
редактировать элементы данных.
DetailsView
Отображает единственный элемент данных (запись базы данных) в
табличной форме, где каждая строка данных представляет
отдельное поле. Позволяет добавлять, редактировать и удалять
элементы данных.
FormView
Отображает единственный элемент данных, используя шаблон. Как
и DetailsView, позволяет добавлять, редактировать и удалять
элементы данных.
Repeater
Подобно DataList, но без возможностей выбора и редактирования.
ReportViewer
Усовершенствованный элемент управления, предназначенный для
отображения отчетных данных.
Общие сведения о серверном веб-элементе управления GridView
В разработке программного обеспечения зачастую встает задача отображения
табличных данных. ASP.NET предоставляет ряд инструментов для отображения данных в
табличном виде, в число которых входит элемент управления GridView. С помощью
элемента управления GridView можно отображать, изменять и удалять данные из
различных источников данных, в том числе баз данных, XML-файлов и бизнес-объектов,
публикующих данные.
Базовые сведения
Элемент управления GridView можно использовать для выполнения следующих задач:


Автоматическая привязка и отображение данных из элемента управления источника
данных.
Выборка, сортировка, пролистывание, изменение и удаление данных из элемента
управления источника данных.
Помимо этого, внешний вид и поведение элемента управления GridView можно изменять
следующими способами:

Определять настраиваемые столбцы и стили.

Использовать шаблоны для создания настраиваемых элементов интерфейса
пользователя (UI).

Вводить пользовательский код в функциональность элемента управления
GridView с помощью обработчиков событий.
Привязка данных к элементу управления GridView
Элемент управления GridView допускает два способа привязки к данным:

Привязка данных с использованием свойства DataSourceID, позволяющего
привязать элемент управления GridView к элементу управления источника
данных. Этот подход является предпочтительным, поскольку он позволяет
элементу управления GridView использовать возможности элемента управления
источника данных и предоставить встроенную функциональность для
сортировки, разбиения по страницам и обновления данных.

Привязка данных с использованием свойства DataSource, позволяющего
выполнять привязку к различным объектам, включая наборы данных и модули
чтения данных ADO.NET. При использовании этого подхода код реализации
дополнительной функциональности наподобие сортировки, разбиения по
страницам и обновления данных требуется писать самостоятельно.
При выполнении привязки к источнику данных с использованием свойства
DataSourceID элемент управления GridView поддерживает двустороннюю привязку
данных. Помимо того, что элемент управления будет отображать возвращенные данные,
можно включить в элементе управления автоматическую поддержку операций обновления
и удаления привязанных данных.
Форматирование отображаемых данных в элементе управления
GridView
Для строк элемента управления GridView можно задать структуру, цвет, шрифт и
выравнивание. Также можно задать отображение текста и данных, содержащихся в
строках. Помимо этого, можно указать порядок отображения строк данных: в виде
обычных элементов, чередующихся элементов, выбранных элементов или элементов в
режиме редактирования. Элемент управления GridView также позволяет задавать формат
столбцов.
Изменение и удаление данных с помощью элемента управления
GridView
По умолчанию элемент управления GridView отображает данные в режиме «только
для чтения». Тем не менее, элемент управления также поддерживает режим
редактирования, в котором строка отображается с помощью таких элементов управления,
допускающих редактирование, как TextBox или CheckBox. Элемент управления GridView
также можно настроить на отображение кнопки Delete, которая позволяет удалить
соответствующую запись из источника данных.
Элемент управления GridView способен автоматически выполнять операции
изменения и удаления данных над источником данных, к которому он привязан, что
позволяет обеспечить возможность редактирования без необходимости написания
дополнительного кода. Наряду с этим процесс изменения и удаления данных можно
контролировать программным способом, например, при привязке элемента управления
GridView к элементу управления источника данных, доступному только для чтения.
Элементы управления ввода данных, используемые при отображении строки в режиме
редактирования, можно настроить с помощью шаблона.
Функциональность сортировки в элементе управления GridView
Элемент управления GridView поддерживает сортировку по одиночному столбцу без
создания дополнительного кода. Функциональность сортировки элемента управления
GridView можно расширить, используя событие сортировки и задавая выражение
сортировки.
Функциональность разбиения по страницам в элементе управления
GridView
Элемент управления GridView обладает базовой функциональностью разбиения по
страницам. Функциональность разбиения по страницам элемента управления GridView
можно расширить с помощью свойства PagerTemplate элемента управления GridView.
События GridView
Функциональность элемента управления GridView можно расширять с помощью
обработчиков событий. Элемент управления GridView предоставляет события,
происходящие перед операциями перехода и изменения и после них.
Общие сведения о серверном веб-элементе управления TreeView
Серверный веб-элемент управления TreeView используется для отображения
иерархических данных, таких как оглавление или каталог файлов, в древовидной
структуре.
Функциональные возможности
Элемент управления TreeView поддерживает следующие функциональные
возможности:

Автоматическая привязка данных, благодаря которой узлы элемента
управления привязываются к иерархическим данным, таким как XML-документ.

Поддержка структуры переходов по веб-узлу благодаря интеграции с
элементом управления SiteMapDataSource.

Текст узла, который может отображаться или как обычный текст, или как
гиперссылки.

Настройка внешнего вида с помощью тем, определенных пользователем
изображений и стилей.

Программный доступ к объектной модели TreeView, которая позволяет
создавать древовидные структуры, заполнять узлы, устанавливать свойства и
пр., динамическим образом.

Заполнение клиентских узлов (на поддерживаемых обозревателях).

Возможность отображения флажков рядом с каждым узлом.
Элемент управления TreeView может отображать различные типы данных:
статические данные, заданные декларативно в элементе управления, данные, привязанные
к элементу управления, или данные, добавленные к элементу управления TreeView
программным путем в результате действий пользователя.
Отображение статических данных
Статические данные в элементе управления TreeView можно отображать путем
создания коллекции элементов TreeNode, которые являются дочерними элементами
элемента управления TreeView. Эти дочерние элементы называются также дочерними
узлами.
В следующем примере показана разметка элемента управления TreeView с тремя
узлами, некоторые из которых имеют дочерние узлы.
<asp:TreeView ID="MyTreeView" Runat="server">
<Nodes>
<asp:TreeNode Value="Child1" Expanded="True" Text="1">
<asp:TreeNode Value="Grandchild1" Text="A" />
<asp:TreeNode Value="Grandchild2" Text="B" />
</asp:TreeNode>
<asp:TreeNode Value="Child2" Text="2" />
<asp:TreeNode Value="Child3" Expanded="True" Text="3">
<asp:TreeNode Value="Grandchild1" Text="A" />
</asp:TreeNode>
</Nodes>
</asp:TreeView>
Привязка данных к элементу управления TreeView
Элемент управления TreeView можно привязать к источнику данных, который
реализует интерфейс IHierarchicalDataSource, например, элементы управления
XmlDataSource и SiteMapDataSource. Кроме того, при привязке данных можно управлять
тем, какие поля следует заполнять из источника данных.
Отображение данных программным путем при помощи
TreeNodeCollection
Элемент управления TreeView можно заполнить данными программным путем,
обратившись к свойству Nodes, которое возвращает класс TreeNodeCollection. Коллекция
TreeNodeCollection является очень строго типизированной коллекцией объектов TreeNode.
Так как объект TreeNode содержит свойство ChildNodes, которое может содержать
объекты TreeNode, то класс TreeNodeCollection является иерархической структурой
данных, представляющей все узлы элемента управления TreeView.
Типы узлов TreeView
Элемент управления TreeView состоит из одного или нескольких узлов. Узлом
называется каждая запись в дереве, представленная объектом TreeNode. В следующей
таблице описаны три разных типа узлов.
Тип узла
Корневой
Описание
Узел без родительского узла и с одним или несколькими дочерними
узлами.
Родительский Узел с родительским узлом и с одним или несколькими дочерними узлами.
Конечный
Узел без дочерних узлов.
Несмотря на то, что одно дерево имеет, как правило, только один корневой узел,
элемент управления TreeView позволяет добавление нескольких элементов управления в
структуру дерева. Подобные возможности полезны, когда есть необходимость в
отображении списка без единого корневого узла, как, например, в списке категорий
продуктов.
Каждый узел содержит свойства Text и Value. Значение свойства Text отображается
в элементе управления TreeView, а свойство Value используется для хранения
дополнительных данных об узле, например, данных, передаваемых событию обратной
передачи, связанному с узлом.
При клике на узле элемента управления TreeView он может либо инициировать
событие выбора (через обратную отправку), либо перенаправить браузер на другую
страницу. Если свойство NavigateUrl не задано, то при клике на узле инициируется
событие SelectedNodeChanged, которое можно обработать для реализации необходимой
функциональности. Каждый узел имеет свойство SelectAction, которое можно
использовать для определения отдельных действий, происходящих при клике на узле,
например, разворачивание или сворачивание узла. Чтобы при клике на узле вместо
инициирования события выбора происходило перенаправление на определённую
страницу, присвойте свойству NavigateUrl узла значение, отличное от пустой строки.
Заполнение данных TreeNode по требованию
Иногда не очень удобно определять структуру данных статически, так как данные
могут зависеть от информации, получаемой во время выполнения. Для динамического
отображения данных элемент управления TreeView поддерживает динамическое
заполнение узла. Если элемент управления TreeView настроен на заполнение по
требованию, то элемент управления инициирует событие, когда пользователь
разворачивает узел. Обработчик событий извлекает соответствующие данные и заполняет
узел, на который кликнул пользователь. Чтобы заполнить объект TreeNode данными по
требованию, присвойте свойству PopulateOnDemand узла значение true и создайте
обработчик событий TreeNodePopulate для заполнения данными объекта TreeNode.
Заполнение узла в TreeView на стороне клиента
Любой обозреватель, имеющий свойство SupportsCallback с установленным
значением true в файле конфигурации возможностей обозревателя, поддерживает
заполнение узла на стороне клиента.
Заполнение узла на стороне клиента позволяет элементу управления TreeView
заполнить узел с помощью вызова события TreeNodePopulate сервера из клиентского
сценария, вместо запрашивания обмена данными с сервером.
Разрешение сценариев клиента
По умолчанию в современных обозревателях разворачивание и сворачивание узлов в
элементе управления TreeView производятся на основе вызова клиентских сценариев.
Использование клиентских сценариев уменьшает инерциальность взаимодействия, так как
элементу управления не надо обмениваться данными с сервером для отображения новой
информации.
Обратная передача в TreeView
По умолчанию элемент управления TreeView управляет функциями разворачивания
и сворачивания на стороне клиента за исключением тех случаев, когда обозреватель не
поддерживает клиентские сценарии или свойство EnableClientScript имеет значение false.
Если свойство PopulateNodesFromClient имеет значение true и обозреватель поддерживает
клиентские сценарии, то элемент управления TreeView извлекает данные с сервера, но не
передает обратно всю страницу целиком.
Если элемент управления TreeView поставлен в режим выбора, то каждый раз при
клике на узле пользователем происходит обратная передача на сервер и инициируется
событие SelectedNodeChanged.
Обычно управлять обратной передачей событий стоит, когда элемент управления
TreeView находится в режиме выбора или узлы заполняются динамически. Это
действительно, пока либо свойство PopulateOnDemand, либо свойство
PopulateNodesFromClient имеют значение true.
Использование элемента управления TreeView с элементами управления
UpdatePanel
Элементы управления UpdatePanel используются для обновления выбранных
областей страницы вместо обновления всей страницы с помощью обратной передачи.
Элемент управления TreeView можно использовать внутри элемента управления
UpdatePanel со следующими ограничениями:
 Обратные вызовы элемента управления TreeView должны быть связаны с
асинхронными обратными передачами, иначе проверка события обратного вызова
завершится неудачей. При присваивании свойству PopulateOnDemand элемента
управления TreeNode значения true обратные вызовы разрешены. Чтобы
удостовериться, что обратные вызовы элемента управления TreeView работают с
элементом управления UpdatePanel, можно использовать один из следующих
подходов:
o Если элемент управления TreeView не внутри элемента управления
UpdatePanel, то следует отключить обратные вызовы элементов управления
TreeNode, которые не являются частью асинхронной обратной передачи.
Для этого надо присвоить свойству PopulateOnDemand значение false.
o Обновите программным путем все элементы управления, которые
регистрируют обратные вызовы во время асинхронной обратной передачи.
Например, можно поместить элемент управления TreeView внутри элемента
управления UpdatePanel. Элемент управления TreeView не обязательно
должен быть внутри элемента управления UpdatePanel, из которого
происходят асинхронные обратные передачи, так как элемент управления
UpdatePanel, содержащий элемент управления TreeView, обновляется.
 Применять стили следует путем ссылки на класс таблиц каскадных стилей
(Cascading Style Sheet – CSS). Например, вместо того, чтобы установить атрибут
свойства NodeStyle в форме «свойство.подчиненное_свойство», задавайте стиль с
помощью атрибута в форме «CssClass=имя_класса». Аналогично, при
использовании шаблона NodeStyle для задания стиля, используйте атрибут CssClass
шаблона.
 Свойство EnableClientScript должно иметь значение true (значение по умолчанию).
Кроме того, если обратные вызовы включены для элемента управления TreeView,
то нельзя менять свойство EnableClientScript между асинхронными обратными
передачами.
4. ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ
Упражнение 1
Создание Web форм с элементом управления TreeView DataСвязывание данных с представлением
В этом упражнении вы будете использовать элементы управления SqlDataSource и
TreeView для связывания и вывода иерархического набора данных.
План:
Пользователь интрасети на портале компании должен увидеть специализированные для
неё решения.
Группа Web-разработчиков определила следующий дизайн:
 Приложение требует, чтобы элемент управления TreeView был помещен внутри
секции с полосой прокрутки, которая появляется тогда, когда содержимое
TreeView выходит из области видимости.
 Секция с полосой прокрутки должна иметь высоту всей странички и ширину 180
пикселей.
Откройте начальный Web-сайт
1. В среде Visual Studio, в меню File нажмите Open Web Site.
2. Выберите ~\LabFiles\Starter\language\Ex1 , и нажмите Open.
Создайте соединение с базой данных.
3. В окне Solution Explorer двойным щелчкем выберите файл web.config. Файл
web.config откроется в окне Source.
4. В секции <configuration> создайте подсекцию <connectionStrings> и определите
соединение для базы данных Northwind Traders под названием NWindConn.
Ваш код должен выглядеть следующим образом:
<connectionStrings>
<add name="NWindConn"
connectionString="SERVER=(local);DATABASE=northwind;trusted_connection=true;"/>
</connectionStrings>
3.Чтобы сохранить файл web.config , в меню File выберите Save web.config
4. Чтобы закрыть web.config, в меню File выберите Close
Создание элемента управления SqlDataSource
В окне Solution Explorer сделайте двойной щелчок на страничке Sales.aspx.
Sales.aspx откроется в исходном окне.
2. Импортируйте библиотеку классов (пространство имен) System.Data используя
директиву @Imports
Ваш код должен иметь вид:
<%@ import namespace="System.Data" %>
3. Из окна Toolbox перетащите элемент управления SqlDataSource внутрь
содержимого элемента управления PageContentPlaceHolder .
4. Установите следующие свойства элемента управления SqlDataSource.
Атрибут
Значение
ID
ConnectionString
SelectCommand
Regions
<%$ ConnectionStrings:NWindConn%>
SELECT RegionID, RegionDescription FROM Region
Ваш код должен выглядеть следующим образом:
<asp:SqlDataSource ID="Regions" runat="server" ConnectionString="<%$
ConnectionStrings:NWindConn %>" SelectCommand="SELECT RegionID, RegionDescription
FROM Region">
</asp:SqlDataSource>
5. Из секции данных окна Toolbox перетащите элемент управления SqlDataSource в
область содержимого элемента управления PageContentPlaceHolder.
6. Установите следующие свойства SqlDataSource
Атрибут
Значение
ID
ConnectionString
SelectCommand
Territories
<%$ ConnectionStrings:NWindConn %>
SELECT TerritoryID, TerritoryDescription, RegionID FROM
Territories
Ваш код должен выглядеть следующим образом:
<asp:SqlDataSource ID="Territories" runat="server" ConnectionString="<%$
ConnectionStrings:NWindConn %>" SelectCommand="SELECT TerritoryID,
TerritoryDescription, RegionID FROM Territories">
</asp:SqlDataSource>
Создание элемента управления XmlDataSource.
1. Из секции данных окна Toolbox перетащите элемент управления XmlDataSource
в область содержимого элемента управления PageContentPlaceHolder.
2. Установите значение ID равное XmlView
Ваш код должен выглядеть следующим образом:
<asp:XmlDataSource ID="XmlView" runat="server">
</asp:XmlDataSource>
Заполнение XmlDataSource данными:
1. В императивной части страницы создайте обработчик события PageLoad.
Ваш код должен выглядеть следующим образом:
void Page_Load (object sender, EventArgs e)
{
}
2. В обработчике события загрузки страницы создайте объект DataSet с именем
treeData и установите параметр DataSetName.
Ваш код должен выглядеть следующим образом:
DataSet treeData = new DataSet();
treeData.DataSetName = "RegTerrs";
3. Создайте объект DataView с названием regionView который использует команду
Select объекта SqlDataSource. Он передает пустой параметр
DataSourceSelectArguments, который передает результат в DataView.
Ваш код должен выглядеть следующим образом:
DataView regionView = (DataView)
Regions.Select(DataSourceSelectArguments.Empty);
4. Создайте объект DataTable с именем regionTable, который использует метод Copy
свойства Table элемента управления regionView, и установите свойство
ColumnMapping для первых двух колонок в MappingType.Attribute
Ваш код должен выглядеть следующим образом:
DataTable regionTable = regionView.Table.Copy();
regionTable.Columns[0].ColumnMapping =
MappingType.Attribute;
regionTable.Columns[1].ColumnMapping =
MappingType.Attribute;
5. Создайте объект DataView с именем territoryView, который использует команду
Select для выборки области из SqlDataSource, передавая пустой параметр
DataSourceSelectArguments, который передает результат в DataView
Ваш код должен выглядеть следующим образом:
DataView territoryView = (DataView)
Territories.Select(DataSourceSelectArguments.Empty);
6. Создайте объект DataTable с именем territoryTable, который использует метод
Copy свойства Table элемента управления territoryView, и установите свойство
ColumnMapping первых трех колонок в MappingType.Attribute.
Ваш код должен выглядеть следующим образом:
DataTable territoryTable = territoryView.Table.Copy();
territoryTable.Columns[0].ColumnMapping =
MappingType.Attribute;
territoryTable.Columns[1].ColumnMapping =
MappingType.Attribute;
territoryTable.Columns[2].ColumnMapping =
MappingType.Attribute;
7. Установите свойство TableName для объекта DataTable с именем regionTable равным
Regions.
Ваш код должен выглядеть следующим образом:
regionTable.TableName = "Regions";
8. Установите свойство TableName для обьекта territoryTable равным Territories.
Ваш код должен выглядеть следующим образом:
territoryTable.TableName = "Territories";
9. Добавьте таблицы данных regionTable и territoryTable в treeData DataSet
Ваш код должен выглядеть следующим образом:
treeData.Tables.Add(regionTable);
treeData.Tables.Add(territoryTable);
10. Создайте связи DataRelation с именем rel которые модулируют иерархические
связи между регионами и областями, и установите свойство Nested объекта
DataRelation на true.
Ваш код должен выглядеть следующим образом:
DataRelation rel =
new DataRelation("regionsTerritories",
regionTable.Columns["RegionID"],
territoryTable.Columns["RegionID"]);
rel.Nested = true;
11. Добавьте отношение rel в объект treeData
Ваш код должен выглядеть следующим образом:
treeData.Relations.Add(rel);
12. Установите свойство Data объекта XmlView равным значению, возвращаемому из
метода GetXml объекта treeData типа.DataSet.
Ваш код должен выглядеть следующим образом:
XmlView.Data = treeData.GetXml();
Создайте элемент управления Panel содержащий TreeView.
1. Из стандартной части ToolBox перетащите элемент управления Panel в
PageContentPlaceHolder.
2. Нужно установить следующие свойства элемента управления Panel и очистить
значения свойства Height и Width.
Атрибут
Значение
ID
ScrollBars
BackColor
CssClass
pnlTreeView
Auto
Gainsboro
TreePanel
Ваш код должен выглядеть следующим образом:
<asp:Panel ID="pnlTreeView" runat="server" ScrollBars="Auto" BackColor="Gainsboro"
CssClass="TreePanel"></asp:Panel>
Создайте элемент управления TreeView
1. Из навигационной части (Navigation) окна Toolbox перетащите элемент управления
TreeView внутрь содержимого элемента управления Panel с идентификатором
pnlTreeView.
2. Установите следующие свойства для TreeView.
Атрибут
Значение
ID
DataSourceID
AutoGenerateDataBindings
ExpandDepth
ShowLines
Font-Size
RegTerrTree
XmlView
true
1
true
8pt
Ваш код должен выглядеть следующим образом:
<asp:TreeView ID="RegTerrTree" runat="server" DataSourceId="XmlView"
AutoGenerateDataBindings="true" ExpandDepth="1" ShowLines="true" FontSize="8pt"></asp:treeview>
3. Добавьте элемент DataBindings в RegTerrTree элемента управления TreeView .
Ваш код должен выглядеть следующим образом:
<DataBindings></DataBindings>
4. Добавьте элемент TreeNodeBinding в элемент DataBindings для корневого узла
дерева.
Ваш код должен выглядеть следующим образом:
<asp:TreeNodeBinding />
5. Установите следующие свойства элемента TreeNodeBinding.
Атрибут
Значение
Depth
0
DataMember
RegTerrs
Text
Regions & Territories
SelectAction
None
Ваш код должен выглядеть следующим образом:
<asp:TreeNodeBinding Depth="0" DataMember="RegTerrs"
Text="Regions & Territories" SelectAction="None"/>
6. Добавьте элемент TreeNodeBinding в элемент DataBindings для вывода текста и
значений региональных областей.
7. Установите следующие свойства элемента TreeNodeBinding.
Атрибут
Значение
Depth
DataMember
TextField
ValueField
1
Regions
RegionDescription
RegionID
Ваш код должен выглядеть следующим образом:
<asp:TreeNodeBinding Depth="1" DataMember="Regions" TextField="RegionDescription"
ValueField="RegionID"/>
8. Добавьте элемент TreeNodeBinding в элемент DataBindings для вывода текста и
значений территориальных узлов.
9. Установите следующие свойства элемента TreeNodeBinding.
Атрибут
Значение
Depth
2
DataMember
Territories
TextField
TerritoryDescription
ValueField
TerritoryID
Ваш код должен выглядеть следующим образом:
<asp:TreeNodeBinding Depth="2" DataMember="Territories"
TextField="TerritoryDescription" ValueField="TerritoryID" />
Просмотр страницы
1. Для сохранить страницы Sales.aspx, в меню File выберите Save Sales.apsx.
2. В любом месте странички кликните правой кнопкой мышки и выберите меню View
in Browser.
3. Просмотрите результаты развертывая узлы элемента управления TreeView
4. Закройте браузер.
5. В меню File выберите Close Project и оставьте среду Visual Studio открытой для
выполнения следуещего упражнения.
Упражнение 2
Создание Web-форм с привязанным к данным элементом
управления GridView
В этом упражнении перед вами стоит задача создать Web-форму для управления данными
с детальной информации о работниках.
Сценарий
Команда Web разработчиков должна создать Web форму для отображения работников по
регионам и территориям, учитывая, что пользователи имеют возможность изменять
данные в своем профиле.
Спроектируйте Web форму так, чтобы:

После того, как пользователь выбирает регион и территорию в узле дерева, элемент
управления GridView выводит на экран всех работников этой территории.

Для каждого работника из списка GridView должен содержать фамилию, имя и
звание.
Откройте исходный Web сайт.
1. В среде Visual Studio, в меню File, нажмите Open Web Site.
2. Выберите E:\LabFiles\Starter\language\Ex2, и нажмите Open.
Модифицируйте страницу Sales.aspx.
1. В Solution Explorer двойной щелчок на Sales.aspx.
Это откроет Sales.aspx в окне Source
2. Создайте таблицу под html комментарием <!-- TODO: Exercise 2 --> с cellspacing
равным 0 (выраженная в пикселях толщина линии, разделяющей смежные ячейки
таблицы), cellpadding равным 0 (пустое пространство между границей табличной
ячейки и помещённым в ней текстом), шириной width равной 100%, и высотой
heightравной 100%.
Таблица состоит из одной строки и двух ячеек.
3. Первая ячейка должна иметь ширину width равную 180 пикселам.
4. Для второй ячейки выравнивание текста align должно быть задано left и
вертикальное выравнивание valign установлено top.
Ваш код должен выглядеть следующим образом:
<table cellspacing=0 cellpadding=0 width="100%" height="100%">
<tr>
<td width="180px">
</td>
<td align="left" valign="top">
</td>
</tr>
</table>
5. Перетащите элемент управления pnlTreeView Panel и все его содержимое в первую
ячейку.
Создайте источник данных SqlDataSource для элемента управления GridView
1. Из раздела Data (данные) Toolbox перетащите элемент управления SqlDataSource
во вторую ячейку.
2. Установите следующие свойства для элемента управления SqlDataSource.
Атрибут
Значение
(ID)
EmployeesByRegion
ConnectionString
<%$ ConnectionStrings: NWindConn %>
SelectCommand
DataSourceMode
sp_GetEmployeesByRegion
DataReader
SelectCommandType
StoredProcedure
Ваш код должен выглядеть следующим образом:
<asp:SqlDataSource ID="EmployeesByRegion" runat="server" ConnectionString="<%$
ConnectionStrings:NWindConn %>" SelectCommand="sp_GetEmployeesByRegion"
DataSourceMode="DataReader"
SelectCommandType="StoredProcedure"></asp:SqlDataSource>
3. Добавьте элемент SelectParameters в элемент управления SqlDataSource.
4. Добавьте элемент управления ControlParameter в элемент SelectParameters.
5. Установите следующие свойства элемента управления ControlParameter.
Атрибут
Значение
(Name)
ConvertEmptyStringToNulll
PropertyName
ControlID
RegionID
False
SelectedValue
RegTerrTree
Ваш код должен выглядеть следующим образом:
<SelectParameters><asp:ControlParameter Name="RegionID"
ConvertEmptyStringToNull="False" PropertyName="SelectedValue"
ControlID="RegTerrTree">
</asp:ControlParameter></SelectParameters>
6. Из раздела Data Toolbox перетащите элемент управления SqlDataSource во
вторую ячейку.
7. Установите следующие свойства для элемента управления SqlDataSource.
Атрибут
Значение
(ID)
ConnectionString
SelectCommand
DataSourceMode
EmployeesByTerritory
<%$ ConnectionStrings: NWindConn %>
sp_GetEmployeesByTerritory
DataReader
SelectCommandType
StoredProcedure
Ваш код должен выглядеть следующим образом:
<asp:SqlDataSource ID="EmployeesByTerritory" runat="server" ConnectionString="<%$
ConnectionStrings: NWindConn %>" SelectCommand="sp_GetEmployeesByTerritory"
DataSourceMode="DataReader"
SelectCommandType="StoredProcedure">
</asp:SqlDataSource>
8. Добавьте элемент SelectParameters в элемент управления SqlDataSource.
9. Добавьте элемент управления ControlParameter в элемент SelectParameters.
10. Установите следующие свойства элемента управления ControlParameter.
Атрибут
Значение
(Name)
ConvertEmptyStringToNulll
PropertyName
TerritoryID
False
SelectedValue
ControlID
RegTerrTree
Ваш код должен выглядеть следующим образом:
<SelectParameters><asp:ControlParameter Name="TerritoryID"
ConvertEmptyStringToNull="False" PropertyName="SelectedValue"
ControlID="RegTerrTree">
</asp:ControlParameter></SelectParameters>
Создание элемента управления GridView
1. Из раздела Data Toolbox перетащите элемент управления GridView во вторую
ячейку таблицы.
2. Установите следующие свойства для элемента управления GridView
Атрибут
Значение
(ID)
DataSourceID
Width
AutoGenerateColumns
GridviewRegion
EmployeesByRegion
100%
False
Ваш код должен выглядеть следующим образом:
<asp:GridView ID="GridviewRegion" runat="server" DataSourceID="EmployeesByRegion"
Width="100%" AutoGenerateColumns="False">
</asp:GridView>
3. Добавьте элемент Columns в элемент управления GridView.
<Columns>
</Columns>
4. Добавьте элемент управления BoundField в коллекцию Columns для фамилий
работников.
Ваш код должен выглядеть следующим образом:
<asp:BoundField></asp:BoundField>
5. Установите следующие свойства для элемента управления BoundField.
Атрибут
Значение
DataField
HeaderText
LastName
Last Name
Ваш код должен выглядеть следующим образом:
<asp:BoundField DataField="LastName" HeaderText="Last Name">
</asp:BoundField>
6. Добавьте элемент управления BoundField в коллекцию Columns для имен
работников.
7. Установите следующие свойства для элемента управления BoundField.
Атрибут
Значение
DataField
HeaderText
FirstName
First Name
Ваш код должен выглядеть следующим образом:
<asp:BoundField DataField="FirstName" HeaderText="First Name">
</asp:BoundField>
8. Добавьте элемент управления BoundField в коллекцию Columns для званий
работников.
9. Установите следующие свойства для элемента управления BoundField.
Атрибут
Значение
DataField
HeaderText
Title
Title
Ваш код должен выглядеть следующим образом:
<asp:BoundField DataField="Title" HeaderText="Title">
</asp:BoundField>
10. Из раздела Data Панели инструментов перетащите элемент управления GridView
во вторую ячейку таблицы.
11. Установите следующие свойства для элемента управления GridView
Атрибут
Значение
(ID)
DataSourceID
Width
AutoGenerateColumns
GridviewTerritory
EmployeesByTerritory
100%
False
Ваш код должен выглядеть следующим образом:
<asp:GridView ID="GridviewTerritory" runat="server"
DataSourceID="EmployeesByTerritory" Width="100%"
AutoGenerateColumns="false">
</asp:GridView>
12. Добавьте элемент Columns в элемент управления GridView
<Columns>
</Columns>
13. Добавьте элемент управления BoundField в коллекцию Columns для фамилий
работников.
Ваш код должен выглядеть следующим образом:
<asp:BoundField></asp:BoundField>
14. Установите следующие свойства для элемента управления BoundField
Атрибут
Значение
DataField
HeaderText
LastName
Last Name
Ваш код должен выглядеть следующим образом:
<asp:BoundField DataField="LastName" HeaderText="Last Name">
</asp:BoundField>
15. Добавьте элемент управления BoundField в коллекцию Columns для имен
работников.
16. Установите следующие свойства для элемента управления BoundField
Атрибут
Значение
DataField
HeaderText
FirstName
First Name
Ваш код должен выглядеть следующим образом:
<asp:BoundField DataField="FirstName" HeaderText="First Name">
</asp:BoundField>
17. Добавьте элемент управления BoundField в коллекцию Columns для званий
работников.
18. Установите следующие свойства для элемента управления BoundField
Атрибут
Значение
DataField
HeaderText
Title
Title
Ваш код должен выглядеть следующим образом:
<asp:BoundField DataField="Title" HeaderText="Title">
</asp:BoundField>
Просмотр страницы Sales.aspx
1. Для того, чтобы сохранить страницу Sales.aspx, в меню File выберите Save
Sales.apsx.
2. В любом месте странички кликните правой кнопкой мышки и выберите View in
Browser.
3. Просмотрите результаты, разворачивая узлы элемента управления TreeView
Regions & Territories
4. Закройте браузер.
5. В меню File выберите Close Project и оставьте Visual Studio открытой для
выполнения следующего упражнения.
Упражнение 3
Модификация элемента управления GridView для обновления
данных.
Сценарий
В этом упражнении, вы будете менять элемент управления GridView и модифицировать
данные работника.
Исследование по поводу эффективности корпоративного коммерческого сайта Adventure
Works указало, что возникла необходимость сосдания отдела, который будет
модифицировать информацию о работниках в Веб-форме.
Ваша группа Веб-разработчиков должна добавить и изменить атрибуты в GridView,
чтобы обеспечить пользователей сайта возможностью модифицировать информацию в
Веб-Форме.
 Откройте Веб-узел.
1. В среде Visual Studio, в меню File, щелкните Open Web Site.
2. Выберите путь к папке ~LabFiles\Starter\language\Ex3 а затем нажимайте Open.
 Измените элемент управления SqlDataSource.
1. В Проводнике Решения (Solution Explorer), дважды щелкните страницу Sales.aspx.
Это действие открывает страницу Sales.aspx в основном окне.
2. Щелкните элемент управления SqlDataSource с идентификатором
EmployeesByRegion.
3. Установите следующее свойство элемента управления EmployeesByRegion.
Атрибут
Значение
UpdateCommand
UPDATE Employees SET FirstName = @FirstName, LastName =
@LastName, Title = @Title WHERE EmployeeID = @EmployeeID
Ваш код должен выглядеть следующим образом:
<asp:SqlDataSource ID="EmployeesByRegion" runat="server" ConnectionString="<%$
ConnectionStrings:NWindConn %>" SelectCommand="sp_GetEmployeesByRegion"
DataSourceMode="DataReader" UpdateCommand="UPDATE Employees SET FirstName =
@FirstName, LastName = @LastName, Title = @Title WHERE EmployeeID = @EmployeeID"
SelectCommandType="StoredProcedure"><SelectParameters>
4. Щелкните EmployeesByTerritory элемента управления SqlDataSource.
5. Установите следующее свойство EmployeesByTerritory элемента управления
SqlDataSource.
Атрибут
Значение
UpdateCommand
UPDATE Employees SET FirstName = @FirstName, LastName =
@LastName, Title = @Title WHERE EmployeeID = @EmployeeID
Ваш код должен выглядеть следующим образом:
<asp:SqlDataSource ID="EmployeesByTerritory" runat="server" ConnectionString="<%$
ConnectionStrings:NWindConn %>" SelectCommand="sp_GetEmployeesByTerritory"
DataSourceMode="DataReader" UpdateCommand="UPDATE Employees SET FirstName =
@FirstName, LastName = @LastName, Title = @Title WHERE EmployeeID = @EmployeeID"
SelectCommandType="StoredProcedure"><SelectParameters>
 Измените элемент GridView.
1. Щелкните элемент управления GridviewRegion.
2. Установите следующие свойства элемента управления GridView.
Атрибут
Значение
DataKeyNames
AutoGenerateSelectButton
AutoGenerateEditButton
EmployeeID
false
true
Ваш код должен выглядеть следующим образом:
<asp:GridView ID="GridviewRegion" runat="server" DataSourceID="EmployeesByRegion"
Width="100%" AutoGenerateColumns="false" DataKeyNames="EmployeeID"
AutoGenerateSelectButton="false" AutoGenerateEditButton="true">
3. Щелкните на элементе управления GridView с идентификатором GridviewTerritory.
4. Установите следующие свойства элемента управления GridView.
Атрибут
Значение
DataKeyNames
AutoGenerateSelectButton
AutoGenerateEditButton
EmployeeID
false
true
Ваш код должен выглядеть следующим образом:
<asp:GridView ID="GridviewTerritory" runat="server"
DataSourceID="EmployeesByTerritory"
Width="100%" AutoGenerateColumns="false" DataKeyNames="EmployeeID"
AutoGenerateSelectButton="false" AutoGenerateEditButton="true">
 Просмотрите страницу Sales.aspx.
1. Чтобы сохранить страницу Sales.aspx, кликните меню File, а затем - Save Sales.apsx.
2. Кликните правой кнопкой где-нибудь на странице Sales.aspx, а затем выберите View in
Browser.
3. Выберите регион или территорию, а затем щелкните Edit в элементе управления
GridView.
4. Измените заголовок для выбранного работника, а затем кликните Update (Обновить).
5. СОДЕРЖАНИЕ ОТЧЕТА
В отчете должны быть представлены:
 исходный код;
 результат выполненной работы в виде скриншотов.