Поделиться через

Сведения о веб-элементе управления MultiPage

Элемент управления MultiPage обеспечивает определение коллекций элементов PageView. Как и другие веб-элементы управления Windows Internet Explorer, элемент MultiPage создает веб-страницы, предназначенные для браузеров всех уровней. Браузерами верхнего уровня для веб-элементов управления являются Microsoft Internet Explorer 5.5 и более поздние версии, а браузерами нижнего уровня — Internet Explorer 5.01 и более ранние версии, а также сторонние браузеры. Элемент MultiPage может быть создан декларативно и использует клиентскую и серверную объектную модель скриптов.

Элементы MultiPage и TabStrip можно легко синхронизировать, чтобы обновления выбранного элемента Tab в меню TabStrip автоматически вызывали обновление выбранного в настоящее время элемента PageView. Совместное использование элементов MultiPage и TabStrip позволяет представлять и делить содержимое на страницы без перехода на другие URL-адреса. Дополнительные сведения о совместном использовании этих элементов см. в разделе Использование MultiPage с веб-элементом TabStrip.

Этот документ содержит следующие разделы:

  • Разработка с помощью элемента управления MultiPage 
  • Объекты MultiPage 
    • Поведение MultiPage 
    • Объекты MultiPage ASP.NET 
  • Создание простого элемента MultiPage 
  • Создание веб-форм с помощью MultiPage 
  • Динамическое добавление элементов управления PageView 
  • Использование MultiPage с веб-элементом управления TabStrip 
  • Связанные темы

Разработка с помощью элемента управления MultiPage

В ASP.NETлюбой элемент HTML на веб-странице можно отметить как серверный элемент управления. Если элемент отмечается как серверный, то ASP.NET обрабатывает элемент управления на веб-сервере и создает выходные данные, которые служат для корректного отображения в конкретном клиентском браузере. В случае с веб-элементами управления в Internet Explorer 5.5 отправляются страницы с поведением динамического HTML (DHTML), которые используют дополнительные функции браузера.

MultiPage поддерживает два способа создания. Интерфейсы MultiPage могут реализовываться в веб-формах ASP.NET с помощью элементов и объектов, предоставленных серверными элементами управления MultiPage. Кроме того, интерфейсы MultiPage также могут быть созданы на HTML-страницах с помощью поведения MultiPage. В любом случае на веб-странице можно создавать различные элементы, но в связи с различиями архитектуры компонентов в ASP.NET и Internet Explorer 5.5 клиентские и серверные объектные модели немного отличаются.

В общем случае, если клиентский браузер неизвестен, рекомендуется создавать веб-формы ASP.NET с помощью элементов управления MultiPage. Это обеспечивает корректность отображения содержимого в основных браузерах, так как элементы управления ASP.NET определяют тип браузера. Содержимое, загруженное из ASP.NET в Internet Explorer 5.5, всегда содержит поведение MultiPage.

При создании содержимого для Internet Explorer 5.5 и более поздних версий рекомендуется использовать на веб-страницах клиентские скрипты в сочетании с поведением MultiPage. Это позволяет ускорить загрузку данных, так как обработка на сервере не выполняется. Кроме того, веб-страницы с использованием поведения MultiPage имеют более совершенный пользовательский интерфейс, так как не требуется передача данных на веб-сервер.

Объекты MultiPage

Элемент управления MultiPage создается с помощью сочетания одного или нескольких элементов.

Имя элемента Описание
MultiPage Определяет контейнер для элементов PageView.
PageView Создает элемент PageView в элементе MultiPage.

Ссылки на полный набор справочной документации по клиентским и серверным объектам, реализуемым с помощью элемента управления MultiPage, см. в разделе Справка по MultiPage. Справочная документация разделена на страницы, посвященные клиентским и серверным объектам. Клиентские объекты предоставляются поведением MultiPage, а страницы объектов ASP.NETпередаются отдельно.

В следующих разделах описываются основные различия клиентских и серверных объектов, предоставляемых элементом MultiPage.

Поведение MultiPage

