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

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

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

• Редактирование структуры шага мастера.

• Добавление настраиваемого шага мастера.

• Программный перехват события мастера.

• Ветвление поведения мастера в зависимости от выбора, сделанного пользователем.

• Отображение пользовательских данных на шаге завершения.

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

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

• Microsoft Visual Web Developer.

• Платформа .NET Framework.

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

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

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

1. Откройте Visual Web Developer.

2. В меню Файл выберите Создатьвеб-узел.

   Откроется диалоговое окно Создать веб-узел.

3. В группе Установленные шаблоны Visual Studio выберите Веб-узел ASP.NET.

4. В поле Расположение введите имя папки, где следует хранить страницы веб-узла.

   Например, введите имя папки C:\WebSites.

5. В списке Язык выберите предпочтительный язык программирования.

6. Нажмите кнопку ОК.

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

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

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

1. Перейдите в представление конструирования.

2. Из группы Стандартные в панели элементов перетащите на страницу элемент управления Wizard.

Сбор сведений об имени и адресе

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

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

Настройка первого шага

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

2. Щелкните подчеркнутый текст Step 1 в элементе управления Wizard, после чего щелкните в области редактирования, расположенной справа от шага Step 1 в элементе управления Wizard.

   Теперь можно редактировать область отображения для шага 1.

3. Введите Имя.

4. Из группы Стандартные в панели элементов перетащите на страницу элемент управления TextBox.

5. В окне «Свойства» измените значение свойства ID элемента управления TextBox с TextBox1 на Name.

6. Повторите этот процесс, добавив подписи и элементы управления TextBox (не забывайте переименовывать элементы управления, поскольку в дальнейшем к ним потребуется обращаться) для ввода следующих сведений:

   • Адрес (Address);

   • Город (City);

   • Область (State);

   • Почтовый индекс (PostalCode).

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

Добавление выбора обновлений по электронной почте

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

Добавление выбора обновлений по электронной почте

1. Щелкните шаг Step 2.

2. Щелкните область редактирования справа от шага Step 2 и введите строку Получать обновления по электронной почте.

3. Под вопросом введите: Да.

4. Из группы Стандартные в панели элементов перетащите на страницу элемент управления RadioButton, расположив его рядом со словом Да.

5. Введите Нет.

6. Перетащите в мастер еще один элемент управления RadioButton из панели элементов, расположив его рядом со словом Нет.

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

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

Добавление настраиваемого шага для получения адреса электронной почты пользователя

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

2. В диалоговом окне Задачи Wizard выберите пункт Добавление/удаление шагов мастера.

   Появится окно Редактор коллекции WizardStep.

3. В раскрывающемся по нажатию кнопки Добавить списке Добавить выберите Шаг мастера.

4. Нажмите кнопку OК.

   В элементе управления Wizard будет отображен новый шаг.

5. Щелкните новый шаг, чтобы перевести его в режим редактирования.

6. В области редактирования введите Адрес электронной почты.

7. Из группы Стандартные в панели элементов перетащите на страницу элемент управления TextBox, расположив его рядом со словами Адрес электронной почты.

8. В окне «Свойства» измените свойство «ID» элемента управления TextBox на EmailAddress, поскольку позже к нему потребуется обращаться из кода.

Добавление шага завершения

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

Добавление шага завершения

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

2. В меню Задачи Wizard на элементе управления выберите команду Добавление/удаление шагов мастера.

   Появится окно Редактор коллекции WizardStep.

3. В списке Добавить выберите Шаг мастера.

   В области «Свойства» будут отображены атрибуты нового шага.

4. В окне «Свойства» присвойте свойству StepType значение Complete.

5. Нажмите кнопку OК.

   К элементу управления Wizard будет добавлен новый шаг.

6. Щелкните в элементе управления новый шаг, после чего щелкните расположенную справа от него область редактирования.

7. Из группы Стандартные в панели элементов перетащите на страницу элемент управления Label.

8. Нажмите клавишу ВВОД для перехода на новую строку.

9. Повторите шаг 7 еще пять раз, чтобы добавить шесть элементов управления Label, соответствующих следующим полям:

   • Имя

   • Адрес

   • Город

   • Область или край

   • Почтовый индекс

   • Адрес электронной почты

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

Перед запуском мастера требуется занести в текст подписей на шаге завершения данные, которые пользователь ввел на предыдущих трех шагах.

Добавление кода для шага завершения

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

Добавление кода

1. Переключитесь на файл Default.aspx и в режиме конструктора дважды щелкните рабочую область конструирования.

   Появится редактор кода страницы, в котором будет создан каркас метода Page_Load.

