Лабораторная работа 1. Элементы управления ASP.NET
Цели и задачи: Научиться создавать проект Web-приложения в среде Microsoft Visual Studio, ознакомиться с серверными элементами управления ASP.NET проекта, с палитрой компонентов, свойствами и методами объектов управления, структурой файловой системы проекта, научиться пользоваться основными инструментами среды разработки (Object Browser, Solution Explorer, Properties window, Toolbox).
Ход выполнения работы:
Первый проект
В начале решите, в какой директории будете создавать страницы. Все файлы, находящиеся в одной директории, считаются единым проектом. Запустите выбранную вами среду разработки. Выберите пункт меню File-New-Website. Появится диалоговое окно. Назначьте в нем имя проекта и выберите язык программирования С#.
По умолчанию проект создается в файловой системе. По желанию его можно создать на HTTP или FTP-сервере. Из файловой системы проект всегда можно скопировать на сервер нажатием одной кнопки в заголовке Solution Explorer.
В проекте будет создана страница default.aspx. Выберите ее, и появится окно редактирования с закладками Design и Source. Не меняя ничего, щелкните на кнопке со стрелкой, чтобы просмотреть страницу в браузере. Появится окно, в котором спрашивается, нужно ли добавить в файл web.config возможность отладки. Нажмите "OK". На панели задач должен появиться значок web-сервера. Откроется браузер, показывающий страницу по адресу http://localhost:номер_порта/Website1/default.aspx. "Localhost" обозначает сервер, работающий на вашем компьютере. Встроенный сервер Cassini сам назначает себе номер порта — для каждого проекта он разный. Сервер IIS обычно работает через порт 80 (или 8080, если тот занят), и для него номер порта указывать не нужно. При этом ваша страница будет скомпилирована.
Пока что страница в браузере пустая.
Но исходный код этой страницы не пустой. Программа сгенерировала код для вас.
<%@ Page Language="C#" AutoEventWireup="true";
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN";
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
Разберем эту страницу.
<%@ Page Language="C#" %>. Тег <% всегда предназначается для интерпретации ASP-кода. Директива Page всегда присутствует на странице aspx. Ее атрибутLanguage — это указание, что в скриптах данной страницы будет использоваться C#, а могли бы VB, C++ или J#. CodeFile — имя файла с отделенным кодом (code-behind). Inherits — класс, определенный в том файле, от которого наследуется класс страницы.
Одновременно будет создан и файл Default.aspx.cs.
Это технология разделения кода, о которой мы уже говорили. Сама форма находится в файле Default.aspx, а в файле Default.aspx.cs находится класс страницы на языке C#. Таким образом, дизайн страницы может быть изменен не затрагивая кода страницы, что позволяет разделить ответственность за внешний вид и работу страницы между дизайнером и программистом.
<form runat="server">
Этот тег дает указание компилятору обрабатывать элементы управления страницы. Обратите внимание на то, что данный тег имеет свойство runat, для которого установлено значение " server " (других значений не бывает). При использовании этого свойства элемент управления обрабатывается компилятором, а не передается браузеру "как есть".
Вставьте в Default.aspx между тегами <form> и </form> тег, задающий элемент управления.
<asp:Label id="Time" runat="server" Text="Сервер находится в Москве. Московское время: "/>
Серверный элемент управления Label является средством размещения на странице текста, который может содержать теги HTML. Изменяя значения свойств этого элемента управления в коде, вы можете динамически изменять текст на странице. В asp:Label компилятору сообщается, с каким объектом ведется работа (в рассматриваемом случае — с элементом управления Label ).
Далее задаются различные свойства элемента управления. В первую очередь определяется его имя id="Time" и атрибут "runat", а также текст.
В файле Default.aspx.cs должен содержаться такой текст:
using System;
......
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
Ключевое слово partial появилось в C# 2.0, и позволяет разбить текст определения класса между разными файлами.
System.Web.UI.Page — класс, базовый для всех страниц ASP .NET.
Если вы работаете с WebMatrix, вставьте его самостоятельно между тегами <script> и </script> файла default.aspx.
Вставьте в эту функцию строчку
Time.Text+=DateTime.Now.ToString();
Возможно, вы уже знакомы с классом System.DateTime библиотеки классов FCL — составной части .NET Framework. Здесь мы используем этот класс, как в любой программе на C#. Следовательно, любой класс .NET доступен и в локальных, и в распределенных приложениях.
Полученное значение присваивается свойству Text объекта Time. Это элемент управления типа Label (метка), который мы вставили. Время на часах клиента и сервера может не совпадать, если они находятся в разных точках земного шара.
Page_Load похож на обычный обработчик события формы. Как можно легко догадаться, эта функция вызывается каждый раз, когда загружается форма.
Запустите страницу на просмотр кнопкой F5 или нажав на кнопку со стрелкой на панели инструментов. В браузере должна открыться страница, на которой будет написано текущее время. Откройте исходный текст страницы. Никакого кода на С# или элементов управления ASP.NET там не будет:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>Время, вперед</title>
</head>
<body>
<form name="form1" method="post" action="Default.aspx"
id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwUJODExMDE5NzY5D2QWAgIDD2QWAgIBDw8WAh4EVGV4dAUSMDguMDY
uMjAwNiA0OjU2OjQ3ZGRkkEMgqXmKC0v9vwAwh999lefuIOw=" />
</div>
<div>
<span id="Time">Сервер находится в Москве. Московское время:
08.06.2006 4:56:47</span>
</div>
</form>
</body>
</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 открывает окно "Свойство выделенного объекта", а двойной щелчок мышью автоматически создает обработчик наиболее типичного для данного элемента события.
Рассмотрим некоторые простейшие элементы.
Label
Этот элемент управления позволяет выводить отформатированный текст, аналогично обобщенному строчному элементу разметки <SPAN>. Всеми свойствами этого объекта можно управлять из вашей программы ASP .NET.
Большинство методов и свойств унаследовано от WebControl. Главное собственное свойство — это, конечно, его содержание — Text.
Нижеперечисленные свойства управляют внешним видом элемента, присутствуют в классе WebControl и, следовательно, применимы ко всем элементам-наследникам WebControl, а не только к Label.
|
BackColor |
Цвет фона |
|
BorderColor |
Цвет границы элемента управления |
|
BorderStyle |
Стиль границы — сплошной, пунктир, точечный, двойной и другие |
|
BorderWidth |
Ширина границы |
|
Enabled |
Активность. Если false, нельзя вводить данные, не получает фокус |
|
Font |
Шрифт, состоит из нескольких атрибутов |
|
ForeColor |
Цвет, которым отображается текст |
|
Height |
Высота элемента |
|
Width |
Ширина элемента |
|
Visible |
Виден ли элемент управления |
|
TabIndex |
Индекс табуляции, в порядке номеров которых в форме перемещается фокус при нажатии на клавишу Tab |
|
ToolTip |
Текст окна подсказки |
В версии 2.0 появилась возможность задавать для элементов управления "горячие" клавиши, или клавиши быстрого доступа. Свойство AccessKey определяет последовательность нажатых клавиш, которые приводят к установке фокуса на данном элементе. Например, AccessKey="N" значит, что для вызова функциональности надо нажать на Alt+N. Установить фокус в Label невозможно, поэтому устанавливаем свойство AssociatedControlId, которое указывает на другой элемент. Если это TextBox, то фокус устанавливается в него.
Пример описания элемента Label:
<asp:Label id="ShopNews" runat="server" Font-Size =20 ForeColor="red"
BackColor ="lightgray" BorderWidth=4 BorderStyle=groove Height=50 width=500>Новости торговой площадки </asp:Label>
Префикс asp: означает, что данный элемент стандартный. Можно создавать собственные контролы со своими префиксами.
Текст между открывающим и закрывающим тегами будет показан на странице. Это содержание его свойства Text.
Так как Text — это такой же атрибут, как и другие, мы можем написать иначе:
<asp:Label id="ShopNews" runat="server" Font-Size =20 ForeColor="red"
BackColor ="lightgray" BorderWidth=4 BorderStyle=groove Height=50
width=500 Text= "Новости торговой площадки" />
Вставим это описание в страницу aspx
<html xmlns=""http://www.w3.org/1999/xhtml"">
<head>
<title>Торговая площадка</title>
</head>
<body>
<center>
<h2>
Демонстрация метки</h2>
<br />
<form id="frmDemo" runat="server">
<asp:Label ID="ShopNews" runat="server" Font-Size="20"
ForeColor="red" BackColor="lightgray"
BorderWidth="4" BorderStyle="groove" Height="50"
Width="500" Text="Новости торговой площадки" />
</form>
</center>
</body>
</html>
и наслаждаемся эффектом. Надпись красного цвета на сером фоне. Стиль границы делает метку приподнятой над фоном.
Рисунок 1 – Свойтсва Label
У Label, как и у всех остальных классов, есть конструктор. Это значит, что создать его можно прямо в программе, а не прописывать на форме.
<%@ Page Language="C#" %>
<%@ Import Namespace= "System.Drawing" %>
<script runat="server">