Объектная модель компонентов в Internet Explorer 5.5 и более поздних версиях обеспечивает определение настраиваемых элементов XML. Такие настраиваемые элементы называются поведениями элементов. Поведение элементов можно определить с помощью файла компонента HTML (HTC-файла), содержащего скрипт, который определяет поведение настраиваемого элемента.

При определении поведения элемента компонент сценария может определить только поведение одного элемента. При этом пользовательский интерфейс MultiPage реализуется с помощью двух различных элементов: MultiPage и PageView. Так как реализация поведения MultiPage использует один HTC-файл, подчиненные элементы MultiPage фактически анализируются в качестве строкового содержимого.

В реализации поведения MultiPage скрипт HTC-файла анализирует элементы PageView, которые являются подчиненными элементами MultiPage, а затем создает соответствующий пользовательский интерфейс с помощью DHTML. Такой способ позволяет создавать различные типы элементов с помощью одного поведения элемента.

Объекты, предоставленные поведением MultiPage, можно настроить с помощью скриптов Microsoft JScript или Microsoft Visual Basic Scripting Edition (VBScript).

Объекты MultiPage ASP.NET

В отличие от поведений DHTML элементы управления ASP.NETмогут реализовывать любое количество элементов в одной сборке. Кроме того, для веб-элементов управления все элементы ASP.NET реализуются сборкой Microsoft.Web.UI.WebControls.dll, имя файла которой совпадает с пространством имен, используемым этими элементами. Таким образом, архитектура компонентов в платформе ASP.NET не допускает использования строковых элементов содержимого. Для управления объектами MultiPage в веб-форме ASP.NETможно использовать любой язык среды CLR.

Создание простого элемента MultiPage

В этом разделе приведены пошаговые указания по созданию простого элемента MultiPage. Их можно выполнить в любом текстовом редакторе.

  1. Если на компьютере не установлены веб-элементы управления, обратитесь к разделу Загрузка веб-элементов управления Internet Explorer для получения указаний по загрузке.
  2. Создайте веб-приложение с помощью Microsoft Visual Studio.
    Веб-приложение должно называться webcontrols и может использоваться для всех примеров этой статьи.
    Примечание  Возможно использование существующего веб-приложения, но для корректного функционирования веб-элементов управления необходимо настроить сеть в качестве веб-приложения.
  3. Создайте пустую страницу веб-форм.
    Добавьте новый файл и сохраните его под именем multipage1.aspx.

  4. Добавьте директиву import.

    Укажите директиву import для веб-элементов управления в первой строке кода веб-формы. Она должна выглядеть следующим образом.

    <%@ import namespace="Microsoft.Web.UI.WebControls" %>

    Примечание  В этом примере директива @ Import необязательна. Она необходима только при создании веб-форм, использующих серверный скрипт для создания или изменения объектов веб-элементов управления.

  5. Добавьте директиву @ Register.

    Укажите директиву @ Register для веб-элементов управления во второй строке кода веб-формы.

    <%@ Register TagPrefix="mymultipage"

    Namespace="Microsoft.Web.UI.WebControls"

    Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>

  6. Добавьте структуру документа.

    Под директивой @ Register добавьте следующее содержимое для создания стандартной структуры документа.

    <HTML>

    <HEAD></HEAD>

    <BODY></BODY>

    </HTML>

  7. Добавьте элемент Form.

    Все веб-элементы управления следует создавать в элементе FORM. Добавьте в элемент BODY следующую разметку.

    <BODY>

    <FORM runat="server"></FORM>

    </BODY>

    Обратите внимание на то, что указан атрибут runat для элемента FORM, что указывает на необходимость обработки любого пользовательского ввода в ASP.NET.

    Теперь веб-форма содержит все директивы для обработки, элементы и содержимое, необходимое для работы с веб-элементами управления. Файл multipage1.aspxдолжен содержать следующие данные:

    <%@ import namespace="Microsoft.Web.UI.WebControls" %>

    <%@ Register TagPrefix="mymultipage"

    Namespace="Microsoft.Web.UI.WebControls"

    Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>

    <HEAD></HEAD>

    <BODY>

      <FORM runat="server"></FORM>

    </BODY>

    Сохраните страницу и просмотрите ее в браузере. Если все верно, то отобразится пустая страница. Страница компилируется перед просмотром, а все ошибки синтаксиса отображаются. При появлении ошибок исправьте их. Если приведенный пример кода не работает, то могут быть некорректно установлены веб-элементы управления.

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

  8. Добавьте элемент MultiPage.

    Добавьте элемент MultiPage в качестве подчиненного элемента FORM, а затем установите атрибут runat равным server.

    <BODY>

      <FORM runat="server">

               <mymultipage:multipage runat="server"></mymultipage:multipage>

      </FORM>

    </BODY>

    Сейчас элемент MultiPage не содержит ничего, поэтому на веб-странице ничего не отображается.

    Примечание  В префиксе тега элемента MultiPage значение mymultipage используется для всех веб-элементов управления на странице, так как оно было предварительно определено в директиве @ Register.

  9. Добавьте элемент PageView в элемент MultiPage.

    Затем добавьте два элемента PageView в качестве подчиненных элементов для MultiPage.

    <mymultipage:multipage runat="server" selectedindex="1">

      <mymultipage:pageview><p>Это страница 1</p></mymultipage:pageview>

      <mymultipage:pageview><p>Это страница 2, и это представление выбрано!

      </p></mymultipage:pageview>

    </mymultipage:multipage>

    Сохраните страницу и обновите ее в браузере. HTML-код во втором элементе PageView необходимо отобразить, так как использовался атрибут SelectedIndex в элементе MultiPage.

    Индексы отсчитываются от нуля, поэтому установка SelectedIndex равным 1 позволяет выбрать второе представление PageView для исходного отображения страницы.