2. Добавьте выделенный ниже код для заполнения шага завершения.

   Private Sub Page_Load(ByVal sender As Object, _
       ByVal e As System.EventArgs) Handles Me.Load
       Label1.Text = Name.Text
       Label2.Text = Address.Text
       Label3.Text = City.Text
       Label4.Text = State.Text
       Label5.Text = PostalCode.Text
       Label6.Text = EmailAddress.Text
   End Sub
   

   void Page_Load(object sender, EventArgs e)
   {
       Label1.Text = Name.Text;
       Label2.Text = Address.Text;
       Label3.Text = City.Text;
       Label4.Text = State.Text;
       Label5.Text = PostalCode.Text;
       Label6.Text = EmailAddress.Text;
   }
   

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

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

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

1. Откройте файл Default.aspx в режиме конструктора.

2. Откройте меню Задачи Wizard на элементе управления и выберите Step 1 в раскрывающемся списке Step.

3. Нажмите клавиши CTRL+F5 для запуска страницы.

   Примечание.
   При запуске страницы из режима конструктора обозреватель может начать работу с выбранного в настоящее время шага мастера, а не с первого его шага. Перед запуском страницы убедитесь, что свойство мастера ActiveStepIndex в окне «Свойства» имеет значение 0.

4. Введите имя и адрес.

5. Нажмите кнопку Далее.

6. Выберите любой из вариантов для электронной почты.

   Код для обработки параметра электронной почты будет добавлен в этом пошаговом руководстве позже.

7. Введите адрес электронной почты.

8. Нажмите кнопку Готово.

   Введенные данные будут отображены на странице.

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

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

Теперь, когда структура и функциональность сбора данных в мастере готовы, будет добавлена логика, позволяющая пользователю пропустить шаг указания адреса электронной почты, если он отказался от подписки на рассылку обновлений по электронной почте. Для этого необходимо обрабатывать событие NextButtonClick элемента управления Wizard. В ходе обработки события сперва выполняется проверка того, находится ли мастер на этапе, где пользователь делает выбор. Если это так, то осуществляется проверка того, какой элемент управления RadioButton был выбран. Если пользователь выбрал Нет, то свойство ActiveStepIndex элемента управления Wizard изменяется соответствующим образом, чтобы пропустить шаг мастера, на котором запрашивается адрес электронной почты пользователя.

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

1. Щелкните элемент управления Wizard. В окне «Свойства» введите в качестве значения свойства NextButtonClickWizard1_NextButtonClick и нажмите клавишу ВВОД.

   В окне редактора кода будет открыта страница с выделенным кодом.

2. Добавьте выделенный ниже код, который проверяет, на нужном ли шаге находится мастер, определяет, какой элемент управления RadioButton выбран, и нужно ли пропустить третий шаг мастера.

   Private Sub Wizard1_NextButtonClick( ByVal sender As Object, _
      ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs) _     
      Handles Wizard1.NextButtonClick
      If Wizard1.ActiveStepIndex = 1 Then
          If RadioButton1.Checked Then
              ' Collect e-mail address.
              Wizard1.ActiveStepIndex = 2
          Else
              Wizard1.ActiveStepIndex = 3
          End If
      End If
   End Sub
   

   void Wizard1_NextButtonClick(object sender, 
       System.Web.UI.WebControls.WizardNavigationEventArgs e)
   {
        if (Wizard1.ActiveStepIndex == 1)
        {
           if (RadioButton1.Checked)
               // Collect ee-mail address.
           {
              Wizard1.ActiveStepIndex = 2;
           } 
           else 
           {
              Wizard1.ActiveStepIndex = 3;
           }
        }
   }
   

   Задание значения свойства ActiveStepIndex приводит к тому, что мастер переходит непосредственно на указанный шаг.

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

Тестирование возможности пропуска шага

Программное тестирование пропуска шага мастера

1. Откройте файл Default.aspx в режиме конструктора.

2. Откройте меню Задачи Wizard на элементе управления и выберите Step 1 в раскрывающемся списке Step.

3. Нажмите клавиши CTRL+F5 для запуска страницы.

4. Введите имя и адрес.

5. Нажмите кнопку Далее.

6. На шаге 2 выберите переключатель Нет.

7. Нажмите кнопку Далее.

   Будет выполнен переход на шаг завершения.

8. Используйте кнопку возврата обозревателя, чтобы вернуться на первый шаг, или же закройте обозреватель и нажмите клавиши CTRL+F5, чтобы запустить страницу заново.

9. Введите имя и адрес, введенные на первом шаге.

10. Нажмите кнопку Далее.

11. На шаге 2 выберите переключатель Да.

12. Нажмите кнопку Далее.

13. Будет выполнен переход на шаг ввода адреса электронной почты.

14. Введите адрес электронной почты.

15. Нажмите кнопку Далее.

16. Будет выполнен переход на шаг завершения.

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

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

• Переопределить используемые по умолчанию текстовые подписи элемента управления Wizard. Дополнительные сведения см. в разделе Общие сведения о серверном веб-элементе управления Wizard.

• Проверить пользовательский ввод в элементе управления Wizard. Дополнительные сведения см. в разделе Пошаговое руководство. Проверка сведений, вводимых пользователем на странице веб-форм.

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

См. также

Ссылки

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