|
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 можно задать адрес страницы, которая будет обрабатывать текущую.
