Опубликован: 14.11.2006 | Доступ: свободный | Студентов: 5898 / 532 | Оценка: 4.18 / 3.74 | Длительность: 16:37:00
ISBN: 978-5-9556-0085-7
Лекция 18:

Элементы управления и использование JavaScript

< Лекция 17 || Лекция 18: 12345

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>

В данном шаге какие-либо кнопки отсутствуют.

< Лекция 17 || Лекция 18: 12345
Алексей Савельев
Алексей Савельев

https://technet.microsoft.com/en-us/library/ms143221(v=sql.105).aspx

Денис Прокофьев
Денис Прокофьев

Везде написано, что это самый независимый и простой в использовании навигационный элемент управления, что он работает сразу с 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" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="~/L11_1_simplePage.aspx" title="Страница 1"  description="Простая страница 1." >
    <siteMapNode url="~/L11_1SimplePage2.aspx" title="Страница 2"  description="Простая страница 2" />
  </siteMapNode>
</siteMap>

Почему так происходит? Вроде делаю все по примерам. VS Community 2015. NetFramework в проекте: v4.0.30319