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

Вариант 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 (воспользуемся простой кнопкой) и задайте ей следующие настройки:
  • ID = Submit1
  • Value = Show
  • Title = Раскрыть вкладку
• Запустите приложение и понажимайте кнопку Show, не изменяя список

Ничего не происходит, пока в списке мы не выбирем новый пункт. Только после этого свойство MultiView1. ActiveViewIndex примет отличное от -1 значение и представления при обратной отсылке начнут работать. Чтобы исправить это, нужно код присвоения значения свойству ActiveViewIndex переместить из обработчика спискового события SelectedIndexChanged в обработчик щелчка кнопки.

• Создайте обработчик события Click для кнопки Submit1 двойным щелчком на ней мышью

Мы видим, что оболочка создала код заготовки JavaScript -сценария, который мы должны заполнить и который страница готова посылать на клиентский броузер. Это стандартное поведение оболочки при создании обработчиков: если элемент управления на активной странице не помечен как серверный (нет атрибута runat =" server "), значит свою динамику он может реализовать только на стороне клиента в блоке сценариев 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, тем самым оболочка удалит из дескриптора DropDownList1 ссылку на этот обработчик. После этого обработчик станет свободным методом класса, у которого нет неявных вызовов с помощью механизма событий
• Двойным щелчком на кнопке Submit1, теперь уже серверной, создайте для нее обработчик в файле MultiViewControl1.aspx.cs
• Перенесите код обработчика события SelectedIndexChanged в код нового обработчика, а старый обработчик события 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;
    }
}

• Выполните страницу и отметьте следующее

При первой загрузке страницы обработчик щелчка на кнопке еще не сработал, поскольку не было обратной отсылки, а выполнился только отклик на первый запрос. Но все последующие обратные отсылки страницы выполняются по щелчку клиента на кнопке Submit1 и присылают на сервер информацию о том, что на клиенте произошло событие Click. По прибытию на сервер такой обратной отсылки система ASP.NET распознает присланное событие Click, свойству MultiView1.ActiveViewIndex в обработчике присваивается значение выбранной пользователем опции списка и элемент MultiView1 при формировании текущего отклика генерирует содержимое вкладки, соответствующей этому выбору.