Основы ASP.NET 2.0

       

ImageButton


Элемент управления ImageButton представляет собой комбинацию элементов Image и Button. Его можно использовать для создания изображений, чувствительных к клику мышки. Щелчок является событием, при наступлении которого выполняется некоторый код:

<asp:ImageButton id="imgButton" OnCommand ="SubmitPartl" runat="server" />

ImageButton позволяет достичь эффекта, аналогичного карте изображения. Событие Click позволяет узнать координаты щелчка мыши и реагировать соответственно региону, в котором была нажата мышь. Обработчик события должен принимать аргумент типа ImageClickEventArgs — наследника System.EventArgs. У него есть дополнительные поля X и Y — координаты клика мышки:

protected void ImageButton1_Click(object sender, System.Web.UI.WebControls.ImageClickEventArgs e) { // обработка события }

Вернемся опять в туристическое агентство. Директор вызвал вас (программиста) и попросил воплотить следующее: на странице с изображением карты Каира необходимо сделать так, чтобы когда пользователь нажимал мышкой в любое место, открывалась карта района, на который он нажал. Всего имеется 9 районов. Все картинки имеют размер 300 на 300 пикселов. Районы одинаковые, расположены в таблице 3 на 3.

Вы пишете:

<%@ Page Language="C#" %> <script runat="server">

void Magnify(Object sender, ImageClickEventArgs e) { int x=e.X; int y=e.Y; int row=y/100; // строка, на которую кликнули int col=x/100; // столбец, на который кликнули

int count=row*3+col+1; //номер картинки plan.ImageUrl ="Cairo/map-"+count+".jpg"; plan.Enabled = false; // это нужно, чтобы не открывался другой район.


instruction.Text=" Нажмите Back, чтобы увидеть весь город"; } </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head> </head> <body> <form runat="server"> <h3>Карта Каира </h3> <br /> <br /> <asp:Label id="instruction" runat="server">Нажмите мышью на любой район, чтобы увеличить картинку.</asp:Label> <br /> <br /> <asp:ImageButton id="plan" onclick="Magnify" runat="serv- er" width="300" height="300" ImageUrl="Cairo/map.gif"></asp:ImageButton> <br /> <br /> </form> </body> </html>

А более простое использование — создание красивых нестандартных кнопок. Свойство CommandName используется так же, как и в случае с обычной кнопкой:

<form id="form1" runat="server"> <div> <asp:ImageButton ID="ImageButton1" runat="server" CommandName="create" ImageUrl="~/Images/1button-create.gif" OnCommand="ImageButton_Click" OnClientClick='alert("clicked")' ToolTip="Create very nice account" /> <asp:ImageButton ID="ImageButton2" runat="server" CommandName="add" ImageUrl="~/Images/1button-add.gif" OnCommand="ImageButton_Click" /> <asp:ImageButton ID="ImageButton3" runat="server" ImageUrl="~/Images/1button-cancel.gif" CommandName="cancel" OnCommand="ImageButton_Click" /><br /> <asp:Label ID="Message" runat="server"></asp:Label></div> </form>



Картинки этого примера есть в поставке Visual Studio 2005 Microsoft Visual Studio 8\Common7\IDE\ProjectTemplates\Web\CSharp\1033. Скопируйте их в папку Images вашего проекта и добавьте их в проект.

Эту функцию вставьте в файл отделенного кода:

protected void ImageButton_Click(Object sender, CommandEventArgs e) { switch (e.CommandName) { case "create":

// Insert code to create. Message.Text = "Creating "; break;

case "add":

// Insert code to add. Message.Text = "Adding "; break; case "cancel":

// Insert code to cancel. Message.Text = "canceling"; break; }

}

У первой кнопки установлено свойство ToolTip. Посмотрите страницу в Internet Explorer. Окно с подсказкой появится при наведении на эту кнопку. А вот Opera выводит подсказку для всех кнопок. Но для тех, в которых установлен ToolTip, он выводится на первой строчке. Во второй — адрес.


Рис. 4.1. 

У кнопки также показано использование свойства OnClientClick. Оно задает клиентский сценарий, который будет исполняться при нажатии на кнопку без обращения к серверу. Здесь это функция alert языка Javascript — вызов окна с уведомлением.


Содержание раздела







Forekc.ru
Рефераты, дипломы, курсовые, выпускные и квалификационные работы, диссертации, учебники, учебные пособия, лекции, методические пособия и рекомендации, программы и курсы обучения, публикации из профильных изданий