|
Программирование >> Asp.net
Пример применения серверных элементов управления В данном примере мы создадим каркас Web-приложения для заказа комнаты совещаний (как и в случае других примеров этой книги, код этого примера доступен на прилагаемом компакт-диске). Для начала включим в приложение только один интерфейс и простую обработку событий; позже мы расширим его средствами ADO.NET и привязкой к данным, чтобы подключить бизнес-логику на стороне сервера. Web-форма, которую мы создадим, будет содержать поля для имени пользователя, имени события, комнаты совещаний и списка участников совещания, вместе с календарем для выбора даты (в этом приложении предполагается, что комната будет заказываться на весь день). Ко всем полям кроме календаря подключим проверяющие элементы управления серверной стороны, а также предусмотрим ввод даты по умолчанию, если никакая дата не введена. Для тестирования пользовательского интерфейса на форме используем также элемент Label, служащий для отображения результатов подтверждения. Начнем с создания нового Web-сайта в Visual Studio .NET в каталоге C:\ ProCSharp\Chapter37\ и назовем его PCSWebApp2. Далее изменим код в файле Default.aspx, как показано ниже: <%@ Page Language= C# AutoEventWireup= true CodeFile= Default.aspx.cs Inherits= Default %> <!DOCTYPE html PUBLIC - W3C DTD XHTML 1.1 EN http: www.w3.org/TR/xhtml11/DTD/xhtml11.dtd > <html xmlns= http: www.w3.org/1999/xhtml > <head runat= server > <title>Meeting Room Booker</title> </head> <body> <form id= form1 runat= server > <div> <h1 style= text-align: center; > Enter details and set a day to initiate an event. </h1> </div> После заголовка страницы (заключенного в HTML-дескрипторы <h1> для получения увеличенного стиля текста заголовка) основное тело формы заключено в HTML-дескриптор <table>. Можно было бы применить таблицу - Web-серверный элемент управления - но это привнесло бы излишнюю сложность, поскольку пока мы используем таблицу только для форматирования отображения, а не как часть элемента динамического интерфейса пользователя. Это важный момент, который нужно иметь в виду при разработке Web Forms - не добавлять Web-серверных элементов управления без необходимости. Таблица содержит три столбца: первый хранит простые текстовые метки, второй - поля ввода, соответствующие меткам первого столбца (вместе с проверяющими элементами управления); третий столбец содержит календарь для выбора даты, который распространяется на четыре строки таблицы. Пятая строка содержит кнопку отправки, растянутую на ширину всех столбцов, а шестая - элемент управления ValidationSummary для отображения сообщений об ошибках при необходимости (все остальные проверяющие элементы управления имеют значение свойства Display= None , потому что они будут использовать этот итоговый элемент для отображения сообщений). Ниже таблицы находится простая метка, которую пока мы сможем использовать для отображения результата, прежде чем позднее добавим доступ в базу данных. <div style= text-align: center; > <table style= text-align: left; border-color: #000000; border-width: 2px; background-color: #fff99e; cellspacing= 0 cellpadding= 8 rules= none width= 540 > <tr> <td valign= top > Your Name:</td> <td valign= top > <asp:TextBox ID= nameBox Runat= server Width= 160px /> <asp:RequiredFieldValidator ID= validateName Runat= server ErrorMessage= You must enter a name. ControlToValidate= nameBox Display= None /> </td> <td valign= middle rowspan= 4 > <asp:Calendar ID= calendar Runat= server BackColor= White /> </td> </tr> <tr> <td valign= top > Event Name:</td> <td valign= top > <asp:TextBox ID= eventBox Runat= server Width= 160px /> <asp:RequiredFieldValidator ID= validateEvent Runat= server ErrorMessage= You must enter an event name. ControlToValidate= eventBox Display= None /> </td> </tr> Большая часть кода ASP.NET в этом файле совершенно проста, и большая его часть может быть понята после первого прочтения. Единственное, что следует отметить - это способ, которым элементы списка присоединены к элементам управления для выбора комнаты совещаний, а также способ указания множества участников совещания: <tr> <td valign= top > Meeting Room:</td> <td valign= top > <asp:DropDownList ID= roomList Runat= server Width= 160px > <asp:ListItem Value= 1 >The Happy Room</asp:ListItem> <asp:ListItem Value= 2 >The Angry Room</asp:ListItem> <asp:ListItem Value= 3 >The Depressing Room</asp:ListItem> <asp:ListItem Value= 4 >The Funked Out Room</asp:ListItem> </asp:DropDownList> <asp:RequiredFieldValidator ID= validateRoom Runat= server ErrorMessage= You must select a room. ControlToValidate= roomList Display= None /> </td> </tr> <tr> <td valign= top > Attendees:</td> <td valign= top > <asp:ListBox ID= attendeeList Runat= server Width= 160px SelectionMode= Multiple Rows= 6 > <asp:ListItem Value= 1 >Bill Gates</asp:ListItem> <asp:ListItem Value= 2 >Monica Lewinsky</asp:ListItem> <asp:ListItem Value= 3 >Vincent Price</asp:ListItem> <asp:ListItem Value= 4 >Vlad the Impaler</asp:ListItem> <asp:ListItem Value= 5 >Iggy Pop</asp:ListItem> <asp:ListItem Value= 6 >William Shakespeare</asp:ListItem> </asp:ListBox> Здесь объекты ListItem ассоциируются с двумя Web-серверными элементами управления. Строго говоря, сами по себе они не являются Web-серверными элементами управления (наследуются просто от System.Object), а потому для них не нужно указывать Runat= server . Когда страница обрабатывается, элементы <asp:ListItem> используются для создания объектов ListItem, добавляемых в коллекцию родительского списочного элемента управления. Это облегчает написание кода инициализации списков, избавляя нас от ручного кодирования (иначе пришлось бы создавать объект ListItemCollection, добавлять ему объекта: ListItem и потом передавать коллекцию элементу управления - списку). Конечно, при желании все это можно сделать программно: <asp:RequiredFieldValidator ID= validateAttendees Runat= server ErrorMessage= You must have at least one attendee. ControlToValidate= attendeeList Display= None /> </td> </tr> <tr> <td align= center colspan= 3 > <asp:Button ID= submitButton Runat= server Width= 100% Text= Submit meeting room request /> </td> </tr> <tr> <td align= center colspan= 3 > <asp:ValidationSummary ID= validationSummary Runat= server HeaderText= Before submitting your request: /> </td> </tr> </table> </div> <div> <p> Results: <asp:Label Runat= server ID= resultLabel Text= None. /> </p> </div> </form> </body> </html> В представлении дизайнера созданная нами форма будет выглядеть так, как показано на рис. 37.7. Это полнофункциональный пример пользовательского интерфейса, который поддерживает свое собственное состояние между запросами и проверяет пользовательский ввод. Учитывая краткость приведенного выше кода, это впечатляет. Фактически, нам мало чего остается сделать, по крайней мере, с этим примером; нужно только специфицировать событие обработки щелчка на кнопке подтверждения. На самом деле, это еще не все. До сих пор мы не предусмотрели проверки для элемента управления - календаря. Все что нужно, для этого сделать - присвоить ему начальное значение. Это можно сделать в обработчике события Page Load() в файле отделенного кода: private void Page Load(object sender, EventArgs e) if (!this.IsPostBack) calendar.SelectedDate = System.DateTime.Now;
|
© 2006 - 2024 pmbk.ru. Генерация страницы: 0
При копировании материалов приветствуются ссылки. |