Для тестирования интерфейса пользователя мы будем также иметь на форме элемент управления Label
, который можно использовать для вывода представляемых результатов.
Вначале создадим в Visual Studio новый проект приложения Web с именем PCSWebApp2
. Затем мы создаем форму, которая генерируется с помощью следующего кода в WebForm1.aspx
(код, генерируемый автоматически, не выделен):
<%@ Page language='c#' Codebehind='WebForm1.aspx.cs' AutoEventWireup='false' Inherits='PCSWebApp2.WebForm1' %>
<html>
<head>
<meta content=False name=vs_showGrid>
<meta content='Internet Explorer 5.0' name='vs_targetSchema>
<meta content='Microsoft Visual Studio 7.0' name=GENERATOR>
<meta content=C# name=CODE_LANGUAGE>
</head>
<body>
<form method='post' runat='server'>
<h1 align='center'>Enter details and set a day to initiate an event.</h1>
<br>
<table borderColor='#000000' cellSpacing='0' cellPadding='8'
rules='none' align='center' bgColor='#fff99e' border='2' 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='center' 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>
<tr>
<td vAlign='top'>Meeting Room:</td>
<td vAlign='top'>
<asp:dropdownlistid='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</aspListItem>
<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='60px'
selectionmode='Multiple' rows='6'>
<asp:ListItem Value='1'>Bill Gates</asp:ListItem>
<asp:ListItem Value='2'>Monika 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:Listltem Value='6'>William Shakespeare</asp:ListItem>
</asp:listbox>
<asp:requiredfieldvalidator id='validateAttendees' Runat='server'
errormessage='You must have at least one attendee.'
ControlToValidate='attendeeList' display='None' />
</td>
</tr>
<tr>
<td align='middle' colSpan='3'>
<asp:button id='submitButton' runat='server' width='100%'
Text='Submit meeting room request' />
</td>
</tr>
<tr>
<td align='middle' colSpan='3'>
<asp:validationsummary id='validationSummary' Runat='server'
headertext='Before submitting your request:' />
</td>
</tr>
</table>
<br> Results:
<asp:Label Runat='server' ID='resultLabel' Text='None.' />
</form>
</body>
</html>
После заголовка страницы, который записан между тегами HTML <h1>
, чтобы сделать его крупным текстом в стиле заголовка, основное тело формы помещается между тегами HTML <table>
. Мы могли бы использовать управляющий элемент таблицы сервера Web, но это внесло бы ненужную сложность, так как таблица используется только для форматирования вывода, а не как динамический элемент интерфейса пользователя. Таблица делится на три столбца, первый из которых содержит простые текстовые метки, второй содержит поля интерфейса пользователя, соответствующие текстовым меткам (вместе с элементами управления проверкой для них), и третий, содержащий элемент управления календарем для выбора даты, которая размещается на четырех строках. Пятая строка содержит