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

Серверные элементы управления (СЭУ) HTML - элементы языка разметки гипертекста (HTML), которые включают runat = server атрибут.

По умолчанию HTML-элементы в файле ASP.NET рассматриваются как обычный текст, и на них нельзя ссылаться в коде на стороне сервера. Чтобы сделать эти элементы программно доступными, можно указать, что HTML-элемент должен рассматриваться как СЭУ. Для этого следует добавить атрибут runat="server". Можно также задать атрибут id ЭУ, чтобы получить возможность программно ссылаться на ЭУ. Затем нужно установить атрибуты для объявления аргументов свойства и связи с событиями в экземплярах серверного элемента управления. Серверные HTML-элементы управления должны располагаться во внешнем теге form, имеющем атрибут runat="server".

Преимущества:

Отображаются один к одному с их соответствующими HTML-тегами.

При компиляции приложения ASP.NET, СЭУ HTML компилируются в сборки.

Большинство ЭУ включают OnServerEvent для наиболее часто используемых событий. Например < input type = button > у события OnServerClick элемента управления.

По-прежнему можно использовать теги HTML, но они не реализованы как конкретные СЭУ HTML на стороне сервера; тем не менее они добавляются в сборку как HtmlGenericControl.

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

Пример кода HTML для кнопки на форме: <asp:Button ID="Button1" runat="server" Text="Button" />

Здесь атрибут runat="server" означает, что ЭУ, для которого использован такой атрибут, становится доступным из программного кода в файле codebehind, а на события этого элемента управления реагирует сервер. Если этот атрибут убрать, то ЭУ станет обычным элементом управления HTML.

Отличия СЭУ ASP.NET от обычных ЭУ HTML:

- в ответ на события СЭУ(например, на нажатие кнопки) срабатывает событийная процедура на сервере, в которой можно определить любой требуемый код. При этом работа с СЭУ основана на стандартной модели событий для этих элементов, что делает ее очень похожей на работу с ЭУ Windows: например, используются те же события Click, Load и т.п.;

- в коде HTML для СЭУ используется префикс пространства имен XML, который выглядит как asp. Например: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>;

- для СЭУ обязательно сохраняется информация о состоянии. Отличия наглядно видны при обновлении страницы. Для СЭУ установленные пользователем значения по умолчанию сохранятся, а для обычных ЭУ HTML будут загружены исходные значения;

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

Наиболее часто используемые СЭУ:

HtmlAnchor - гипер-ссылка

HtmlBotton - кнопка

HtmlForm - форма страницы

HtmlImage - графическое изображение

HtmlTable - элемент управления "Таблица"

30 Серверные элементы управления Web. Использование элементов управления Web. Немедленная отправка данных. Серверные элементы

Серверные веб-элементы управления ASP.NET – это объекты на веб-страницах ASP.NET, которые выполняются при запросе страницы и подготавливают ее к просмотру в обозревателе. Многие серверные веб-элементы управления похожи на HTML-элементы, напр., кнопки и текстовые поля. Другие элементы управления охватывают сложное поведение, например элементы управления календарем, элементы управления для подключения к источникам данных и отображения данных.

Веб-элементы управления обладают всеми функциональными возможностями серверных HTML-элементов управления (кроме взаимнооднозначного сопоставления с элементами), а также следующими дополнительными возможностями:

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

Автоматическое обнаружение обозревателя.Элементы управления могут обнаруживать возможности обозревателя и отображать соответствующую разметку.

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

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

Поддержка тем, позволяющая определить согласованный вид для элементов управления по всему узлу.Дополнительные сведения см. в разделе ASP.NET Themes and Skins.

Возможность передавать события из вложенного элемента управления (такого как кнопка в таблице) в контейнерный элемент управления

Виды серверных элементов управления:

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

Элементы управления данными в панели элементов

Проверяющие элементы управления в панели элементов

Навигационные элементы управления панели элементов

Элементы управления вкладки "Вход в систему" панели элементов

Элементы управления HTML веб-страницами ASP.NET

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

Управляющие элементы-расширители Microsoft Ajax

Синтаксис элементов управления:

<asp:button attributes runat="server" id="Button1" />

Использование веб-элементов:

1. Объявление

<!-- Textbox Web server control -->

<asp:textbox id="TextBox1" runat="Server" Text=""></asp:textbox>

<!-- Same, but with self-closing element -->

<asp:textbox id="Textbox2" runat="Server" Text="" />

<!-- Web DropDownList control, which contains subelements -->

<asp:DropDownList id="DropDown1" runat="server">

<asp:ListItem Value="0">0</asp:ListItem>

<asp:ListItem Value="1">1</asp:ListItem>

<asp:ListItem Value="2">2</asp:ListItem>

<asp:ListItem Value="3">3</asp:ListItem>

</asp:DropDownList>

<asp:Repeater id="Repeater2" runat="server">

<HeaderTemplate>

Company data:

</HeaderTemplate>

<ItemTemplate>

<asp:Label ID="Label1" runat="server"

Font-Names="verdana" Font-Size="10pt"

Text='<%# Eval("Name") %>' />

( <asp:Label ID="Label2" runat="server"

Font-Names="verdana" Font-Size="10pt"

Text='<%# Eval("Ticker") %>'/>

)

</ItemTemplate>

<SeparatorTemplate>

,

</SeparatorTemplate>

</asp:Repeater>

2. Задание свойств

На веб-странице ASP.NET задайте атрибут объявления элемента управления, соответствующий нужному свойству.

Задаваемый точный атрибут зависит от элемента управления и от свойства. Сведения о свойствах конкретного элемента управления можно просмотреть, выполнив поиск по имени класса элемента управления (например, «Класс Button (System.Web.UI.WebControls)» в указателе справки.

В следующем примере показано, как установить свойство MaxLength элемента управления TextBox.

<asp:textbox id="TextBox1" runat=server maxlength=20 />

3. Добавление элементов программными средствами.

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

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

В некоторых случаях может понадобиться одновременное создание статического текста и элементов управления. Для создания статического текста можно использовать серверные веб-элементы управления Literal или Label.

Создайте экземпляр элемента управления и задайте его свойства, как показано в следующем примере:

C#

Label myLabel = new Label();

myLabel.Text = "Sample Label";

Добавьте новый элемент управления к коллекции Controls контейнера, который уже находится на странице, как показано в следующем примере:

C#

Panel Panel1= new Panel();

Panel1.Controls.Add(myLabel);

В следующем примере кода показан обработчик событий SelectedIndexChanged элемента управления с именем DropDownList1. Обработчик создает выбранное пользователем в раскрывающемся списке количество элементов управления «Метка». Контейнером для элементов управления является серверный веб-элемент управления PlaceHolder с именем Placeholder1.

private void DropDownList1_SelectedIndexChanged(object sender, System.EventArgs e)

{

DropDownList DropDownList1 = new DropDownList();

PlaceHolder PlaceHolder1 = new PlaceHolder();

// Get the number of labels to create.

int numlabels = System.Convert.ToInt32(DropDownList1.SelectedItem.Text);

for (int i=1; i<=numlabels; i++)

{

Label myLabel = new Label();

// Set the label's Text and ID properties.

myLabel.Text = "Label" + i.ToString();

myLabel.ID = "Label" + i.ToString();

PlaceHolder1.Controls.Add(myLabel);

// Add a spacer in the form of an HTML <br /> element.

PlaceHolder1.Controls.Add(new LiteralControl("<br />"));

}

}

Немедленная передача значений элементов управления на сервер

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

Присвойте свойству AutoPostBack элемента управления значение true.

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