Wizard
Как и MultiView, элемент управления Wizard (Мастер, Волшебник) может создать последовательность шагов. Элемент управления Wizard позволяет вводить информацию в нескольких формах последовательно. Например, при регистрации основные сведения — имя и пароль — вводятся на первой форме. После того как эти данные успешно введены и прошли проверку на валидность, собираются дополнительные данные — адрес, телефон. На последней форме введенные данные можно показать в обобщенном виде для подтверждения.
Wizard описывается с помощью тега asp:Wizard, в который вложены элементы WizardStep.
Внутри элемента управления Wizard находится MultiView, но в нем есть готовая функциональность по переключению представлений. Это дополнительная панель слева и набор кнопок внизу. В боковой панели находится список заголовков всех шагов, который позволяет произвольно переключаться на любой шаг.
Кнопки для перехода с шага на шаг — First, Next, Previous, Finish. На первой странице отображается только кнопка Next, на следующих — Previous и Next, и на последней — Previous и Finish. Если установить свойство DisplayCancelButton, к ним добавится кнопка отмены Cancel. Можно задать адрес страниц, куда будет перенаправлена форма при нажатии на кнопки Finish и Cancel. Как боковую панель, так и кнопочную панель навигации можно превратить в шаблоны. Показ боковой панели можно отключить свойством DisplaySideBar, установленным в False. Кнопки могут быть обычными или с любым изображением. Текст кнопок можно установить с помощью свойств CancelButtonText, FinishStepButtonText, FinishStepPreviousButtonText, NextStepButtonText, PreviousStepButtonText и the StartStepNextButtonText.
Заголовок тоже можно превратить в шаблон.
Например, превратим простую форму регистрации (из лекции 5) пользователей в мастера. В отличие от предыдущего примера, в форме создавать кнопки не нужно, так как у Wizard кнопки есть. При этом, если в форме поставлены элементы-валидаторы, переход на следующий шаг кнопкой Next невозможен:
<asp:Wizard ID="Wizard1" runat="server" ActiveStepIndex="0" Height="297px" OnFinishButtonClick="Wizard1_FinishButtonClick" Width="609px" OnActiveStepChanged="Wizard1_ActiveStepChanged" DisplayCancelButton="True" HeaderText="Регистрация" BackColor="#F7F6F3" BorderColor="#CCCC- CC" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em"> <WizardSteps> <asp:WizardStep ID="Step1" runat="server" Title="Информация о пользователе"> <table> <tr> <td style="width: 100px"> <asp:Label ID="Label1" runat="server" Text="Введите имя:" Width="140px"></asp:Label> </td> <td style="width: 100px"> <asp:TextBox ID="txtName" runat="server" CausesValidation="True" Width="160px" /> </td> <td style="width: 29px"> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtName" ErrorMessage="Необходимо ввести имя">*</asp:RequiredFieldValidator> </td> </tr> <tr> <td style="width: 100px"> <asp:Label ID="Label2" runat="server" Text="Введите адрес:" Width="140px"></asp:Label> </td> <td colspan="2"> <asp:TextBox ID="txtAddress" runat="server" TextMode="MultiLine" Rows="5" Width="187px" /> </td> </tr> <tr> <td style="width: 100px"> <asp:Label ID="Label3" runat="server" Text="Введите пароль:" Width="140px"></asp:Label> </td> <td style="width: 100px"> <asp:TextBox ID="txtPassword1" runat="server" TextMode="Password" Width="145px" /> </td> <td style="width: 29px"> <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Пароль не должен быть пустым" ControlToValidate="txtPassword1">*</asp:RequiredFieldValidator> </td> </tr> <tr> <td style="width: 100px"> <asp:Label ID="Label4" runat="server" Text="Повторите пароль" Width="140px"></asp:Label> </td> <td style="width: 100px"> <asp:TextBox ID="txtPassword2" runat="server" TextMode="Password" Width="145px" /> </td> <td style="width: 34px" colspan="3"> <asp:CompareValidator ID="CompareValidator1" runat="server" ErrorMessage="Пароли должны совпадать!" ControlToValidate="txtPassword1" ControlToCompare="txtPassword2">*</asp:CompareValidator> </td> </tr> <tr> <td style="width: 300px; height: 49px;" colspan="3"> <asp:ValidationSummary ID="ValidationSummary1" runat="server" ShowMessageBox="True" Width="349px" /> </td> </tr> </table> </asp:WizardStep> <asp:WizardStep ID="Step2" runat="server" Title="Контактная информация"> <table style="width: 336px; height: 199px"> <tr> <td style="width: 100px"> <asp:Label ID="Label5" runat="server" Text="Введите e-mail"></asp:Label> </td> <td style="width: 100px"> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </td> </tr> <tr> <td style="width: 100px; height: 21px"> <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="Введите e-mail" ControlToValidate="TextBox1"></asp:RequiredFieldValidator> </td> <td style="width: 100px; height: 21px"> <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="Не- правильный адрес" ValidationExpression="\w+([-+.']\w+)*@\w+([- .]\w+)*\.\w+([-.]\w+)*" ControlToValidate="TextBox1"></asp:RegularExpressionValidator> </td> </tr> <tr> <td style="width: 100px; height: 21px"> <asp:Label ID="Label6" runat="server" Text="Введите номер телефона"></asp:Label> </td> <td style="width: 100px; height: 21px"> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> </td> </tr> <tr> <td colspan="2"> <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="Введите номер телефона" ControlToValidate="TextBox2"></asp:RequiredFieldValidator> </td> </tr> </table> </asp:WizardStep> <asp:WizardStep ID="Step3" runat="server" Title="Подтвержде- ние"> <table> <tr> <td style="width: 100px"> <asp:Label ID="Label7" runat="server" Text="Имя"></asp:Label> </td> <td style="width: 100px"> <asp:Label ID="Label8" runat="server" Text="Label"></asp:Label> </td> </tr> <tr> <td style="width: 100px"> <asp:Label ID="Label9" runat="server" Text="E- mail"></asp:Label> </td> <td style="width: 100px"> <asp:Label ID="Label10" runat="server" Text="Label"></asp:Label> </td> </tr> <tr> <td style="width: 100px"> <asp:Label ID="Label11" runat="server" Text="Номер телефона"></asp:Label> </td> <td style="width: 100px"> <asp:Label ID="Label12" runat="server" Text="Label"></asp:Label> </td> </tr> </table> </asp:WizardStep> </WizardSteps> <StepStyle BorderWidth="0px" ForeColor="#5D7B9D" /> <SideBarStyle BackColor="#7C6F57" BorderWidth="0px" Font- Size="0.9em" VerticalAlign="Top" /> <NavigationButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284775" /> <SideBarButtonStyle BorderWidth="0px" Font-Names="Verdana" ForeColor="White" /> <HeaderStyle BackColor="#5D7B9D" BorderStyle="Solid" Font- Bold="True" Font-Size="0.9em" ForeColor="White" HorizontalAlign="Left" /> </asp:Wizard>
Для того чтобы на третьем шаге отображались данные, собранные в предыдущих шагах, перехватывается событие ActiveStepChanged:
protected void Wizard1_ActiveStepChanged(object sender, EventArgs e) { if (Wizard1.ActiveStep.ID == "Step3") { Label8.Text = ((TextBox)Wizard1.Controls[0].FindControl("txtName")).Text; Label10.Text = ((TextBox)Wizard1.Controls[0].FindControl("TextBox1")).Text; Label12.Text = ((TextBox)Wizard1.Controls[0].FindControl("TextBox2")).Text;
} }
Если у шага свойство AllowReturn установлено в False, то возврат к этому шагу будет невозможен. Другое интересное свойство — StepType. Оно позволяет заменить данный по умолчанию набор кнопок навигации. Шаг, у которого StepType равен Complete, не виден в боковой панели и будет показан после того, как в последнем шаге будет нажат Finish:
<asp:WizardStep Runat="server" Title="Final Step" StepType="Complete"> Спасибо за регистрацию.</asp:WizardStep>
В данном шаге какие-либо кнопки отсутствуют.
