Программирование >>  Asp.net 

1 ... 4 5 6 [ 7 ] 8 9 10 ... 13


Пример применения серверных элементов управления

В данном примере мы создадим каркас 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;



1 ... 4 5 6 [ 7 ] 8 9 10 ... 13

© 2006 - 2024 pmbk.ru. Генерация страницы: 0
При копировании материалов приветствуются ссылки.
Яндекс.Метрика