Многокадровые элементы управления
Файлы к лабораторной работе Вы можете скачать 
здесь.
Два высокоразвитых элемента управления 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 декларативно настройте
его так:
-
Поместите
в представление 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 на выполнение, то мы увидим только первую раскрытую вкладку с фотографией, а для активизации других вкладок у нас нет пока механизма.