Опубликован: 13.07.2010 | Доступ: свободный | Студентов: 889 / 20 | Оценка: 4.40 / 4.20 | Длительность: 77:34:00
Самостоятельная работа 34:

Многокадровые элементы управления

Аннотация: Элемент управления MultiView. Управление работой вкладок. Добавление к MultiView функций навигации. Элемент управления Wizard. Программирование событий элемента управления Wizard. Стили элемента Wizard. Шаблоны элемента Wizard.

Файлы к лабораторной работе Вы можете скачать здесь.

Два высокоразвитых элемента управления MultiView и Wizard позволяют организовать для пользователя имитацию сложного многостраничного просмотра. Они содержат встроенные средства локальной навигации, обеспечивающие смену кадров с разным пользовательским интерфейсом, но единым оформлением.

Упражнение 1. Элемент управления MultiView

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

  • Создайте новый пустой проект с именем MultiView, выполнив команду меню File/New/WebSite и определив параметры мастера так

  • Командой Add New Item добавьте к проекту страницу типа Web Form с отделенным кодом и именем MultiViewControl.aspx
  • Поместите на страницу в режиме редактора Design из вкладки Standard компонент-контейнер MultiView
  • Поместите на страницу в режиме редактора Design внутрь созданного объекта MultiView1 из той же вкладки Standard три экземпляра компонента View (компонент View называют представлением данных)

В результате оболочка сгенерирует следующий код разметки

<%@ Page AutoEventWireup="true" 
       CodeFile="MultiViewControl.aspx.cs" 
     Inherits="MultiViewControl" Language="C#" %>
  
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:MultiView ID="MultiView1" runat="server">
            <asp:View ID="View1" runat="server">
            </asp:View>
            <asp:View ID="View2" runat="server">
            </asp:View>
            <asp:View ID="View3" runat="server">
            </asp:View>
        </asp:MultiView>
    </div>
    </form>
</body>
</html>
Листинг 34.1. Дескрипторный код файла MultiViewControl.aspx
  • Запустите приложение и вы получите чистый экран броузера, поскольку созданные вкладки - представления еще не были заполнены интерфейсными элементами, поэтому они ничего и не генерируют для клиента

Замечание. Представления View можно добавлять и программно по мере необходимости (как и любой другой элемент управления). Для этого нужно создать экземпляр (например, View1 ) нового представления и добавить ссылку на него в коллекцию Views экземпляра (например, MultiView1 ) элемента MultiView с помощью MultiView1.Views.Add(View1) или MultiView1.Views.AddAt(index, View1). Свойство Views определено в классе System.Web.UI.WebControls.ViewCollection, который и имеет указанные методы Add() и AddAt(). Но мы будем для простоты использовать декларативный способ этапа проектирования.

Web-форма в оболочке после наших действий будет иметь вид


Какое представление будет генерировать элемент MultiView, зависит от значения свойства MultiView.ActiveViewIndex, доступного декларативно и программно. Если значение этого свойства равно " -1 ", то при исполнении страницы ни одна из вкладок не будет генерировать HTML-отклик. Если свойство установлено в ноль, то будет работать первая вкладка, и т.д.

Продолжим выполнение упражнения и наполним представления View1, View2, View3 вариантами содержимого.

  • Командой Add Existing Item добавьте в корневую папку сайта какой-нибудь рисунок Web-формата (*. gif, *. jpg, *. png ), который занимает не очень много места. Один из вариантов рисунка - файл MyPhoto.jpg в прилагаемой папке Source
  • Поместите в представление View1 из вкладки Standard компонент Image (контейнер для рисунка) и через панель Properties декларативно настройте его так:
    • ImageUrl =" ~/MyPhoto.jpg " (символ ' ~ ' тильда обозначает корень виртуального каталога сайта)
  • Поместите в представление View2 какой-нибудь текст
  • Поместите в представление View3 элемент Calendar из вкладки Standard и настройте его внешний вид
  • Выделите объект MultiView1 и установите его свойство ActiveViewIndex в значение ноль, чтобы при начальной загрузке страницы было открыто первое представление

После выполненных действий разметка страницы будет описываться следующим кодом

<%@ Page AutoEventWireup="true" 
    CodeFile="MultiViewControl.aspx.cs" 
    Inherits="MultiViewControl" Language="C#" %>
  
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Элемент управления множеством представлений</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
             <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
                <asp:View ID="View1" runat="server">
                    <h1>Мое фото</h1>
                    <asp:Image ID="Image1" runat="server" ImageUrl="~/MyPhoto.jpg" />
                </asp:View>
                
                <asp:View ID="View2" runat="server">
                    <h1>Мои стихи</h1>
                    <p>
                        У Лукоморья дуб зеленый<br />
                        Златая цепь на дубе том<br />
                        И днем и ночью кот ученый<br />
                        Все ходит по цепи кругом
                    </p>
                </asp:View>
                
                <asp:View ID="View3" runat="server">
                    <h1>Мой календарь</h1>
                    <asp:Calendar ID="Calendar1" runat="server" BackColor="#C0FFFF" 
                        BorderColor="Red" BorderStyle="Ridge">
                    </asp:Calendar>
                </asp:View>
            </asp:MultiView>
        </div>
    </form>
</body>
</html>
Листинг 34.2. Код разметки страницы MultiViewControl.aspx

Если сейчас запустить страницу MultiViewControl.aspx на выполнение, то мы увидим только первую раскрытую вкладку с фотографией, а для активизации других вкладок у нас нет пока механизма.