На этом создание примера MultiPage завершено. В следующих примерах показано добавление других свойств и компонентов MultiPage.

Создание веб-форм с помощью MultiPage

В этом разделе представлена технология управления элементами MultiPage и PageView с помощью скрипта. В примере показано использование простых методов для создания мастера приложения корзины покупок.

Мастер запрашивает у пользователя сведения, которые могут использоваться для обработки покупки в интернет-магазине. В этом примере на продажу по высокой цене предлагается золотая рыбка. Мастер состоит из четырех шагов, каждый из которых представляет собой небольшую форму для сбора информации. Таким образом, для упорядочивания HTML-разметки каждой из форм в веб-форме используется четыре элемента PageView.

Ниже представлено тело веб-формы:

<body runat="server">

<h1>Распродажа золотых рыбок!</h1>

<form id="theForm" runat="server">

<mywiz:MultiPage id="Wizard" runat="server" BorderWidth="1" BorderStyle="Solid" BorderColor="Gray">

<mywiz:PageView id="Cart">

<h2>Корзина покупок</h2>

<p>Это пример мастера оплаты для демонстрации элемента управления MultiPage.</p>

<ul>

  <li>Этот пример не предназначен для реального использования.</li>

  <li>Сегодня продается только золотая рыбка.</li>

  <li>Содержимое корзины покупок не изменяется.</li>

</ul>

<p>Золотая рыбка

<br>$250,00

<br>Количество: 1

    </p>

</mywiz:PageView>

<mywiz:PageView id="Shipping">

<h2>Доставка</h2>

<p>Введите сведения о доставке.

    <table>

        <tr>

                <td>Имя:</td>

<td><asp:TextBox id="FirstName" runat="server" /></td>

        </tr>

        <tr>

                <td>Фамилия:</td>

<td><asp:TextBox id="LastName" runat="server" /></td>

        </tr>

        <tr>

<td>Адрес:</td>

<td><asp:TextBox id="Address" runat="server" TextMode="MultiLine" Rows="3"/></td>

        </tr>

    </table>

</mywiz:PageView>

<mywiz:PageView id="Billing">

<h2>Оплата</h2>

<p>Введите сведения об оплате.

    <table>

        <tr>

<td>Кредитная карта:</td>

<td><asp:TextBox id=Card runat=server /></td>

        </tr>

        <tr>

<td>Адрес плательщика совпадает с адресом доставки:</td>

<td><asp:CheckBox id=BillShipping runat="server" Checked="true" /></td>

        </tr>

        <tr>

                <td>Имя:</td>

<td><asp:TextBox id="BillFirstName" runat="server" /></td>

        </tr>

        <tr>

