Lecture
Многокадровые элементы управления
здесь
Два высокоразвитых элемента управления MultiView и Wizard позволяют организовать для пользователя имитацию сложного многостраничного просмотра. Они содержат встроенные средства локальной навигации, обеспечивающие смену кадров с разным пользовательским интерфейсом, но единым оформлением.
Элемент управления MultiView
Элемент управления MultiView позволяет организовать страницу в виде множества вкладок. Каждая вкладка может содержать свой пользовательский интерфейс и обеспечивать свою форму представления одной и той же информации пользователя.
-
Создайте новый проект с именем WebSite5, выполнив команду меню File/New/WebSite и определив параметры мастера так
-
Переименуйте, для тренировки смелости в отношении модификации кода, сгенерированную страницу Default.aspx в MultiViewControl.aspx, в ее декларации @Page введите новое значение параметра Inherits="MultiViewControl", а в файле скрытого кода переименуйте класс в MultiViewControl (или не переименовывайте ни класс и Inherits, ни страницу, но я буду говорить об этих именах и код приводить с их использованием)
-
Поместите на страницу в режиме редактора 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>-
Запустите приложение и вы получите чистый экран броузера, поскольку созданные вкладки - представления еще не были заполнены интерфейсными элементами и показать им нечего
Замечание. Представления View можно добавлять и программно по мере необходимости (как и любой другой элемент управления). Для этого нужно создать экземпляр (например, View1 ) нового представления и добавить ссылку на него в коллекцию Views экземпляра (например, MultiView1 ) элемента MultiView с помощью MultiView1.Views.Add(View1) или MultiView1.Views.AddAt(index, View1). Свойство Views определено в классе System.Web.UI.WebControls.ViewCollection, который и имеет указанные методы Add() и AddAt(). Но мы будем для простоты использовать декларативный способ этапа проектирования.
Web-форма в оболочке после наших действий будет иметь вид
Visual Studio 2005 во время проектирования показывает все представления View в раскрытом виде, но на этапе выполнения на странице может отображаться только одно из них, которое раскроет пользователь. Каждое представление можно редактировать в оболочке точно также, как любую часть обычной страницы.
Будет ли при загрузке страницы раскрыто какое-либо представление или нет, определяется свойством MultiView.ActiveViewIndex, доступном и на этапе проектирования и программно. Если значение этого свойства равно "-1", то при начальной загрузке страницы ни одна из вкладок не будет раскрыта. Если свойство установлено в ноль, то будет раскрыта первая вкладка и т.д.
Давайте продолжим выполнение нашего примера и наполним представления каким-нибудь содержимым.
-
Поместите в корневую папку сайта какой-нибудь рисунок щадящего Web-формата ( *.gif, *.jpg, *.png ). Один из вариантов рисунка, файл MyPhoto.jpg, прилагается...
-
Поместите в представление View1 из вкладки Standard компонент Image (контейнер для рисунка) и декларативно настройте его так:
-
Поместите в представление View2 какой-нибудь текст
-
Поместите в представление View3 элемент Calendar из вкладки Standard и настройте его внешний вид
-
Выделите объект MultiView1 и установите его свойство ActiveViewIndex в значение ноль, чтобы при начальной загрузке страницы было открыто первое представление
Управление отображением представлений
Вариант 1
Как один из вариантов управления вкладками можно дать пользователю раскрывающийся список, с помощью которого он будет выбирать нужное представление.
-
Поместите на форму страницы впереди элемента MultiView1 компонент DropDownList из вкладки Standard
-
Установите для списка свойство AutoPostBack в значение True, чтобы при выборе нового пункта автоматически выполнялась обратная отсылка
-
Выделите экземпляр DropDownList1 и через панель Properties в режиме Events создайте обработчик события SelectedIndexChanged
Дескрипторное представление страницы будет таким
<%@ 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:DropDownList ID="DropDownList1" runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
</asp:DropDownList><br />
<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>-
Поместите в файл MultiViewControl.aspx.cs следующий код
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class MultiViewControl : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// Заполняем список только при первом запросе страницы,
// а потом все будет сохраняться в состоянии вида.
// Иначе список всегда будет переустанавливаться в начало
if (!IsPostBack)
{
// Подсоединяем коллекцию с вкладками к списку
DropDownList1.DataSource = MultiView1.Views;
// Назначаем идентификатор, значениями которого
// будут заполнены поля "Text" списка
DropDownList1.DataTextField = "ID";
// Заполняем список подсоединенными данными
DropDownList1.DataBind();
// Отображаем первое представление
MultiView1.ActiveViewIndex = 0;
// Синхронизируем список
DropDownList1.SelectedIndex = 0;
// Выделяем текущую дату
Calendar1.SelectedDate = DateTime.Now.Date;
Calendar1.SelectedDayStyle.BorderStyle = BorderStyle.Solid;
}
}
// Обработчик события выбора в списке
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = DropDownList1.SelectedIndex;
}
}-
Выполните страницу, результат должен быть не менее лучезарным, чем этот...
Вариант 2
В обработчике события Page_Load() мы, для тренировки, вставили код, чтобы при первом запросе страницы список программно заполнялся значениями атрибутов ID представлений. Этого можно и не делать, если вручную на этапе проектирования заполнить свойство Items списка более осмысленными именами.
Мы, также, назначили для списка AutoPostBack="True", чтобы он индивидуально осуществлял обратную отсылку. Ну, а если на странице будет много интерфейсных элементов с возможностью постинга, которые должен будет настроить пользователь. В этом случае будет расточительно, что каждый элемент интерфейса при настройке индивидуально посылает страницу на сервер для обновления. Лучше предусмотреть отдельную кнопку, которая отдаст команду броузеру на обратную отсылку после настройки всех интерфейсных элементов. Выполним эти модификации на новой странице.
-
Через панель Solution Explorer выполните копию страницы MultiViewControl.aspx и присвойте копии новое имя MultiViewControl1.aspx.
Обратите внимание, что файл кода .cs автоматически копируется и переименовывается вместе со страницей. Более того, в оболочке даже не предусмотрена возможность переименовать его отдельно, пока он связан со страницей. Правда, его можно скопировать отдельно, тогда он переименовывается.
-
Выполните команду меню Window/Close All Documents, чтобы закрыть все прежние окна редактирования рабочей области оболочки
-
Откройте новую страницу MultiViewControl1.aspx на редактирование и выполните команду меню Website/Set As Start Page, чтобы сделать теперь ее стартовой при запуске из оболочки
-
Выделите список через панель Properties и сбросьте его свойство AutoPostBack в False
-
Через раскрывающийся список в верхней части панели Properties выделите объект MultiView1 и задайте ActiveViewIndex=-1, чтобы ни одно представление при первой загрузке страницы у пользователя не было раскрыто
-
В файле MultiViewControl1.aspx.cs полностью очистите обработчик события Page_Load(), код которого в предыдущем примере программно заполнял список (можно полностью удалить этот обработчик, нам он здесь не понадобится)
Сейчас мы должны заполнить список декларативно (на этапе проектирования).
-
Выделите список и заполните его свойство Items так
-
Добавьте на новую страницу справа от списка кнопку Input (Submit) из вкладки HTML панели Toolbox (воспользуемся простой кнопкой) и задайте ей Value=Show; Title=Раскрыть вкладку
-
Запустите приложение и неизменяя список понажимайте кнопку Show.
Ничего не происходит, пока в списке мы не выбирем новый пункт. Только после этого свойство MultiView1.ActiveViewIndex примет отличное от -1 значение и представления при обратной отсылке начнут работать. Чтобы исправить это, нужно код присвоения значения свойству ActiveViewIndex переместить в обработчик нажатия кнопки.
Мы видим, что оболочка создала код заготовки JavaScript -сценария, который мы должны заполнить и который страница готова посылать на клиентский броузер. Чтобы не вникать в JavaScript приведем в свое оправдание аргумент, что поддержка сценариев JavaScript - дело ненадежное, поскольку пользователь может в своем броузере ее отключить.
-
Удалите созданный оболочкой предыдущим действием код JavaScript -сценария. Для этого в режиме Source поместите текстовый курсор редактора внутрь блока кода <script language="javascript" type="text/javascript">..|..</script> и в нижней части рамки окна редактора щелкните на кнопке <script>. Весь выделенный код можно удалять
-
Удалите из дескриптора <input> кнопки Submit1 onclick="return Submit1_onclick()", сгенерированный оболочкой
-
Щелкните на Submit1 правой кнопкой мыши и выполните команду Run As Server Control. Этим действием в дескриптор <input> будет добавлен атрибут runat="server", который заставит ASP.NET запускать обработчик кнопки (если мы его предусмотрим), если с броузера с обратной отсылкой будет прислано событие, что клиент щелкал на этой кнопке
-
Выделите список DropDownList1 и через панель Properties в режиме Events очистите поле события SelectedIndexChanged
-
Двойным щелчком на, теперь уже серверной, кнопке Submit1 создайте для нее обработчик в файле MultiViewControl1.aspx.cs
-
Перенесите код обработчика события SelectedIndexChanged в код нового обработчика, а старый обработчик удалите
В результате код файла будет таким
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class MultiViewControl : System.Web.UI.Page
{
// Обработчик события на кнопке Submit1
protected void Submit1_ServerClick(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = DropDownList1.SelectedIndex;
}
}-
Выполните страницу
Теперь по прибытию на сервер обратной отсылки система ASP.NET распознает присланное событие щелчка на кнопке. Свойству MultiView1.ActiveViewIndex в обработчике события кнопки присваивается значение выбранной пользователем опции списка. Клиенту страница отправляет содержимое вкладки, соответствующей его выбору.