Создание и редактирование страниц

С Web-формами применяются как HTML-элементы управления, так и серверные элементы управления. В чем разница между ними? В сущности, серверные элементы управления — это надмножество HTML-элементов управления, обладающее более широкими возможностями. Даже для создания небольших приложений требуется использование нескольких элементов управления, поэтому важно понимать, как работает каждый из них. Кроме того, для многих элементов управления можно задать различную форму, цвет, положение на странице и другие свойства. Таким образом, они становятся элементами дизайна интерфейса Web приложения.

Изучив материал этого модуля, вы сможете:

• размещать на WEB-страницах различные элементы управления, менять их свойства заданные по умолчанию.
• Использовать методы и события, которые связаны с элементами управления.
• Понимать программы, написанные на языке C Sharp
• Обрабатывать значения, возвращаемые некоторыми элементами управления
• Запускать приложения на выполнение и отлаживать их с помощью точек прерывания и пошагового выполнения.
• Создавать собственные небольшие Web - приложения.

Тема 1. Элементы управления и их свойства

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

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

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

Назначение элемента управления TextBox состоит в создании на Web-форме полей ввода текста. Оператор:

<asp:TextBox ID="Name" runat="server"></asp:TextBox>

создает на Web-форме поле ввода текста и назначает ему программный идентификатор "Name". Свойство Text можно использовать для декларативного добавления текста в TextBox, а также для чтения и изменения этого текста из серверного сценария. Следующий оператор создает TextBox, первоначально содержащий строку "Анатолий":

<asp:TextBox ID="Name" runat="server" Text="Анатолий"> </asp:TextBox>

А вот этот серверный сценарий считывает содержимое элемента управления TextBox:

string name = Name.Text;

Text —- это лишь одно из нескольких открытых свойств класса TextBox. Среди других — Rows и Columns, устанавливающие размеры TextBox, задавая число строк и столбцов, которые в нем могут отображаться; MaxLength, ограничивающее максимальное число символов, которые могут быть введены; Readonly, значение true которого запрещает изменение текста пользователем; Wrap, управляющее активизацией режима переноса строк в многострочном TextBox ; и TextMode, которое может быть равно SingleLine (по умолчанию) для создания однострочных полей, MultiLine для создания многострочных или Password для создания полей ввода пароля, которые вместо вводимых пользователем символов отображают звездочки или иной символ. Следующий оператор создает поле ввода пароля с именем "Password":

<asp:TextBox ID="Password" runat="server" TextMode="Password">
</asp:TextBox>

Чтобы создать многострочное поле, установите TextMode в MultiLine, a Rows в число строк равное 10:

<asp:TextBox ID="Comments" runat="server" Rows="10" TextMode="MultiLine">
</asp:TextBox>

Атрибут Rows игнорируется, если TextMode явно не установлено в MultiLine.

События TextChanged и свойство AutoPostBack

Если текст в поле TextBox изменился, то после возврата формы элемент управления генерирует событие TextChanged. Обработчик события задается атрибутом

OnTextChanged тэга <asp:TextBox>:

<asp:TextBox ID="Name" runat="server" OnTextChanged="Name_TextChanged">
</asp:TextBox>

    protected void Name_TextChanged(object sender, EventArgs e)
    {
        // Имя изменилось, считать его из TextBox.
        string name = Name.Text;
    }

События TextChanged генерируются только при возврате формы на сервер. По умолчанию элементы управления TextBox сами не инициируют возвраты формы и, таким образом, генерируют событие TextChanged, только если возврат формы был вызван другим элементом управления. Если же установить свойство AutoPostBack элемента управления TextBox в true, то возвраты формы будут происходить (и событие TextChanged генерироваться) в момент изменения текста в поле ввода:

<asp:TextBox ID="Name" runat="server" OnTextChanged="Name_TextChanged" AutoPostBack="True">
</asp:TextBox>

В ответ на каждый символ, вводимый пользователем, элементы управления TextBox в режиме AutoPostBack генерируют события TextChanged только при потере фокуса ввода (т. е. в тот момент, когда пользователь переходит к другому элементу управления формы), происшедшей после изменения текста. И это правильно, так как страница, выполняющая возврат формы при вводе каждого символа, работала бы очень медленно

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

Label — один из простейших, если не самый простой Web-элемент управления, — позволяет создавать на Web-формах программно управляемые надписи. Текст элемента управления доступен через свойство Text. Следующий оператор добавляет на Web-страницу строку "Привет":

