6.3.3. Использование Image, ImageButton

Отображение графики на Веб-странице является абсолютно необходимым условием. ASP.NET предоставляет несколько возможностей отображения графики:

1. Как фон, заполняющий всю страницу, для этого можно воспользоваться свойством Background Веб-формы. Можно также использовать свойство BackImageUrl элемента Panel.

2. На переднем плане. Для этого используется элемент управления Image.

3. На кнопке, способной реагировать на действия пользователя. Для этого используется элемент управления ImageButton.

4. С помощью карты изображений, реализуемой посредством элемента управления ImageMap.

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

В следующем примере при нажатии на соответствующую кнопку отображается изображение машины, мотоцикла либо велосипеда (рис. 6.7):

protected void buttonCar_Click(object sender, EventArgs e)

{

Image1.ImageUrl = "~//Images//car.jpg";

}

protected void buttonBike_Click(object sender, EventArgs e)

{

Image1.ImageUrl = "~//Images//bike.jpg";

}

protected void buttonCycle_Click(object sender, EventArgs e)

{

Image1.ImageUrl = "~//Images//cycle.jpg";

}

Рис. 6.7.  Смена выводимого на экран изображения при нажатии на соответствующую кнопку

Элемент управления ImageButton имеет встроенную возможность реагирования на события, совершаемые пользователем. При этом в обработчик события щелчка левой кнопкой мыши по нему отправляется специальный объект ImageClickEventArgs, предоставляющий свойства X и Y, которые определяют место изображения, на котором был совершен щелчок. Используя эти свойства, можно создать карту изображения. Ниже показан код, который отображает координаты точки, в которой был произведен щелчок мыши, а также определяет, в пределах какой фигуры он был произведен (рис. 6.8):

protected void ImageButton1_Click(object sender, ImageClickEventArgs e)

{

string strClickFigure="";

if (!(e.X <= 380 && e.X >= 20 && e.Y <= 380 && e.Y >= 20))

strClickFigure = "рамка";

if (e.X>=60 && e.X<=210 && e.Y>=60 && e.Y<=210)

strClickFigure="квадрат";

if ((e.Y>=495-e.X) && (e.Y>=e.X-45) && e.Y<=332)

strClickFigure="треугольник";

Label1.Text = "Вы щелкнули в точке Х="+e.X.ToString()+";

Y="+e.Y.ToString()+" это "+strClickFigure;

}

Рис. 6.8.  Пример использования элемента ImageButton

6.3.4. Использование Literal и HiddenField

Элемент управления Literal представляет собой один из способов вывода информации на экран. Literal можно использовать в качестве контейнера для размещения HTML элементов на странице. Чаще всего его используют для динамического добавления текста. Схожие возможности по добавлению текста предоставляет элемент Label, Literal отличается от него тем, что не добавляет дополнительных HTML элементов к тексту. Label, например, размещает текст внутри тэга <span>, Panel – внутри <div> и т.д. Размещение элементов внутри тэгов создает возможность для поддержки ими стилей оформления, Literal же, не имеет такой возможности. Рекомендуется использовать элемент Literal в том случае, когда необходимо размещать текст на странице без использования дополнительной разметки, либо в том случае, когда существует HTML текст (например, хранящийся в файле или базе данных), содержащий форматирование с использованием тэгов, и его необходимо вывести на экран.

Самым важным свойством элемента управления Literal является Mode. Возможны три значения этого свойства (табл. 6.8).

Таблица 6.8. Значения свойства Mode элемента управления Literal
Значения	Описание
Transform	Любая разметка, добавляемая к элементу управления, преобразуется таким образом, чтобы максимально удовлетворять особенностям протокола браузера, запрашивающего страницу.
PassThrough	Добавляемая к элементу управления разметка передается браузеру как есть, без каких-либо модификаций.
Encode	Добавляемая к элементу управления разметка декодируется с использованием метода HtmlEncode, преобразующего HTML представление страницы в текст.

Например, при использовании следующего примера элемента Literal могут быть получены различные результаты.

При использовании значения Mode=PassThrough, как показано в следующем фрагменте исходного кода:

private string s =

"<input id='Button1' type='button' value='Добавить' /><br/>

<table border='1' cellpadding='1' cellspacing='0'>

<tr>

<td>Идентификатор</td>

<td>наименование</td>

<td>кол-во</td>

</tr>

<tr>

<td>1</td>

<td>Велосипед горный</td>

<td>10</td>

</tr>

<tr>

<td>2</td>

<td>Велосипед дорожный</td>

<td>50</td>

</tr>

</table>";

protected void Page_Load(object sender, EventArgs e)

{

Literal1.Mode = LiteralMode.PassThrough;

Literal1.Text = s;

}

будет получен результат, изображенный на рис. 6.9.

Рис. 6.9.  Использование Literal для отображения информации в режиме PassThrough

А при использовании режима Encode результат, изображенный на рис. 6.10.

Рис. 6.10.  Использование Literal для отображения информации в режиме Encode.

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

У элемента HiddenField существует лишь одно свойство, заслуживающее внимания. Это Value, посредством которого ему и присваивается значение.

При использовании элемента управления HiddenField необходимо помнить о безопасности, т.к., несмотря на то, что информация, хранящаяся в данном элементе, не отображается на экране, ее легко можно увидеть, просмотрев исходный код страницы. Более того, пользователь может изменить данную информацию перед инициированием postback и отправкой ее на сервер. Поэтому не рекомендуется хранить какие-либо конфиденциальные данные, а также данные, критичные для выполнения приложения на сервере в данном элементе управления.