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

112

В следующих разделах вы узнаете о серверных элементах управления HTML, определенных в пространстве имен System.Web.UI.HtmlControls. В целом существует около двух десятков отдельных классов серверных элементов управления HTML. Они разбиты на отдельные категории на основе того, являются они элементами управления вводом (в этом случае они унаследованы от HtmlInputControl) или же могут содержать другие элементы управления (тогда они являются производными от HtmlContainerControl).

На рисунке ниже показана иерархия наследования:

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

Класс HtmlControl

Все серверные элементы управления HTML являются производными от базового класса HtmlControl. Ниже перечислены свойства, добавленные классом HtmlControl к базовому классу Control:

Свойства класса HtmlControl
Свойство Описание
Attributes Позволяет читать и добавлять атрибуты дескриптора элемента управления. Эту коллекцию можно использовать для добавления атрибутов, не предоставляемых определенными свойствами. (Например, можно добавить атрибут onFocus к текстовому полю и указать какой-то JavaScript-код для настройки того, что будет происходить в результате передачи фокуса текстовому полю.)
Disabled Возвращает или устанавливает состояние доступности элемента управления. При значении true элемент управления становится неактивным
Style Возвращает коллекцию применяемых к элементу управления атрибутов CSS. В веб-странице значение этого свойства имеет вид разделенного точками с запятой списка атрибутов стиль:значение. В Visual Studio указать такое значение можно, щелкнув правой кнопкой мыши на элементе управления в режиме визуального конструктора и выбрав в контекстном меню пункт New Style (Новый стиль)
TagName Возвращает имя дескриптора элемента управления, например, a, img и т.п.

Класс HtmlContainerControl

Любой HTML-дескриптор, который имеет открывающий и закрывающий дескрипторы, может содержать другое содержимое либо элементы управления HTML. В качестве примера можно привести дескриптор ссылки, который обычно заключает текст или изображение в пару <a>.. .</a>. Многие другие HTML-дескрипторы также работают как контейнеры, включая все, начиная с <div> (форматирует блок или содержимое) и заканчивая скромным дескриптором <b> (выделяет текст полужирным начертанием). Эти дескрипторы не отображаются на определенные классы элементов управления HTML, но все же могут использоваться с атрибутом runat="server". В этом случае вы взаимодействуете с ними через класс HtmlGenericControl, который, в свою очередь, является производным от HtmlContainerControl.

Для поддержки включения класс HtmlContainerControl добавляет два свойства:

InnerHtml

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

InnerText

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

Класс HtmlInputControl

Элементы управления вводом HTML обеспечивают взаимодействие с пользователем. К ним относятся знакомые графические элементы управления — флажки, текстовые поля, кнопки и окна со списком. Все эти элементы управления генерируются с помощью дескриптора <input>. Атрибут type указывает тип элемента управления вводом, как в <input type="text"> (текстовое поле), <input type="submit"> (кнопка Submit (Отправить)), <input type="file"> (элементы управления для загрузки файла).

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

Type

Предоставляет тип HtmlInputControl. Например, если это свойство установлено в text (текст), HtmlInputControl является текстовым полем для ввода данных.

Value

Извлекает либо устанавливает значение, связанное с элементом управления вводом. Значение, ассоциированное с элементом управления, зависит от типа элемента управления. Например, в текстовом поле это свойство хранит текст, введенный в элементе управления. Для кнопок оно соответствует тексту кнопки.

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

В таблице ниже перечислены все доступные серверные элементы управления HTML и специфичные свойства и события, которые каждый элемент добавляет к базовому классу. Как упоминалось ранее, объявление серверных элементов управления HTML на странице дает тот же эффект, что и указание атрибута runat="server" в обычных статических HTML-дескрипторах. Именно этот атрибут позволяет ASP.NET обрабатывать их и транслировать в экземпляры соответствующего класса .NET. По этой причине серверные элементы управления HTML являются хорошим выбором при преобразовании существующей HTML- или ASP-страницы в веб-форму ASP.NET.

Классы серверных элементов управления HTML
Объявление дескриптора Класс .NET Специфичные члены
<а runat="server"> HtmlAnchor HRef, Target, Title, Name, событие ServerClick
<button runat="server"> HtmlButton CausesValidation, ValidationGroup, событие ServerClick
<form runat="server"> HtmlForm Enctype, Method, Target, DefaultButton, DefaultFocus
<img runat="server"> HtmlImage Align, Alt, Border, Height, Src, Width
<input type="button" runat="server"> HtmlInputButton Type, Value, CausesValidation, ValidationGroup, событие ServerClick
<input type="reset" runat="server"> HtmlInputReset Type, Value
<input type="submit" runat="server"> HtmlInputSubmit Type, Value, CausesValidation, ValidationGroup, событие ServerClick
<input type="checkbox" runat="server"> HtmlInputCheckBox Checked, Type, Value, событие ServerClick
<input type="file" runat="server"> HtmlInputFile Accept, MaxLength, PostedFile, Size, Type, Value
<input type="hidden" runat="server"> HtmlInputHidden Type, Value, событие ServerChange
<input type="image" runat="server"> HtmlInputImage Align, Alt, Border, Src, Type, Value, CausesValidation, ValidationGroup, событие ServerClick
<input type="radio" runat="server"> HtmlInputRadioButton Checked, Type, Value, событие ServerChange
<input type="text" runat="server"> HtmlInputText MaxLength, Type, Value, событие ServerChange
<input type="password" runat="server"> HtmlInputPassword MaxLength, Type, Value, событие ServerChange
<select runat="server"> HtmlSelect Multiple, SelectedIndex, Size, Value, DataSource, DataTextField, DataValueField, Items (коллекция), событие ServerChange
<th runat="server"> HtmlTableCell Align, BgColor, BorderColor, ColSpan, Height, NoWrap, RowSpan, VAlign, Width
<tr runat="server"> HtmlTableRow Align, BgColor, BorderColor, Height, VAlign, Cells (коллекция)
<textarea runat="server"> HtmlTextArea Cols, Rows, Value, событие ServerChange
<table runat="server">, <td runat="server"> HtmlTable Align, BgColor, Border, BorderColor, CellPadding, Cellspacing, Height, Width, Rows (коллекция)
Любой другой дескриптор HTML с атрибутом runat="server" HtmlGenericControl Отсутствуют