<asp:Label ID="Label_Hello" runat="server" Text="Привет">
</asp:Label>

Часто элементы управления Label применяют, чтобы зарезервировать место для информации, выводимой серверными сценариями. Следующий оператор объявляет пустой элемент управления Label с программным идентификатором "Output":

<asp:Label ID="Output" runat="server">
</asp:Label>

А этот оператор серверного сценария помещает строку "Привет" в то место Web- страницы, где расположен элемент управления Label:

Output.Text = "Привет";

Используйте элемент управления Label, если нужно изменять текст на Web- странице из серверного сценария.

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

Добавляют к Web-формам гиперссылки и бывают двух типов: текстовые гиперссылки и гиперссылки-изображения. Следующий оператор создает гиперссылку, которая представляется на Web-странице в виде текстовой строки и ссылается на www.mail.ru

<asp:HyperLink ID="HyperLink_Mail" runat="server" NavigateUrl="http://mail.ru" Text="Почта">
</asp:HyperLink>

Небольшое изменение превращает ее в гиперссылку-изображение:

<asp:HyperLink ID="HyperLink_Mail" runat="server" NavigateUrl="http://mail.ru" ImageUrl="~/mail.gif">
</asp:HyperLink>

Обычно в тэге <asp:HyperLink> указывается либо атрибут Text, либо атрибут ImageUrl. Если же вы все-таки укажете оба, элемент управления будет использовать текст при отображении всплывающей подсказки. Класс Hyperlink предоставляет свойство Target, позволяющее управлять тем, как будет отображаться целевая Web-страница. Так, оператор:

<asp:HyperLink ID="HyperLink_Mail" runat="server" NavigateUrl="http://mail.ru" Text="Почта" ImageUrl="~/mail.gif" Target="_blank">
</asp:HyperLink>

открывает страницу в новом окне браузера. Другим применением атрибута Target является открытие страниц в заданных окнах или фреймах. Как и Label, элементы управления HyperLink следует использовать, только когда вы собираетесь изменять свойства элемента управления динамически. Следующий код инициализирует целевой адрес гиперссылки во время загрузки страницы:

<asp:HyperLink ID="HyperLink_Mail" runat="server" Text="Почта">
</asp:HyperLink>

    protected void Page_Load(object sender, EventArgs e)
    {
        HyperLink_Mail.NavigateUrl = "http://mail.ru";
    }

Одной из причин подобной инициализации элемента управления Hyperlink может быть выборка целевого URL из БД.

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

Добавляют к Web-формам картинки, генерируя тэги <img>. Самые популярные свойства Image — ImageUrl (определяет URL картинки, которая будет отображаться), ImageAlign (управляет выравниванием картинки) AlternateText (задает альтернативный текст для картинки). Альтернативный текст отображается вместо картинки в браузерах, которые работают в текстовом режиме. Следующий оператор объявляет элемент управления Image на Web-форме:

<asp:Image ID="Image_Logo" runat="server" ImageUrl="~/Logo.gif" AlternateText="Логотип" />

Элементы управления Image прекрасно подойдут для отображения картинок, чьи URL определяются во время выполнения, возможно, по результатам пользовательского ввода.

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

Создают на Web-формах поля флажков. Свойство Checked определяет, установлен ли флажок ( true ) или сброшен ( false ), a Text определяет текст, отображаемый рядом. Следующий оператор объявляет элемент управления CheckBox на Web-форме:

<asp:CheckBox ID="Confirm" runat="server" Text="Подтвердите свой выбор" />

А этот серверный сценарий определяет состояние флажка, когда форма возвращается на сервер:

if (Confirm.Checked) {
// Флажок установлен.
}
else {
// Флажок сброшен.
}

В нестандартном случае, когда нужно поменять местами флажок и текст, обычно отображаемый правее, используйте атрибут TextAlign="Left" в тэге элемента управления. При установке и сбросе флажка элементы управления CheckBox генерируют события CheckedChanged. По умолчанию событие CheckedChanged не генерируется сразу же при щелчке флажка, но откладывается до возврата формы. Чтобы реагировать на изменения состояния флажка сразу, установите в true свойство AutoPostBack для принудительного возврата формы:

<asp:CheckBox ID="Confirm" runat="server" 
Text="Подтвердите свой выбор" AutoPostBack="True" OnCheckedChanged="Confirm_CheckedChanged" />

    protected void Confirm_CheckedChanged(object sender, EventArgs e)
    {
        // Флажок только что установлен или сброшен.
        // Выполнить нужные действия.
    }

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