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

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

Управление работой вкладок

Вариант 1

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

  • Поместите на форму страницы впереди элемента MultiView1 компонент DropDownList из вкладки Standard
  • Установите для списка свойство AutoPostBack в значение True, чтобы при выборе нового пункта автоматически выполнялась обратная отсылка

После этих действий дескрипторный код страницы станет таким

<%@ 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" >
            </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>
Листинг 34.3. Дескрипторный код файла MultiViewControl.aspx
  • Выделите экземпляр DropDownList1 и через панель Properties в режиме Events создайте в застраничном файле MultiViewControl.aspx.cs обработчик события SelectedIndexChanged, который заполните так
// Обработчик события выбора в списке
    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        MultiView1.ActiveViewIndex = DropDownList1.SelectedIndex;
    }
Листинг 34.4. Обработчик события SelectedIndexChanged
  • Поместите в обработчик события Load застраничного файла MultiViewControl.aspx.cs следующий код
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;
        }
    }
Листинг 34.5. Код обработчика события Load в файле MultiViewControl.aspx.cs
  • Выполните страницу, результат должен быть не менее лучезарным, чем этот...