6. Классификация элементов управления в ASP.NET

КЛАССИФИКАЦИЯ WEB-ЭЛЕМЕНТОВ УПРАВЛЕНИЯ
Все web-элементы управления можно разделить на несколько групп:
 Простые элементы управления (кнопка, текстовое поле, список);
 Элементы управления с расширенными возможностями (календарь, wizard,
AdRotator(элемент для просмотра баннеров) и пр.);
 Элементы управления для работы с источниками данных (GridView);
 Элементы управления для контроля ввода;
 Элементы управления для входа в систему.
Относительно простых элементов управления следует отметить атрибут AutoPostBack,
установка которого в значение true позволяет в пределах одной и той же страницы
изменять содержимое других элементов управления без перегрузки страницы.
Элементы управления с расширенными возможностями.
В качестве примера разберем возможности двух элементов управления.
Элемент AdRotator позволяет случайно отображать изображения в некоторой области
окна браузера. Для его настройки достаточно назначить свойству AdvertisementFile
ссылку на xml-файл, описывающий все изображения. XML-файл должен иметь четкую
структуру следующего вида:
<Advertisements>
<Ad>
<ImageUrl> <!-- адрес изображения --> </ImageUrl>
<TargetUrl><!-- url-адрес для перехода по выборе данного изображения - ></TargetUrl>
<AlternateText> <!-- альтернативный текст при наведении указателя мыши
на изображение --></AlternateText>
<Impressions><!—приоритет изображения – чем выше приоритет, тем чаще
изображение будет появляться для отображения --></Impressions>
</Ad>
…
</Advertisements>
Для создания элемента управления Wizard требуется создать «шаги мастера» с помощью
пункта Add/Remove WizardSteps. В результате для каждого шага будет определена
область с пустым содержанием, куда можно поместить нужные элементы управления. Для
Wizard определяют только обработчик нажатия автоматически сгенерированной кнопки
Finish (FinishButtonClick), который обычно фиксирует и обрабатывает данные,
которые были введены в элементы управления «мастера».
Элементы управления с источниками данных.
Типовой пример таких элементов управления – GridView («Просмотр таблицы»).
Через мастер создания источника данных в диалоговом режиме можно указать базы
данных, запросы к таблицам и возможности редактирования данных на месте
(посредством установки флажков Enable Editing, Enable Selection, Enable Deleting и др).
При возможности редактирования каждая строка таблицы будет содержать гиперссылки,
соответствующие командам изменения данных. При выборе ссылки изменения столбцы
текущей строки таблицы становятся текстовыми полями, содержащими значения полей
текущей записи таблицы. Далее эти значения можно изменить и сохранить в источник
данных.
При создании с помощью такой диалоговой настройки будет сгенерирован следующий
код asp.net-разметки:
<!-- web-элемент управления для просмотра таблицы об автомобилях, имеющих
поля кода, названия, производителя и цвета автомобиля. Первый столбецбудет
содеражать командные гиперссылки (CommandField) -->
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataSourceID="CarDataSource" DataKeyNames="CarID" AllowPaging="True"
AllowSorting="True">
<Columns>
<asp:CommandField ShowDeleteButton="True" ShowEditButton="True" />
<asp:BoundField DataField="CarID" HeaderText="CarID"
InsertVisible="False" ReadOnly="True"
SortExpression="CarID" />
<asp:BoundField DataField="CarName" HeaderText="CarName"
SortExpression="CarName" />
<asp:BoundField DataField="Make" HeaderText="Make"
SortExpression="Make" />
<asp:BoundField DataField="Color" HeaderText="Color"
SortExpression="Color" />
</Columns>
</asp:GridView>
<!-- web-элемент управления для настройки источника данных – строка
подключения, запросы на выбор, удаление, изменение, добавление записей в
таблицу -->
<asp:SqlDataSource ID="CarDataSource" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString1 %>"
ProviderName="<%$ ConnectionStrings:ConnectionString1.ProviderName%>"
SelectCommand="SELECT * FROM [Cars]"
DeleteCommand="DELETE FROM [Cars] WHERE [CarID] = ?"
InsertCommand="INSERT INTO [Cars] ([CarID], [Make], [Color],[CarName])
VALUES (?, ?, ?, ?)"
UpdateCommand="UPDATE [Cars] SET [Make] = ?, [Color] = ?,
[CarName] = ? WHERE [CarID] = ?">
<!-- описание параметров запросов (подстановка вместо ?) -->
<DeleteParameters>
<asp:Parameter Name="CarID" Type="Int32" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="Make" Type="String" />
<asp:Parameter Name="Color" Type="String" />
<asp:Parameter Name="CarName" Type="String" />
<asp:Parameter Name="CarID" Type="Int32" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="CarID" Type="Int32" />
<asp:Parameter Name="Make" Type="String" />
<asp:Parameter Name="Color" Type="String" />
<asp:Parameter Name="СarName" Type="String" />
</InsertParameters>
</asp:SqlDataSource>
При написании такого кода вручную нужно обязательно помнить, что таблица должна
иметь первичный ключ, а также нельзя забывать о подробном описании всех параметров
запросов обновления таблицы.
Элементы управления для проверки правильности ввода.
- сравнивает значение, введенное в один элемент управления, со
значением, введенным во второй элемент управления
CustomValidator - позволяет определить пользовательский метод, при помощи которого
и будет производиться проверка
RangeValidator - определяет, попадает ли введенное пользователем значение в
определенный диапазон
RegularExpressionValidator - проверяет введенное значение на соответствие
подстановочному выражению
RequiredFieldValidator - позволяет убедиться, что в соответствующий элемент
управления действительно введено значение (оно не оставлено пустым)
ValidationSummary - отображает все ошибки, обнаруженные при проверке ввода, в виде
списка, маркированного списка или обычного абзаца. Ошибки могут отображаться на
web-странице или в специальном окне оповещения браузера.
CompareValidator
Эти элементы управления обычно управляют с помощью атрибутов ControlToCompare
(элемент управления, значение из которого подлежит сравнению), ErrorMessage
(сообщение об ошибке в случае неправильного ввода), ValidationExpression (шаблон
проверки), Operator (знак сравнения), ValueToCompare (значение для сравнения),
MaximumValue (максимальное значение диапазона), MinimumValue (минимальное значение
диапазона).
Примеры использования таких элементов управления приведены ниже:
<!-- установка текстового поля и валидатора на проверку его заполнения -->
<asp:TextBox ID="MyText" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RFV" runat="server"
ControlToValidate="MyText" ErrorMessage="Введите какое-то значение">
</asp:RequiredFieldValidator>
<!-- установка текстового поля и валидатора на проверку того, что значение
попадает в определенный диапазон -->
<asp:TextBox ID="TextRange" runat="server"></asp:TextBox>
<asp:RangeValidator ID="RV" runat="server"
ErrorMessage="значение должно быть от 0 до 100"
MaximumValue="100" MinimumValue="0"
ControlToValidate="TextRange">
</asp:RangeValidator>
<!-- установка текстового поля и валидатора на проверку выполнения условия,
что значение текстового поля не превышает 20 -->
<asp:TextBox ID="TextCompare" runat="server"></asp:TextBox>
<asp:CompareValidator ID="CV" runat="server" ControlToValidate="TextCompare"
ErrorMessage="значение <20" Operator="LessThan" ValueToCompare="20">
</asp:CompareValidator><br />
Элементы управления-валидаторы вступают в силу в момент обращения к серверным
сценариям, например, при нажатии некоторой кнопки с серверной обработкой. Тогда
сообщения об ошибках, соответствующие элементам управления, будут выведены рядом с
текстовыми полями.
Элементы управления для авторизации
ASP.NET содержит целый ряд web-элементов управления, которые позволяют как единое
целое использовать стандартные формы авторизации. Например, таким элементом
управления является Login. Через его свойства можно настроить внешний вид формы,
задать сообщения. В результате будет получена примерно следующая asp.net-разметка:
<asp:Login ID="Login1" runat="server" BackColor="#EFF3FB"
BorderColor="#B5C7DE" BorderPadding="4" BorderStyle="Solid"
BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em"
ForeColor="#333333" LoginButtonText="ОК"
OnAuthenticate="Login1_Authenticate"
PasswordLabelText="пароль:" TitleText="Авторизоваться"
UserNameLabelText="логин:">
<TitleTextStyle BackColor="#507CD1" Font-Bold="True" Font-Size="0.9em"
ForeColor="White" />
<InstructionTextStyle Font-Italic="True" ForeColor="Black" />
<TextBoxStyle Font-Size="0.8em" />
<LoginButtonStyle BackColor="White" BorderColor="#507CD1"
BorderStyle="Solid" BorderWidth="1px"
Font-Names="Verdana" Font-Size="0.8em"
ForeColor="#284E98" />
</asp:Login>
Основное событие, которое требуется обработать этому элементу управления – событие
нажатия кнопки отправки данных OnAuthenticate. Обычно обработчик этого сообщения
проверяет правильность ввода логина и пароля и устанавливает свойство
успешной/неуспешной
авторизации
Authenticated,
передаваемое
через
AuthenticateEventArgs в этот обработчик. В случае успешной авторизации свойство
должно иметь значение true, в противном случае – false.
Динамическое формирование форм по ходу выполнения asp.net-сценария
Как вся asp.net-страница (Page), так и некоторые элементы управления имеют коллекцию
Controls, через которую можно управлять набором элементов управления, доступных и
видимых пользователю. Примером элемента управления, который может содержать
внутри себя другие элементы, является элемент управления Panel.
Далее приводится пример обработчика, который заполняет содержимое элемента Panel.
protected void Button2_Click(object sender, EventArgs e)
{
// удаляем все элементы управления, ранее находившиеся в панели
MyPanel.Controls.Clear();
// создаем 5 текстовых полей и добавляем их в панель
for (int i = 0; i < 5; i++)
{
TextBox tb = new TextBox();
tb.ID = "tb" + i;
MyPanel.Controls.Add(tb);
}
}