Опубликован: 13.07.2010 | Уровень: специалист | Доступ: платный
Самостоятельная работа 4:

Управление Web-элементами в ASP.NET

Аннотация: Распознавание браузера. Сравнение html-элементов и Web-элементов. Web-элементы и их программирование. Этапы взаимодействия броузера и сервера в ASP.NET. Модель событий Web-форм. Обработка страницы. Web-элементы управления Label, TextBox,Button, HyperLink, CheckBox, CheckBoxList, RadioButton, RadioButtonList, DropDownList, ListBox. Обмен списков данными. Привязка Web-элементов управления к базе данных. Web-элемент AdRotator для управления рекламными баннерами.
Ключевые слова: Web, standard, Toolbox, visual, net, ASP, ПО, www-броузер, сервер, netscape, navigation, Internet Explorer, HTML-код, Windows-приложения, оболочка, атрибут, элементы управления, WebControl, класс, очередь, ImageButton, hyperlink, DataGrid, сохранение данных, DataList, repeatability, checkbox, placeholder, Calendar, AdRotator, equalizer, XML-документ, XSL, literal, crystal, Report, SiteMapPath, Menu, TreeView, JIT, Actions, протокол передачи гипертекста, HTTP, память, сеанс работы, информация, State, пользователь, отправка, AutoPostBack, сценарий, init, исключительная ситуация, requester, Состояние сеанса, trace, BorderStyle, 'dotted', tooltip, horizontal, rule, outliner, значение, true, enter, change-over, группа, список, vertical, таблица, перегрузка, линия связи, дизайн, композиция, actor, submit, позиционирование, layout, merge, cell, justify, multiplication, этапы проектирования, списки значений, resource, создание каталогов, события элемента управления, серверные элементы управления, загрузка данных, data binding, связывание, привязка данных, база данных, advertising, rotate, конфигурационный файл, XML, баннер, фрейм, всплывающая подсказка, keyword, карта размещения, JPG, book, detailed, caption, сокет, Grid, ассоциативность, CAL, present-day, man-month, underline, Full

Файлы к лабораторной работе Вы можете скачать здесь.

Web-элементы размещены на вкладке Standard панели Toolbox среды Visual Studio .NET. В дальнейшем будем их называть просто серверными Web-элементами, поскольку они разработаны специально для поддержки сервером ASP.NET страниц. По сравнению с серверными html-элементами, Web-элементы имеют больше функциональных возможностей высокого уровня и автоматически приспосабливаются к типу броузера клиента, посетившего страницу.

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

Распознавание броузера

В мире существует множество различных типов броузеров, хотя наибольшее распространение имеют только два: Netscape Navigator и Microsoft Internet Explorer. Но разработчик должен стремиться к возможности корректного отображения его страницы на наибольшем количестве броузеров. Простой html-код не дает таких возможностей.

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

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

Сравнение html-элементов и Web-элементов

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

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

<asp:Label [attributes]>Hello World!</asp:Label>

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

Microsoft дает следующие рекомендации
Тип элемента управления Когда следует использовать
Web-элемент управления
  • Когда требуется более богатый набор функциональных возможностей для выполнения сложных требований страницы
  • При разработке Web-страниц, которые будут просматриваться разными типами броузеров, требующих разного html-кода
  • Когда разработчик хочет программировать с использованием современного языка C#
html-элемент управления
  • При преобразовании традиционных Web-страниц ASP в Web-страницы ASP.NET и когда большое значение имеет быстродействие. Элементы html намного проще превратить в серверные html-элементы, чем Web-элементы управления
  • Когда требуется явное управление html-кодом, сгенерированным для конкретного типа броузера

Web-элементы и их программирование

Наконец-то Web-страницы со сложной функциональностью можно программировать в том же стиле, как это делается при создании локальных Windows-приложений с использованием компонентов. При помещении Web-компонента на Web-форму оболочка автоматически генерирует в нем атрибут runat="server". Это означает, что элемент и сопутствующий ему код обязательно будут обработаны сервером.

Все элементы управления вкладки Standard поддерживаются классами, размещенными в простанстве имен System.Web.UI.WebControls. Они произведены от общего класса WebControl, а значит наследуют все его свойства и методы. Сам же класс WebControl наследует, в свою очередь, от класса Control. В таблице перечислены все элементы управления, содержащиеся во вкладке Standard панели Toolbox.

Список некоторых Web-элементов управления
Компонент Web-элемент Описание

<asp:Label...>

