Опубликован: 14.11.2006 | Доступ: свободный | Студентов: 5899 / 535 | Оценка: 4.18 / 3.74 | Длительность: 16:37:00
ISBN: 978-5-9556-0085-7
Лекция 3:

Серверные элементы управления

< Лекция 2 || Лекция 3: 123456 || Лекция 4 >
Аннотация: Дается обзор классов элементов управления ASP .NET и их сравнение с HTML. Работа с дизайнером форм.

Одна из самых важных задач web-разработчика — получение и обработка данных, введенных пользователем. Информация посылается серверу через форму. Форма содержит элементы управления, которые позволяют различными способами вводить информацию.

Формы применяются в большинстве сайтов. Например, если вы пишете письмо в web-интерфейсе, появляется форма с текстовыми полями, соответствующими адресату, теме и тексту письма. Нажатием на кнопку можно добавить прилагаемый файл и окончательно послать письмо кнопкой Send.

Форма HTML содержит теги, такие как текстовое поле, выпадающий список, переключатели ( radiobuttons ) и флажки ( checkbox ), кнопки.

Формы ASP .NET отличаются от обычных форм наличием свойства runat="server". Они обрабатываются ASP .NET на сервере. Формы являются одним из полей страницы. На странице находятся элементы управления. Многие из них должны быть расположены внутри формы. ASP.NET позволяет запоминать состояние элементов управления, то есть текст, который был введен в текстовое поле, или выбранный переключатель, передавать его на сервер и обратно на страницу после ее обновления:

<form ID="FormVote" runat="server"></form>

Все формы обрабатываются методом POST. Атрибут Action можно задавать, но не обязательно. По умолчанию это текущая страница.

У элементов управления ASP .NET тоже имеется свойство runat="server". Второй обязательный атрибут — это его идентификатор, или ID. Он нужен, чтобы обращаться к элементу в программе, то есть это имя члена страницы, по которому мы можем его идентифицировать. Примеры мы уже видели в предыдущих лекциях.

Перечислим группы элементов управления:

  • Элементы управления HTML.

Элементы управления HTML являются наследниками класса System.Web.UI.HtmlControls.HtmlControl. Они непосредственно отображаются в виде элементов разметки HTML. Их отображение не зависит от типа браузера. Свойства таких элементов полностью соответствуют атрибутам тегов HTML.

Сравните обычный тег

<input id="Reset1" type="reset" value="reset" />

с элементом управления HTML

<input id="Reset1" runat="server" type="reset" value="reset" />

Разница заключается только в наличии атрибута runat="server". Но он дает колоссальную разницу. Теги сервер отображает как есть, а элементом управления можно манипулировать в коде. Только во втором случае в функции-методе страницы можно написать

Reset1.Value = "АСП";

что равносильно

this.Reset1.Value = "АСП";

Следовательно, Reset1 становится одним из членов класса страницы.

Эти классы используют, если необходимо получить определенные теги HTML или если нужно конвертировать старые страницы asp. Элементы управления HTML можно размещать на одной странице вперемешку с серверными элементами.

  • Стандартные или серверные элементы управления.

Серверные элементы мощнее, потому что они привязаны не к разметке, а к функциональности, которую нужно обеспечить. Многие элементы не имеют аналогов в HTML, например, календарь. Их отрисовка полностью контролируется ASP .NET. Перехватывая события PreRender, Init, Load, можно вмешаться в этот процесс. Объявления серверного элемента управления начинаются с блока <asp:тип> и заканчиваются </asp:тип>

Например:

<asp:Label ID="Label1" runat="server" Text="Hello 
World"></asp:Label>

Возможно также закрыть объявление тегом />, если внутри блока нет текста:

<asp:Label ID="Label1" Runat="server" Text="Hello World" />

Свойства этих элементов строго типизированы, в отличие от HTML-элементов.

В этой таблице приведены элементы управления, которые имеют пару среди тегов HTML. Вообще их гораздо больше. Некоторые элементы генерируют не только HTML-код, но и JavaScript. В ASP .NET 2.0 было добавлено множество новых сложных элементов управления, например, MultiView, TreeView, Wizard, GridView. О возможностях одного только GridView можно написать целую статью.