<td>Фамилия:</td><td><asp:TextBox id="BillLastName" runat="server" /></td>

        </tr>

        <tr>

<td>Адрес:</td><td><asp:TextBox id="BillAddress" runat="server" TextMode="MultiLine" Rows="3"/></td>

        </tr>

    </table>

</mywiz:PageView>

<mywiz:PageView id="Receipt">

<h2>Счет</h2>

<p>Золотая рыбка

<br>$250,00

<br>Количество: 1

<br>

<br>Доставка: $10.00

<br>Налог: $2.00

<br>Сумма: $262.00

<br>

    </p>

<div id="ReceiptPane" runat="server"></div>

</mywiz:PageView>

</mywiz:MultiPage>

<asp:Button id="BackBtn" runat="server" Text="< Назад" OnClick="BackClick" />

<asp:Button id="NextBtn" runat="server" Text="Далее >" OnClick="NextClick" />

</form>

</body>

Элементы PageView являются удобными контейнерами для панелей мастера. Обратите внимание на то, что в элементе innerHTML элемента управления PageView можно использовать элементы управления ASP.NET и элементы HTML.

Свойство SelectedIndex не устанавливается в элементе MultiPage явным образом. Таким образом, при загрузке страницы отображается содержимое первого элемента PageView. Две кнопки ASP.NETиспользуются для перемещения по шагам мастера и вызывают методы BackClick и NextClick.

Методы инициализации веб-формы показаны в следующих методах.

<%@ Import Namespace="Microsoft.Web.UI.WebControls" %>

<%@ Register TagPrefix="mywiz"

Namespace="Microsoft.Web.UI.WebControls"

Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>

<html>

<head>

<title>Мастер интернет-магазина</title>

<script language="C#" runat="server">

    public void Page_Load(Object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            SetupButtons();

        }

    }

    public void SetupButtons()

    {

        if (Wizard.SelectedIndex == 0)

        {

            BackBtn.Visible = false;

            NextBtn.Text = "Start > ";

        }

        else if (Wizard.SelectedIndex == 1)

        {

            BackBtn.Visible = true;

            NextBtn.Text = "Next >";

        }

        else if (Wizard.SelectedIndex == (Wizard.Controls.Count - 3))

        {

            NextBtn.Text = "Next >";

        }

        else if (Wizard.SelectedIndex == (Wizard.Controls.Count - 2))

        {

            NextBtn.Text = "Finish";

        }

        else if (Wizard.SelectedIndex == (Wizard.Controls.Count - 1))

        {

            BackBtn.Visible = false;

            NextBtn.Visible = false;

        }

    }

// Примечание. Другие методы не показаны

    </script>

</head>

Метод Page_Load проверяет свойство IsPostBack. Если страница находится не в начальном состоянии, то вызывается метод SetupButtons.

Метод SetupButtons проверяет все возможные состояния свойства SelectedIndex, которое обозначает выбранное в настоящий момент представление PageView. Если мастер отображает первое представление PageView, то кнопка BackBtn скрывается, проверяются другие возможные значения PageView, а кнопки устанавливаются в соответствующее состояние.

Элемент MultiPage содержит коллекцию из четырех элементов управления PageView. В условных выражениях объект Controls используется для ссылки на текущее количество элементов PageView в коллекции.

Примечание  Коллекция элементов управления PageView может обновляться динамически с помощью скрипта.

В следующем фрагменте кода показаны методы BackClick и NextClick.

public void BackClick(Object sender, EventArgs e)

{

    if (Wizard.SelectedIndex > 0)

    {

        Wizard.SelectedIndex--;

        SetupButtons();

    }

}

public void NextClick(Object sender, EventArgs e)

{

    if (Wizard.SelectedIndex < (Wizard.Controls.Count - 1))

    {

        Wizard.SelectedIndex++;

        SetupButtons();

        if (Wizard.SelectedIndex == (Wizard.Controls.Count - 1))

        {

            CreateReceipt();

        }

    }

}

Как продемонстрировано в этих методах, выбранный в настоящее время элемент управления PageView, который отображается на странице, управляется путем увеличения и уменьшения свойства SelectedIndex. Если для метода NextClick достигнуто последнее представление PageView, то вызывается метод CreateReceipt, завершающий работу мастера.