В этой таблице не были упомянуты три специализированных элемента управления HTML — HtmlHead, HtmlMeta и HtmlTitle, предоставляющие серверный доступ к части веб-страницы <head>. С использованием этих элементов управления можно динамически устанавливать заголовок, метаданные и связанные таблицы стилей для страницы.

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

Установка атрибутов стилей и других свойств

В следующем примере демонстрируются варианты настройки стандартного элемента управления HtmlInputText (который представляет дескриптор <input type="text">). Для чтения или установки текущего текста в текстовом поле применяется свойство Value. Чтобы сконфигурировать стили, необходимо с помощью коллекции Style добавить новые атрибуты стиля CSS. И, наконец, если нужно установить другие атрибуты, не представленные никакими свойствами, следует использовать коллекцию Attributes.

В предлагаемом примере коллекция Attributes применяется для ассоциирования с клиентским событием onfocus элемента управления простого кода JavaScript (отображающего окно предупреждения с текущим значением текстового поля):

protected void Page_Load(object sender, EventArgs e)
    {
        // Выполнить инициализацию, только если страница запрашивается впервые. 
        // После этого данная информация отслеживается в состоянии представления
        if (!IsPostBack)
        {
            // Установить атрибуты стиля для настройки внешнего вида страницы
            TextBox1.Style["font-size"] = "20px";
            TextBox1.Style["color"] = "red";

            // Использовать немного отличающийся, но эквивалентный 
            // синтаксис для установки атрибута стиля
            TextBox1.Style.Add("background-color", "lightyellow");

            // Установить текст, отображаемый по умолчанию
            TextBox1.Value = "<Вставьте ваш e-mail>";

            // Установить другие нестандартные атрибуты. 
            TextBox1.Attributes["onfocus"] = "alert(TextBox1.value);"; 

        }
    }

Если запросить эту страницу, для текстового поля возвращается следующий HTML-код:

<input name="TextBox1" type="text" id="TextBox1" 
   style="font-size:20px;color:red;background-color:lightyellow;" 
   value="<Вставьте ваш e-mail>" onfocus="alert(TextBox1.value);" />

Атрибут стиля CSS может также содержать информацию, которая не была явно установлена в коде. Например, если изменить размер элемента управления вводом в визуальном конструкторе Visual Studio, к используемому стилю будут добавлены свойства высоты (height) и ширины (width). Эти детали затем появятся и в окончательном HTML-коде.

На рисунке показано, как будет выглядеть приведенная страница при наведении фокуса на текстовое поле:

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

Описанный процесс взаимодействия, по сути, выглядит одинаково для всех серверных элементов управления HTML. Свойства стилей и атрибуты всегда устанавливаются одинаково. Единственное отличие состоит в том, что некоторые элементы управления предоставляют дополнительные свойства. Например, элемент управления HtmlAnchor предоставляет свойство HRef, позволяющее устанавливать целевую страницу для ссылки.

Программное создание серверных элементов управления

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

Например, в следующем коде динамически создается таблица с пятью строками и четырьмя ячейками на строку, затем устанавливаются их цвета и текст, после чего все это отображается на странице. Интересная особенность в том, что в файле .aspx дескрипторы элементов управления не объявляются. Вместо этого все генерируется программно:

protected void Page_Load(object sender, EventArgs e)
{
        // Создать новый объект HtmlTable
        HtmlTable table1 = new HtmlTable(); 
        
        // Установить свойства форматирования таблицы
        table1.Border = 1; 
        table1.CellPadding = 3; 
        table1.CellSpacing = 3; 
        table1.BorderColor = "red"; 
        
        // Начать добавлять содержимое в таблицу
        HtmlTableRow row; 
        HtmlTableCell cell; 
        
        for (int i=1; i<=5; i++) 
        {
            // Создать новую строку и установить для нее цвет фона
            row = new HtmlTableRow(); 
            row.BgColor = (i%2 == 0 ? "lightyellow" : "lightcyan"); 
            
            for (int j=1; j<=4; j++) 
            { 
                // Создать ячейку и установить ее текст
                cell = new HtmlTableCell();
                cell.InnerHtml = "Row: " + i.ToString() + 
                    "<br />Cell: " + j.ToString(); 
                
                // Добавить ячейку в текущую строку
                row.Cells.Add(cell); 
            } 
            
            // Добавить строку в таблицу
            table1.Rows.Add(row); 
        } 
        
        // Добавить таблицу внутрь страницы
        this.Controls.Add(table1); 

}

Этот пример содержит два вложенных цикла. Во внешнем цикле создаются строки, а во внутреннем — отдельные ячейки для каждой строки, которые затем добавляются в коллекцию Cells текущей строки. По окончании внутреннего цикла код добавляет всю строку в коллекцию Rows таблицы. Последнее действие выполняется по завершении внешнего цикла. На этом этапе код добавляет готовую таблицу в коллекцию Controls страницы.

Динамически сгенерированная страница
Пройди тесты
Лучший чат для C# программистов