В этой статье мы рассмотрим различные виды элементов управления WebForm.
Виды элементов управления WebForm
Все множество элементов управления WebForm можно поделить на четыре основные разновидности:
· базовые элементы управления;
· элементы управления с дополнительными возможностями;
· элементы управления для работы с источниками данных;
· элементы управления для проверки вводимых пользователем данных.
Самое принципиальном различии между элементами управления Windows Forms и WebForm это то, что первые в итоге преобразуются в набор вызовов Win32 API, а вторые - в набор тегов HTML.
Базовые элементы управления WebForm
к базовым элементам управления WebForm относятся те из них, которым есть прямые соответствия в HTML. Например, для отображения списка моделей автомобилей можно использовать элемент управления ListBox с прилагающимися к нему элементами управления ListItem:
<asp:ListBox id=ListBoxl runat="server" Width="8б" Неight="б9">
<asp:ListItem value="BMW">BMW</asp:ListItem>
<asp:ListItem value="Jetta">Jetta</asp:ListItem>
<asp:ListItem value="Co1t">Co1t</asp:Listltem>
<asp:ListItem value="Grand Am">Grand Am</asp:Listltem>
</asp:ListBox>
Перед тем как отправиться к клиенту, этот код будет преобразован средой выполнения ASP.NET в следующий набор тегов HTML:
<select name="ListBoxl" id="ListBoxl" size="5" style="height:69px;width:86px;">
<option value="BMW">BMW</option>
<option value="Jetta">Jetta</option>
<option value="Colt">Colt</option>
<option value="Grand Arn">Grand Arn</ opt i оп>
</select>
Некоторые базовые элементы управления WebForm представлены в табл. 12.
Таблица 12. Базовые элементы управления WebForm
Элемент управления Описание
Button Разновидности кнопок
ImageButton
CheckBox Флажок (CheckВox) или окно списка с несколькими флажками (CheckBoxList)
CheckBoxList
DropDownList Эти типы предназначены для создания различных разновидностей списков
ListBox
ItemList
Image Эти типы представляют контейнеры для статического текста и
Panel изображений (а также средство для их группировки)
Label
RadioButton Стандартный переключатель (RadioButtcin) или окно списка с набором RadioButtonList переключателей (RadioButtonUst)
TextBox Текстовое окно для ввода данных пользователем. Может быть настроено для приема одной строки текста или нескольких строк
Работа с базовыми элементами управления WebForm очень похожа на работу с их аналогами в Windows Forms. Мы не будем рассматривать все элементы управления WebForm подряд, а остановимся на нескольких стандартных ситуациях.
Группа переключателей
Переключатели обычно объединяются в группы. В одной группе одновременно может быть выбран только один переключатель. Например, если нам необходимо создать пользовательский интерфейс, представленный на рис. 12, код может быть таким:
<body>
<p><font size=5><em>How shall we contact you?</em></font></p>
<p><asp:RadioButton id=RadioHome runat="server" Text="Contact mе at home"
GroupName="ContactGroup">
</asp:RadioButton></p>
<p><asp:RadioButton id=RadioWork runat="server" Text="Contact mе at work"
GroupName="ContactGroup">
</asp:RadioButton></p>
<p><asp:RadioButton id=RadioDontBother runat="server" Text="Don't bother me..."
GroupName="ContactGroup">
</asp:RadioButton></p>
</body>
Рис. 12. Группа переключателей на web-странице
Рис. 13. Текстовое поле для ввода нескольких строк
Обратите внимание, что для каждого объекта RadioButton предусмотрен атрибут GroupName. Если значение этого атрибута у нескольких переключателей одно и то же( как в нашем случае), одновременно может быть выбран только один из них.
Текстовое поле для ввода нескольких строк с полосой прокрутки
Еще одним часто используемым элементом управления является текстовое поле для ввода нескольких строк (рис. 13)
Как вы, наверное, уже догадываетесь, чтобы в поле можно было вводить несколько строк, необходимо установить значение соответствующего атрибута. Выглядеть это может так:
<p><aps:TextBox id=TextBoxl reunat="server" Width="18З" Height="96" TextMode="MultiLine" BorderStyl e="Ridge">
</asp: TextBox></p>
При установке для атрибута TextMode значения MultiLine у текстового поля автоматически возникает полоса прокрутки (когда введенные в него данные уже не могут поместиться в отображаемой области).
Элементы управления с дополнительными возможностями
К этой группе относятся элементы управления, для которых не предусмотрено прямых аналогов в HTML. ИХ всего два, и они представлены в табл. 13.
Таблица 13. Элементы управления WebForm с дополнительными возможностями
Элемент управления Описание
AdRotator Баннерная рулетка: набор из нескольких пар изображение - альтернативный текст, которые сменяют друг друга. Для настройки используется специальный код в формате XML
Calendar Этот элемент управления возвращает код HTML, представляющий календарь
Элемент управления Calendar
Для элемента управления Calendar не существует прямого эквивалента в HTML. Однако необходимость в помещении на web-страницу календаря возникает очень часто. Поэтому в ASP.NET был предусмотрен специальный элемент управления, который преобразуется средой выполнения ASP.NET в набор тегов HTML, представляющий календарь. Например, предположим, что мы разместили на своей web-странице этот элемент управления при помощи следующего кода:
<asp:Calendar id=Calendarl runat="server"></asp:Calendar></p>
Вы удивитесь, увидев, какое количество кода HTML сгенерировала среда выполнения ASP.NET, встретив на странице такую строку! Кода так много, что мы даже не будем его здесь приводить. Можно посмотреть его самим (в файле *.aspx)
В элементе управления Calendar предусмотрена масса возможностей для настройки. Одно из свойств, которое может представлять интерес, - это свойство SelectionMode. По умолчанию в календаре можно выбирать только один день (что соответствует значению по умолчанию SelectionMode = Day). Однако мы можем воспользоваться и другими допустимыми значениями этого свойства:
· None - вообще ничего нельзя будет выбирать, то есть календарь будет предназначен исключительно для справочных целей;
· DayWeek - можно выбирать один день или целую неделю;
· DayWeekMonth - можно будет выбрать день, неделю или месяц.
Например, если мы установим значение DayWeekMonth, в возвращаемом коде HTML будет предусмотрен дополнительный столбец слева (для выбора недели целиком) и флажок в верхнем левом углу (для выбора всего месяца).
Элемент управления AdRotator (баннерная рулетка)
Элемент управления AdRotator (баннерная рулетка) был и в классических ASP, однако в ASP.NET он был дополнен новыми возможностями. Задача этого элемента управления проста и понятна: менять картинки в окне браузера через заданные промежутки времени. Обычно, конечно, с его помощью гоняют рекламу. При размещении этого элемента управления на шаблоне страницы времени разработки на ней будет лишь помечено место, где будут находиться баннеры. Все остальное придется делать вручную. Если точнее, то придется указать для свойства AdvertisementFi1е имя файла в формате XML, в котором будут храниться настройки баннерной рулетки, а затем написать этот самый файл.
Формат AdvertisementFiLe очень прост. Для каждого баннера создается отдельный тег <Ad> (от advertisement). Как минимум, в этом теге должен быть указан путь к файлу изображения (ImageUr1), то есть баннера, адрес URL, на который клиент перейдет при щелчке на этом баннере (ТаrgetUr1), альтернативный текст (АlternativeТext), который будет периодически сменять изображение или появляться при наведении на него указателя мыши, и вес этого баннера в общем времени показа (Impressions). Например, мы можем создать следующий файл в формате xml (пусть он называется ads.xml):
<Advertisements>
<Ad>
<ImageUrl>SlugBug.jpg</ImageUrl>
<TargetUrl >httр://v.мw.Сагs.соm<!ТаrgеtUrl>
<A1ternateText>Your new Car?</AlternateText>
<Impressions>80</Impressions>
</Ad>
<Ad>
<ImageUrl>car.gif</ImageUrl> <TargetUrl>http://v.мw.CarSuperSite.com</TargetUrl>
<AlternateText>Like this Car?</AlternateText>
<Impressions>80</Impressions>
</Ad>
</Advertisements>
После этого нам осталось убедиться, что файл XML и файлы изображений помещены в один виртуальный каталог с нашей страницей *.aspx и настроить для элемента управления AdRotator значение атрибута AdvertisementFi1е, например, так:
<asp:AdRotator id=AdRotatorl runat="server" Width="470" Неight="60" AdvertisementFile="ads.xml ">
</asp:AdRotator>
Свойства Неight и Width элемента управления AdRotator определяют высоту и ширину баннера. Если наше изображение не будет подходить под эти размеры, оно будет растянуто или сжато.
Элементы управления для работы с источниками данных
в ASP.NET предусмотрено два элемента управления WebForm, предназначенных для отображения данных, полученных из источника (обычно в качестве источника в приложениях ASP.NET выступает объект ADO.NET DataSet, который, в свою очередь, может быть, например, заполнен данными с сервера баз данных). Эти элементы управления представлены в табл. 14.
Таблица 14. Элементы управления WebForm, предназначенные для работы с источниками данных
Элемент управления Описание
DataGrid Элемент управления, который отображает содержимое объекта ADO.NEТ DataSet в виде таблицы
DataList Элемент управления для выбора значений, заполняемый из источника данных
Кроме того, для работы с источниками данных можно настроить некоторые из базовых типов данных.
Элемент управления DataGrid
Одна из наиболее часто встречающихся задач в web-приложении - найти какие-то данные в источнике данных по запросу пользователя и вернуть их в табличном формате. В классических ASP это делалось путем создания объекта ADO Recordset и создания таблицы HTML «нa лету» с использованием данных из этого объекта Recordset. Тех же самых результатов гораздо проще можно достичь при помощи элемента управления WebForm - DataGrid.
Рассмотрим применение DataGrid на примере. Предположим, что нам необходимо предоставить пользователю в ответ на его запрос данные из базы данных Cars.
Первое, что нам нужно сделать - создать обработчик для события Load нашей страницы. В нем мы установим соединение с базой данных, создадим и заполним объект DataSet и укажем его в качестве источника данных для элемента управления DataGrid. Соответствующий код С# может выглядеть так:
using System.Data.SQL;
protected void Page_Load(object sender. EventArgs е)
{
if(! IsPostBack)
{
//Помещаем в DataGrid данные из таблицы Inventory
Sq1Connectiоn sq1Conn = new Sq1Connectiоn();
sqlConn.ConnectionString = "data source=.; initial catalog=Cars;integrated security=sspi;";
SqlDataAdapter dsc = new Sql DataAdapter( "Select * from Inventory", sqlConn);
DataSet ds = new DataSet();
dsc.Fill( ds, "Inventory");
DataGrid1.DataSource = ds.Tables["Inventory"].Defau1tVi ew;
DataGridl.DataBind();
}
}
Результат представлен на рис 14.
Рис. 14. Элемент управления DataGrid с данными, полученными из SQL Server
Еще немного об источниках данных
Как мы только что убедились, выводить содержимое объекта DataTable при помощи элементов управления WebForm (например, DataGrid) можно легко и просто. Однако достаточно часто возникает необходимость выводить на web-странице данные, которые хранятся другими способами. И в элементах управления WebForm предусмотрена возможность делать это, то есть выводить данные, которые находятся в каком угодно виде.
Например, предположим, что мы столкнулись со следующей ситуацией: нам необходимо заполнить элемент управления ListBox данными, которые в настоящее время хранятся в обычном строковом массиве (такая потребность возникает очень часто). Заполнение ListBox данными из этого массива производится точно так же, как заполнение данными DataGrid из объекта DataTable в предыдущем примере. Все удивительно просто:
protected void Page load(object sender. EventArgs е)
{
if(! IsPostBack)
{
// Создаем массив строковых значений - он нам нужен для нашей демонстрации
string[] carPetNames =( "Viper", "Hank", "Ottis", "Alponzo","Cage", "TB"};
// petNameList - это наш элемент управления ListBox на странице
petNameList.DataSource = carPetNames;
petNameList.DataBind();
}
}
Все массивы .NET происходят от единого общего предка - класса System.Array, а в классе System.Array реализован интерфейс IEnumerable. Мы говорим это к тому, что любой класс, в котором реализован этот интерфейс, может быть привязан к элементу управления WebForm (да и Windows Forms) в качестве источника данных. Например, если данные находились в объекте ArrayList, все будет точно так же:
protected void Page load(object sender. EventArgs е)
{
if(! IsPostBack)
{
// Теперь вместо обычного массива у нас - объект ArrayList
ArrayList carPetNames = new ArrayList();
carPetNames.Add("Viper");
carPetNames.Add( "Ottis");
carPetNames.Add( "Alphonzo");
carPetNames.Add( "Cage");
carPetNames.Add( "ТВ");
petNameList.DataSource = carPetNames;
petNameList.DataBind();
}
}
Элементы управления для проверки вводимых пользователем данных
Последняя разновидность элементов управления WebForm - это элементы управления, которые применяются для проверки вводимых пользователем данных. Наиболее важные элементы управления этого-типа представлены в табл. 15.
Таблица 15. Элементы управления для проверки данных
Элемент управления Описание
CompareValidator Сравнивает значение, введенное в один элемент управления, со значением, введенным во второй элемент управления
CustomValidator Позволяет определить пользовательский метод, при помощи которого и будет производиться проверка
RangeValidator Определяет, попадает ли введенное пользователем значение в определенный диапазон
RegularExpressionValidator Проверяет введенное значение на соответствие подстановочному выражению
RequiredFieldValidator Позволяет убедиться, что в соответствующий элемент управления действительно введено значение (оно не оставлено пустым)
ValidationSummery Отображает все ошибки, обнаруженные при проверке ввода, в виде списка, маркированного списка или обычного абзаца. Ошибки могут отображаться на web-странице или в специальном окне оповещения браузера
Давайте создадим новый проект С# на основе шаблона Web Application и назовем его Validate WebApp. Изменим имя файла *.aspx на default.aspx, а затем откроем этот файл как графический шаблон времени разработки (чтобы можно было помещать элементы управления). Затем при помощи перетаскивания элементов управления из Toolbox создадим интерфейс, похожий на представленный на рис. 15.
Рис. 15. Прocтой интерфейс для ввода данных
Все текстовые надписи можно сделать при помощи обычного кода HTML - использовать объект Label не обязательно.
А теперь посмотрим, как можно проверять правильность вводимых пользователем данных при помощи элементов управления WebForm. Например, нам нужно убедиться, что текстовое поле txtEMail пользователь не оставил пустым. Проверка будет производиться при нажатии кнопки Submit, то есть при попытке пользователя отправить данные на сервер. Самый простой способ реализовать такую проверку - воспользоваться элементом управления RequiredFieldValidator.
Добавим RequiredFieldValidator на страницу при помощи Toolbox и откроем его свойства. Свойств, которые обязательно нужно настроить, два: СоntrolТoValidate (здесь нужно выбрать имя текстового поля, обязательного для заполнения, - в нашем случае txtEMail) и ErrorMessage - сообщение об ошибке, которое будет выдаваться пользователю.
Вот и все. Если мы посмотрим, какой код в файле *.aspx сгенерировала для нас среда разработки Visual Studio.NET, то он будет таким:
<asp: RequiredFieldValidator id= RequiredFieldValidator1 styl e="Z - INDEX: 109;
LEFT: 351рх; POSIТION: absolute; ТОР: 204рх" runat="server"
ErrorMessage="We need your e-mail Address'"
ControlТoValidate="txtEMail">
</asp: RequiredFieldValidator >
Кроме того, в производном от Page классе С# для нашей страницы ASP.NET
(в том файле, который указан в атрибуте Codebehind) появится новая переменная:
public class WebForm1 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.Button btnSubmit;
protected System.Web.UI.WebControls.RequiredFieldValidator
ReqiredFieldValidatorl;
protected System.Web.UI.WebControls.TextBox txtEMail;
protected System.Web.UI.WebControls.TextBox txtLName;
protected System.Web.UI.WebControls.TextBox. txtFName;
}
Сохраним страницу и обновим ее в окне браузера. С виду ничто не изменится. I Однако если мы попробуем нажать кнопку Submit, не заполнив поле txtEMail , то на странице рядом с этим полем появится сообщение об ошибке.
Если мы введем данные в текстовое поле и нажмем Submit, надпись исчезнет. Если в окне браузера просмотреть код web-страницы, то мы заметим в нем новую функцию JavaScript, которая была создана для нас без нашего участия. На самом деле все еще интереснее: если элемент управления WebForm обнаружит, что браузер не поддерживает работу со скриптами, то логика проверки вводимых данных будет реализована для выполнения на сервере!
Комментариев нет:
Отправить комментарий