Генерирует текст, который пользователь не может редактировать непосредственно
<asp:TextBox...> Генерирует традиционное текстовое поле html
<asp:Button...> Используется для выполнения задачи или инициализации события, а также для передачи формы на сервер
<asp:LinkButton...> Имеет функциональные возможности элемента Button, но выглядит как гиперссылка
<asp:ImageButton...> Имеет функциональность кнопки Button но с произвольным изображением
<asp:HyperLink...> Генерирует традиционную гиперссылку с расширенными свойствами и функциональностью
<asp:DropDownList...> Представляет собой программируемый выпадающий список с возможностью выбора только одного элемента
<asp:ListBox...> Похож на элемент DropDownList, но отличается тем, что пользователь может видеть не один, а сразу несколько элементов списка. В нем можно позволить одновременный выбор сразу нескольких элементов.
<asp:DataGrid...> Предназначен для управляемого отображения информации из источника баз данных. Таблицы можно создавать с возможностью редактирования, сортировки и сохранения данных
<asp:DataList...> Элемент управления списка, который позволяет отображать информацию, привязанную к данным. При выборе параметров отображения используется настраиваемый шаблон.
<asp:Repeater...> Элемент управления списка, который позволяет отображать связанную с данными информацию, используя любое количество элементов управления в качестве шаблона.
<asp:CheckBox...> Генерирует традиционный управляемый флажок с широкими возможностями настройки свойств и функциональностью
<asp:CheckBoxList...> Группа флажков, в которой можно сделать сразу несколько выборов
<asp:RadioButtonList...> Генерирует группу радиокнопок, в которой пользователь может отметить только один переключатель из группы
<asp:RadioButton...> Генерирует одну радиокнопку
<asp:Image...> Управляет отображением рисунка
<asp:Panel...> Создает невидимый раздел в пределах формы, который выполняет функцию контейнера для других элементов управления
<asp:PlaceHolder...> Оставляет место в иерархии элементов управления страницы для добавления нового элемента программным путем
<asp:Calendar...> Сложный элемент управления, отображающий календарь и позволяющий пользователю выбрать дату, которая сможет инициировать событие на странице
<asp:AdRotator...> Отображает заданный набор рисунков в определенном порядке. Последовательность изображений можно сделать случайной.
<asp:Table...> Управляет представлением таблицы в стиле обычной html-таблицы
<asp:RequiredFieldValidator...> Проверяет, не было ли пропущено пользователем это поле при вводе им данных
<asp:CompareValidator...> Этот элемент производит сравнение введенного значения с некоторой заданной величиной, используя оператор сравнения (equals, greater, then, less than и т.д.)
<asp:RangeValidator...> Элемент проверяет ввод пользователя, основываясь на диапазоне допустимых значений
<asp:RegularExpressionValidator...> Проверяет соответствие ввода пользователя некоторому предопределенному шаблону, например, правильности формата вводимых адресов электронной почты, номера телефона.
<asp:CustomValidator...> Этот элемент проверяет ввод пользователя на соответствие некоторой заданной логике
<asp:ValidationSummary...> Этот элемент отображает в отведенном для этого на странице месте все сообщения об ошибках
<asp:Xml...> Отображает XML-документы и позволяет XSL-документам преобразовывать их
<asp:Literal...> Позволяет размещать на странице статический текст и программировать его свойства. В отличие от элемента Label, к нему нельзя применять стили.
<CR:CrystalReportViewer...> Инструмент для просмотра отчетов, сгенерированных по технологии Crystal Reports.NET
<asp:SiteMapPath...> Карта сайта
<asp:Menu...> Меню
<asp:TreeView...> Дерево просмотра сайта

Этапы взаимодействия броузера и сервера в ASP.NET

Рассмотрим механизм работы ASP.NET по шагам на примере простой формы с текстовым полем и кнопкой типа submit, при нажатии на которую должно быть сгенерировано привествие.


  1. Пользователь запрашивает Web-страницу .aspx посредством броузера, набрав ее URL
  2. При поступлении запроса на сервер среда выполнения ASP.NET запускает приложение, если оно до этого не было запущено запросами других пользователей, и загружает предварительно скомпилированную сборку со страницей. Затем сборка окончательно компилируется JIT-компилятором ( just-in-time = " как раз вовремя ") в машинный код конкретной машины-сервера и подается на выполнение. Результатом выполнения является обычная страница на html-коде, которая отсылается Web-броузеру как отклик на запрос. В странице сгенерирован текст, поле ввода и кнопка submit, которые заключины в тег <form>...</form>
  3. Броузер интерпретирует html-код и отображает на экране простую форму <form>...</form> с элементами пользовательского интерфейса. Поскольку форма отображается впервые, текстовое поле еще не заполнено и приветствие отсутствует
  4. Пользователь вводит свое имя и щелкает по кнопке. Броузер распознает, что это была нажата кнопка submit (отправить). Форма по умолчанию использует метод "post" (отправить почтовое сообщение) и отправляет данные формы целевому файлу для обработки. Поскольку нами в теге <form> атрибут action указан не был, то целевой страницей для обработки будет считаться все тот же запрошенный ранее файл .aspx
  5. Теперь сервер вновь обрабатывает страницу. В этот раз событие было инициировано щелчком пользователя по кнопке и на сервере выполняется заготовленный нами обработчик события
  6. Для считывания имени, введенного пользоваателем в текстовое поле, в обработчике события нажатия кнопки применяется свойство Text серверного Web-элемента управления TextBox. Эта строка присоединяется к свойству Text элемента отображения Label, который мы заранее поместили на страницу
  7. Сервер снова генерирует стандартный html-код с учетом возможностей броузера и отсылает ему полный ответ на чистом html
  8. Броузер воспроизводит присланный ответ и на этот раз отображается также и приветствие