Таблица соответствия некоторых серверных элементов управления тегам HTML

Элемент управления ASP .NET Соответствующий тег HTML Назначение
<asp:Label> <Span> Отобразить текст
<asp:ListBox> <Select> Список выбора
<asp:DropDownList> <Select> Выпадающий список
<asp:TextBox> <Input Type="Text"> <Input Type="Password"> <Textarea> Строка редактирования Поле редактирования
<asp:HiddenField> <Input Type="Hidden"> Невидимое поле
<asp:RadioButton>,
<asp:RadioButtonList> <Input Type="Radio"> Переключатель, список переключателей
<asp:CheckBox>,
<asp:CheckBoxList> <Input Type="CheckBox"> Флажок, список флажков
<asp:Button> <Input Type="button"> <Input Type="submit"> Командная кнопка
<asp:Image> <img> Изображение
<asp:ImageButton> <input type="image"> Кнопка-изображение
<asp:Table> <Table> Таблица
<asp:Panel> <Div> Контейнер
<asp:BulletedList> <ul>,<ol> Маркированный список
<asp:HyperLink> <A Href> Гиперссылка

Сервер не обязательно генерирует те же самые теги HTML для серверных элементов управления. Все зависит от типа браузера, который использует клиент.

Все серверные элементы управления находятся в пространстве имен System.Web.UI.Control и наследуются от класса System.Web.UI.Web Controls.WebControl.

Верификация введенных данных.

Их работа тесно связана с внешними источниками данных.

  • Навигация по сайту ( "Навигация по сайту" ).
  • Логины и пароли.
  • Web Parts.
  • Пользовательские (созданные вами лично).

Все существующие классы вы можете просмотреть с помощью Class Browser.

Во всех интегрированных средах разработки есть возможность добавлять элементы управления с помощью простого перетаскивания мышью.

Создайте новую форму и нажмите на вкладку Design — переход в режим проектирования. Из выпадающего меню View выберите пункт ToolBox. Элементов так много, что пришлось организовать их в виде дерева. Все нужные в этой лекции элементы управления находятся во вкладке Standard (Web Controls, если у вас WebMatrix). Кнопка F4 открывает окно "Свойство выделенного объекта", а двойной щелчок мышью автоматически создает обработчик наиболее типичного для данного элемента события.

Рассмотрим некоторые простейшие элементы.

< Лекция 2 || Лекция 3: 123456 || Лекция 4 >
Алексей Савельев
Алексей Савельев

https://technet.microsoft.com/en-us/library/ms143221(v=sql.105).aspx

Денис Прокофьев
Денис Прокофьев

Везде написано, что это самый независимый и простой в использовании навигационный элемент управления, что он работает сразу с web.sitemap и не требует определения SiteMapDataSource.

Моя карта сайта состоит из двух страниц, вложенных друг в друга. asp:Menu, asp:TreeView отбображаются как ожидалось, а вот asp:SiteMapPath - нет. Он не виден нигде. Однако на его месте формируется разметка: <span id="SiteMapPath1"><a href="#SiteMapPath1_SkipLink" style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;">Проход по ссылкам навигации</a><a id="SiteMapPath1_SkipLink"></a></span> - т.е. элемент отрабатывает.

В словах xHTML это выглядит так: <asp:SiteMapPath ID="SiteMapPath1" runat="server" />. Причем не важно - внутри тега form или снаружи - всегда одинаково.

Т.к. другие нав. ЭУ работают через простой источник данных без ошибок, делаю вывод - карта составлена правильно. ИД: <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

Карта: <?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="~/L11_1_simplePage.aspx" title="Страница 1"  description="Простая страница 1." >
    <siteMapNode url="~/L11_1SimplePage2.aspx" title="Страница 2"  description="Простая страница 2" />
  </siteMapNode>
</siteMap>

Почему так происходит? Вроде делаю все по примерам. VS Community 2015. NetFramework в проекте: v4.0.30319