Опубликован: 14.11.2006 | Доступ: свободный | Студентов: 5898 / 532 | Оценка: 4.18 / 3.74 | Длительность: 16:37:00
ISBN: 978-5-9556-0085-7
Лекция 4:

Серверные элементы управления (продолжение)

< Лекция 3 || Лекция 4: 12345 || Лекция 5 >

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, он выводится на первой строчке. Во второй — адрес.


Рис. 4.1.

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

HyperLink и LinkButton

HyperLink — гиперссылка обычная или с картинкой. Они позволяют передвигаться по сайту или давать ссылку на другие сайты:

<asp:HyperLink ID="HyperLink1" runat="server" 
NavigateUrl="~/Customer.aspx">HyperLink</asp:HyperLink>

Знак ~ обозначает корневой каталог текущего сайта.

LinkButton — это кнопка, которая выглядит как гиперссылка. Нажатие на нее приводит к перезагрузке страницы. В свойстве PostBackUrl можно задать адрес страницы, которая будет обрабатывать текущую.

< Лекция 3 || Лекция 4: 12345 || Лекция 5 >
Алексей Савельев
Алексей Савельев

https://technet.microsoft.com/en-us/library/ms143221(v=sql.105).aspx

Денис Прокофьев
Денис Прокофьев

Везде написано, что это самый независимый и простой в использовании навигационный элемент управления, что он работает сразу с web.sitemap и не требует определения SiteMapDataSource.

Моя карта сайта состоит из двух страниц, вложенных друг в друга. asp:Menu, asp:TreeView отбображаются как ожидалось, а вот asp:SiteMapPath - нет. Он не виден нигде. Однако на его месте формируется разметка: <span id="SiteMapPath1"><a href="#SiteMapPath1_SkipLink" style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;">Проход по ссылкам навигации</a><a id="SiteMapPath1_SkipLink"></a></span> - т.е. элемент отрабатывает.

В словах xHTML это выглядит так: <asp:SiteMapPath ID="SiteMapPath1" runat="server" />. Причем не важно - внутри тега form или снаружи - всегда одинаково.

Т.к. другие нав. ЭУ работают через простой источник данных без ошибок, делаю вывод - карта составлена правильно. ИД: <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

Карта: <?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="~/L11_1_simplePage.aspx" title="Страница 1"  description="Простая страница 1." >
    <siteMapNode url="~/L11_1SimplePage2.aspx" title="Страница 2"  description="Простая страница 2" />
  </siteMapNode>
</siteMap>

Почему так происходит? Вроде делаю все по примерам. VS Community 2015. NetFramework в проекте: v4.0.30319