https://technet.microsoft.com/en-us/library/ms143221(v=sql.105).aspx |
Серверные элементы управления (продолжение)
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="server" 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, он выводится на первой строчке. Во второй — адрес.
У кнопки также показано использование свойства OnClientClick. Оно задает клиентский сценарий, который будет исполняться при нажатии на кнопку без обращения к серверу. Здесь это функция alert языка Javascript — вызов окна с уведомлением.
HyperLink и LinkButton
HyperLink — гиперссылка обычная или с картинкой. Они позволяют передвигаться по сайту или давать ссылку на другие сайты:
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Customer.aspx">HyperLink</asp:HyperLink>
Знак ~ обозначает корневой каталог текущего сайта.
LinkButton — это кнопка, которая выглядит как гиперссылка. Нажатие на нее приводит к перезагрузке страницы. В свойстве PostBackUrl можно задать адрес страницы, которая будет обрабатывать текущую.