|
https://technet.microsoft.com/en-us/library/ms143221(v=sql.105).aspx |
Инспектор
Вы можете этот курс.
Опубликован: 14.11.2006 | Уровень: для всех | Доступ: платный
Лекция 18:
Элементы управления и использование JavaScript
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>
В данном шаге какие-либо кнопки отсутствуют.
Денис Прокофьев
|
Везде написано, что это самый независимый и простой в использовании навигационный элемент управления, что он работает сразу с web.sitemap и не требует определения SiteMapDataSource. Моя карта сайта состоит из двух страниц, вложенных друг в друга. asp:Menu, asp:TreeView отбображаются как ожидалось, а вот asp:SiteMapPath - нет. Он не виден нигде. Однако на его месте формируется разметка: <span id="SiteMapPath1"><a href="#SiteMapPath1_SkipLink" style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;">Проход по ссылкам навигации</a><a id="SiteMapPath1_SkipLink"></a></span> - т.е. элемент отрабатывает. В словах xHTML это выглядит так: <asp:SiteMapPath ID="SiteMapPath1" runat="server" />. Причем не важно - внутри тега form или снаружи - всегда одинаково. Т.к. другие нав. ЭУ работают через простой источник данных без ошибок, делаю вывод - карта составлена правильно. ИД: <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" /> Карта: <?xml version="1.0" encoding="utf-8" ?> Почему так происходит? Вроде делаю все по примерам. VS Community 2015. NetFramework в проекте: v4.0.30319 |