Создание страницы BuildCar
Создание страницы BuildCar
Последним нашим заданием в этом примере будет создание страницы BuildCar.aspx. Добавьте ее в свой проект (выбрав Web Site?Add Content Page из меню). Эта страница будет содержать Web-элемент управления Wizard ASP.NET 2.0, который обеспечит простой способ прохождения конечного пользователя через серию связанных шагов. Здесь соответствующие шаги будут имитировать выбор покупателем автомобили с нужными ему характеристиками.
Поместите в область содержимого информирующую надпись и элемент управления Wizard. Затем активизируйте встроенный редактор для Wizard и щелкните на ссылке Add/Remove WizardSteps (Добавить или удалить шаги мастера). Добавьте четыре шага, как показано на рис. 23.30.
После определения этих шагов вы увидите, что Wizard определяет области с пустым содержимым, куда вы можете перетащить элементы управления, необходимые для выбранного в настоящий момент шага.
Рис. 23.30. Конфигурация шагов Wizard
В нашем случае добавьте для шагов следующие элементы пользовательского интерфейса (не забудьте указать соответствующее значение ID для каждого элемента, используя окно свойств).
• Выберите модель: элемент управления TextBox
• Выберите цвет: элемент управления ListBox
• Укажите название: элемент управления TextBox
• Укажите дату доставки: элемент управления Calendar
Элемент управления ListBox является единственным элементом интерфейса Wizard, требующим дополнительной настройки. Выберите этот элемент в окне проектирования (убедившись, что перед этим вы выбрали ссылку Выберите цвет) и укажите для элемента набор цветов с помощью свойства Items в окне свойств. После этого в контексте определения Wizard вы обнаружите разметку, похожую на следующую.
‹asp:ListBox ID="ListBoxColors" runat="server" Width="237px"›
‹asp:ListItem›пурпурный‹/asp:ListItem›
‹asp:ListItem›зеленый‹/asp:ListItem›
‹asp:ListItem›красный‹/asp:ListItem›
‹asp:ListItem›желтый‹/asp:ListItem›
‹asp:ListItem›светло-зеленый‹/asp:ListItem›
‹asp:ListItem›черный‹/asp:ListItem›
‹asp:ListItem›лимонный‹/asp:ListItem›
‹/asp:ListBox›
После определения каждого из шагов вы можете обработать событие FinishButtonClick для автоматически генерируемой кнопки Finish (Готово). В серверном обработчике события получите параметры выделения от каждого элемента интерфейса и постройте строку описания, которая будет назначена свойству Text дополнительного типа Label с именем lblOrder.
protected void carWizard_FinishButtonClick(object sender, WizardNavigationEventArgs e) {
// Получение значений.
string order = string.Format("{0}, ваш {1} {2}, будет доставлен {3}.",
txt.CarPetName.Text,
ListBoxColors.SelectedValue,
txtCarModel.Text,
carCaLendar.SelectedDate.ToShortDateString());
// Присваивание значения надписи.
lblOrder.Text = order;
}
Итак, ваш узел AspNetCarSite готов. На рис. 23.31 показан элемент Wizard в действии.
Рис. 23.31. Wizard в действии
На этом завершается наш обзор Web-элементов управления. Не сомневайтесь. что имеется очень много других элементов, которые здесь охвачены не были, Однако теперь вы должны чувствовать себя довольно уверенно при использовании основных приемов данной модели программирования. А в завершение этой главы мы рассмотрим элементы управления, связанные с контролем вводимых данных.
Исходный код. Файлы AspNetCarsSite размещены в подкаталоге, соответствующем главе 23.