Состояние вида

Протокол передачи гипертекста HTTP не хранит информацию о сотоянии формы. При любом поступившем на сервер запросе страница загружается в память как в первый раз и устанавливается в начальное состояние. Но странице в текущем сеансе работы с пользователем может загружаться не впервые и иметь текущее состояние, отличное от начального.

Информация о сотоянии Web-формы называется состоянием представления или состоянием вида (view state). Среда исполнения ASP.NET, если ей указать, может автоматически сохранять состояние вида Web-формы либо на сервере, либо на клиенте. Такие возможности называются управлением сеансами или состоянием приложения. Для сохранения на клиенте состояние вида упаковывается в скрытые текстовые поля типа

<input type="hidden" name="__VIEWSTATE" value="......." />

Модель событий Web-форм

С точки зрения программиста, работа событий Web-форм и Windows-форм очень похожи. Но, по сути, события Web-форм сильно отличаются от событий Windows-форм. Самое существенное отличие состоит в том, что события Web-форм преимущественно инициируются клиентом, а обрабатываются сервером.

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

Наибелее часто из событий автоматического обращения к серверу используется событие щелчка на кнопке. Другие события, например, выбор элемента из списка, установка или сброс флажка, не приводят к немедленному обращению к серверу (если только их свойство AutoPostBack не было установлено в True ). Такого рода события накапливаются в буфере броузера до тех пор, пока событие щелчка на кнопке не вызовет отправку сообщения на сервер вместе с накопленными событиями. Получив обратную отсылку, сервер распознает накопленные события, изменяющие состояние элементов формы, и обрабатывает их, причем последовательность обработки поступивших событий произвольная.

Обработка страницы

Страница совместно обрабатывается Web-сервером, средой выполнения ASP.NET и кодом фонового файла или кодом, включенным в страницу как сценарий. Наследуемый класс System.Web.UI.Page содержит ряд событий, методов и свойств, с помощью которых можно управлять обработкой страницы. В процессе стандартной обработки страницы на сервере происходит ряд событий уровня всей страницы.

События класса Page

  • Init (Восстановление) - возникает при инициализации самой страницы как экземпляра класса Page. Информация о состоянии элементов управления еще отсутствует
  • Load (Загрузка) - возникает при загрузке элементов управления на страницу. На данном этапе уже имеется информация о состоянии вида этих элементов управления
  • PreRender (Предвизуализация) - возникает непосредственно перед воспроизведением (отображением) элементов управления в выходном потоке. Это событие можно использовать для начала генерации html-вывода собственными элементами управления
  • Unload (Выгрузка) - возникает, когда элементы управления выгружаются из страницы, формирование выходного потока завершено и записывать в него свои собственные данные уже поздно

Свойства класса Page

  • EnableViewState - указывает, разрешено ли сохранять состояния представлениям самой страницы и ее элементам управления. По умолчанию это свойство имеет значение true, т.е. сохранять состояния разрешено. Но можно управлять этим свойством.
  • ErrorPage - указывает страницу, на которую будет перенаправлен броузер при возникновении непредвиденной исключительной ситуации.
  • IsPostBack - указывает, загружается ли страница впервые или повторно в данном сеансе связи. Перед первой загрузкой равно false, после первой загрузки становиться равным true. Очень удобно применять для инициализации элементов управления в функции Page_Load().
  • IsValid - указывает, была ли успешной проверка правильности страницы.
  • Request (Запрос) - получает HTTP-объект Request, который предоставляет доступ к данным входных запросов, поступающих по протоколу передачи гипертекстовых файлов HTTP.
  • Response (Ответ) - получает HTTP-объект Response, который отсылает запрошенные данные броузеру.
  • Session (Сеанс) - получает текущий объект Session, в котором ASP.NET хранит состояние сеанса.
  • Trace (Трассировка) - получает объект TraceContext страницы, в котором записана трассировочная информация.

Приступим к разработке демонстрационных страниц с использованием высокоразвитых Web-элементов из вкладки Standard панели Toolbox. Создадим проект с начальной страницей и далее будем добавлять к нему все новые страницы, на которых будем размещать те или иные Web-элементы управления.

Иван Циферблат
Иван Циферблат
Россия, Таганрог, 36, 2000