public void CreateReceipt()

{

    string html = "<p>Номер заказа: <b>123456</b><p>Адрес доставки:<br>";

    html += "<pre style=\"font-size:small\">" + FirstName.Text +

         " " + LastName.Text + "\n" + Address.Text + "</pre>";

    html += "<p>Плательщик:<br>";

        if (BillShipping.Checked)

        {

            html += "<i>(Совпадает с адресом доставки)</i>";

        }

                        else

        {

            html += "<pre style=\"font-size:small\">" + BillFirstName.Text

                          + " " + BillLastName.Text + "\n" + BillAddress.Text + "</pre>";

        }

    ReceiptPane.InnerHtml = html;

}

В этом методе данные, собранные мастером, объединяются в элемент innerHTML объекта ReceiptPane, который является тегом div в последнем представлении PageView.

Динамическое добавление элементов управления PageView

В следующем примере иллюстрируется динамическое добавление элементов управления PageView в элемент MultiPage с помощью метода скрипта ASP.NET.

<%@ Import Namespace="Microsoft.Web.UI.WebControls" %>

<%@ Register TagPrefix="myns"

Namespace="Microsoft.Web.UI.WebControls"

Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>

<script language="C#" runat="server">

public void SetupPictures()

{

    ArrayList list = new ArrayList();

    list.Add("pic1.gif");

    list.Add("pic2.gif");

    foreach (string url in list)

    {

        PageView pv = new PageView();

        myMultiPage.Controls.Add(pv);

        System.Web.UI.WebControls.Image image

                 = new System.Web.UI.WebControls.Image();

        pv.Controls.Add(image);

        image.ImageUrl = url;

    }

}

    </script>

<body>

<form id="theform" runat="server">

    <myns:MultiPage id="thePics" runat="server" />

    <asp:Button id="addPics" runat="server" Text="Добавить изображения"

         OnClick="SetupPictures" />

</form>

</body>

В этой веб-форме элемент MultiPage исходно является пустым. Метод SetupPictures создает массив URL-адресов, а затем вставляет их в новый элемент управления PageView.

Использование MultiPage с веб-элементом управления TabStrip

Многие пользовательские интерфейсы содержат кнопки навигации, которые позволяют пользователю переключать представления. Представление может состоять из HTML-кода или являться отдельной веб-страницей. Использование веб-элементов управления облегчает создание пользовательского интерфейса, совмещающего элементы управления MultiPage и TabStrip.

При создании подобного интерфейса необходимо использовать один элемент Tab для каждого из элементов PageView.

<form id="tabstrip" method="post" runat="server">

<iewc:TabStrip id="TabStrip1" runat="server" TargetID="MultiPage1">

   <iewc:Tab Text="Страница 1">

   </iewc:Tab>

   <iewc:Tab Text="Страница 2">

   </iewc:Tab>

   <iewc:Tab Text="Страница 3">

   </iewc:Tab>

</iewc:TabStrip>

<iewc:MultiPage id="MultiPage1" runat="server">

   <iewc:PageView id="page1">

   Это страница 1

   </iewc:PageView>

   <iewc:PageView id="page2">

   Это страница 2

   </iewc:PageView>

   <iewc:PageView id="page3">

   Это страница 3

   </iewc:PageView>

</iewc:MultiPage>

</form>

В этом примере два элемента управления синхронизируются путем установки атрибута TargetID в элементе TabStrip равным атрибуту ID элемента PageView. При щелчке по элементам Tab выполняется переход к соответствующему содержимому. Синхронизация этих элементов управления с помощью атрибута TargetID свидетельствует о важности порядка содержимого — первый элемент Tab связывается с первым элементом PageView, второй элемент Tab — со вторым элементом PageView и т.д.

Атрибут TargetID также можно установить в элементе Tab. При использовании этого метода TargetID указывает на атрибут ID элемента PageView.

Примечание  Атрибут Target служит только для чтения и возвращает объект PageView, соответствующий значению TargetID. Если объект PageView не найден, то возвращается значение null.

Связанные темы