Пошаговое руководство. Создание базового элемента управления Wizard ASP.NET

Статья
10/22/2014

Обновлен: Ноябрь 2007

Построение ряда форм для сбора пользовательских данных является распространенной задачей при разработке веб-узлов. Элемент управления ASP.NET Wizard упрощает многие задачи, связанны с построением форм и сбором вводимых пользователем данных, предоставляя механизм, позволяющий легко создавать этапы, добавлять новые этапы и упорядочивать их. В данном пошаговом руководстве элемент управления ASP.NET Wizard используется для упрощения сбора данных, который становится последовательностью независимых этапов, при этом не требуется создавать код или сохранять пользовательские данные между этапами. Будет создан простой мастер, который собирает имя пользователя и адрес электронной почты и затем предоставляет их пользователю на этапе завершения. В этом пошаговом руководстве, в частности, рассматриваются следующие задачи:

Добавление элемента управления Wizard на страницу.
Добавление элементов управления и текста к этапу мастера.
Доступ к данным мастера между этапами.

Обязательные компоненты

Для выполнения этого пошагового руководства потребуется:

Visual Studio или Visual Web Developer.

Создание веб-узла

Если веб-узел уже был создан (например, по шагам, описанным в разделе Пошаговое руководство. Создание базовой веб-страницы в Visual Web Developer), то можно использовать его и перейти к следующему разделу «Добавление элемента управления Wizard» в данном пошаговом руководстве. В противном случае создайте новый веб-узел и страницу, выполнив следующие действия.

Создание веб-узла на базе файловой системы

Откройте Visual Web Developer или Visual Studio.
В меню Файл выберите Создать, Веб-узел.

Откроется диалоговое окно Создать веб-узел.
В группе Установленные шаблоны Visual Studio выберите Веб-узел ASP.NET.
В поле Расположение введите имя папки, где следует хранить страницы веб-узла.

Например, введите имя папки C:\WebSites.
В списке Язык выберите предпочтительный язык программирования.
Нажмите кнопку ОК.

Visual Web Developer создаст папку и новую страницу с именем Default.aspx.

Добавление элемента управления Wizard

Чтобы добавить элемент управления Wizard

Перейдите в представление конструктора для Default.aspx.
Из вкладки СтандартныеПанели элементов перетащите на страницу элемент управления Wizard.

Элемент управления появляется вместе с двумя этапами по умолчанию. Нажав этап, можно редактировать текст и элементы управления, выводимые на данном этапе.

Редактирование этапов мастера

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

Чтобы редактировать первый этап мастера

Перетащите один из маркеров на границе элемента управления Wizard, чтобы увеличить его примерно вдвое от размера по умолчанию.
Нажмите подчеркнутый текст Step 1в элементе управления Wizard.
Нажмите область редактирования элемента управления Wizard.

Теперь можно редактировать область отображения этапа.
Введите Имя:.
Перетащите элемент управления TextBox в активную область мастера, рядом с только что введенным текстом.

Теперь можно редактировать второй этап для сбора данных об адресе электронной почты пользователя.

Чтобы редактировать второй этап мастера

Нажмите Step 2 в элементе управления Wizard.
Нажмите область редактирования элемента управления Wizard.
Введите Email:.
Перетащите элемент управления TextBox в активную область мастера, рядом с только что введенным текстом.
Сохраните файл.

Добавление этапа завершения

Создание этапа завершения, который является конечной точкой мастера. Этап Complete не имеет параметров навигации.

Чтобы добавить этап завершения

Щелкните правой кнопкой мыши по элементу управления Wizard.
Выберите пункт Показать смарт-тег.
В диалоговом окне Задачи Wizard выберите пункт Добавление/удаление этапов мастера.

Появится окно Редактор коллекции WizardStep.
Из раскрывающегося списка Добавить кнопки Добавить выберите пункт Этап мастера.

Область Свойства показывает теперь новый этап.
Присвойте свойству Title значение Finished.
Задайте свойству StepType значение Complete.
Нажмите кнопку ОК.

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

Чтобы редактировать этап завершения

Щелкните правой кнопкой мыши элемент Wizard и выберите команду Показать смарт-тег.

В диалоговом окне Задачи мастера из раскрывающегося списка Этап выберите этап Finished.

Примечание.
Именем этапа в раскрывающемся списке будет имя, заданное при его создании, в данном примере Finished.

Перетащите элемент управления Label на мастер, оставив имя по умолчанию Label1.
Перетащите другой элемент управления Label на мастер, оставив имя по умолчанию Label2.
Сохраните файл.

В этапе завершения будут выведены данные, введенные пользователем. Используйте событие страницы Load, чтобы присвоить значения из двух первых этапов меткам, добавленным к этапу завершения.

Чтобы вывести пользовательские данные

Вернитесь к Default.aspx и в представлении конструктора дважды щелкните поверхность разработки.

Теперь страницы содержит специально усеченный метод Page_Load.

Добавьте следующий выделенный код.

Private Sub Page_Load(ByVal sender As Object, _
        ByVal e As System.EventArgs) _
        Handles Me.Load
    Label1.Text = TextBox1.Text    Label2.Text = TextBox2.Text
End Sub

void Page_Load(Object sender, System.EventArgs e)
{
    Label1.Text = TextBox1.Text;    Label2.Text = TextBox2.Text;
}

Сохраните файл.

Тестирование элемента управления Wizard

Теперь можно протестировать элемент управления Wizard.

Чтобы протестировать элемент управления Wizard

Откройте Default.aspx в представлении конструктора.
Выведите меню Задачи мастера для элемента управления и выберите пункт Step 1 из раскрывающегося списка Этап.
Выберите элемент управления Wizard, затем нажмите комбинацию CTRL+F5.
Введите имя в элементе управления TextBox на этапе 1.
Нажмите кнопку Далее.
Введите адрес электронной почты в элементе управления TextBox на этапе 2.
Нажмите кнопку Готово.

Будут отображены введенные данные.

Следующие действия

Элемент управления Wizard упрощает создание форм сбора пользовательских данных. Могут возникнуть и другие вопросы, не рассмотренные в данном пошаговом руководстве. Например, можно сделать следующее.

Узнать больше о проверке подлинности пользователей при помощи форм. Дополнительные сведения см. в разделе Практическое руководство. Реализация простой проверки подлинности с помощью форм.
Использовать темы для улучшения внешнего вида мастера. Дополнительные сведения см. в разделе Общие сведения о темах и обложках ASP.NET.
Получить общие сведения об элементе управления Wizard. Дополнительные сведения см. в разделе Общие сведения о серверном веб-элементе управления Wizard.

См. также

Ссылки

Общие сведения о серверном веб-элементе управления Wizard

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