Давайте добавим пару элементов управления сервера Web в наш проект. Все элементы управления сервера Web и проверкой достоверности даются в следующей форме типа элемента XML:
является именем элемента управления сервера ASP.NET,
attribute="value"
является одной или несколькими спецификациями атрибутов, a Contents определяет содержимое элемента управления, если оно существует. Некоторые элементы управления позволяют задавать свойства с помощью атрибутов и содержимого элемента управления, например,
Label
(используемый
для вывода простого текста), где текст можно определить любым образом. Другие элементы управления могут использовать схему вложенности элементов для определения их иерархии, например,
Table
(определяющий таблицу), который может содержать элементы
TableRow
, чтобы декларативно определить строки таблицы.
Отметим, что, так как синтаксис элементов управления основывается на XML (хотя они могут использоваться встроенными в код, не являющийся XML, такой как HTML, будет ошибкой отсутствие закрывающих тегов, отсутствие
/>
для пустых элементов или перекрытие элементов управления.
Наконец, мы снова видим атрибут
runat="server"
в элементе управления сервера Web. Он важен здесь так же, как и в других местах, и распространенной ошибкой является пропуск этого атрибута, приводящий к неработающим формам Web.
В первом примере мы делаем все простым способом. Измените представление в виде кода HTML для
<meta name=vs_targetSchema content="Internet Explorer 5.0" >
<meta name="GENERATOR" Content="Microsoft Visual Studio 7.0">
<meta name="CODE_LANGUAGE" Content="C#">
</head>
<body MS_POSITIONING="GridLayout">
<form method="post" runat="server">
<asp:Label Runat="server" ID="resultLabel"/>
<br>
<asp:Button Runat="server" ID="triggerButton" Text="Click Me" />
</form>
</body>
</html>
Обратите внимание, что при вводе этого кода VS пытается предсказать ввод так же, как это делается при создании кода C#.
Здесь мы добавили два элемента управления формы Web — метку и кнопку.
Возвращаясь к окну построения, можно увидеть, что были добавлены эти элементы управления, именованные с помощью своих атрибутов
ID
. Как и для форм Windows, мы имеем полный доступ к свойствам, событиям и т.д. через окно Properties, и можем видеть немедленные изменения в коде или визуальном представлении, когда производятся эти изменения.
Любые добавляемые серверные элементы управления автоматически будут становиться частью объектной модели создаваемой формы.
Чтобы приложение действительно что-то делало, давайте добавим обработчик событий для нажатия кнопки. Здесь мы можем либо ввести имя метода в окне Properties для кнопки, либо просто сделать двойной щелчок на кнопке, чтобы получить используемый
по умолчанию обработчик событий. Если сделать двойной щелчок на кнопке, то автоматически добавится следующий метод обработки события:
protectеd void triggerButton_Click(object sender, System EventArgs e) {
}
Он соединяется с кнопкой с помощью кода, добавляемого в
InitializeComponent
:
private void InitilizeComponent
this.triggerButton.Click += new System.EventHandler(this.triggerButton_Click);
this.Load += new System.EventHandler(this.Page_Load);
Теперь мы готовы к запуску приложения. Строим приложение в VS обычным образом, все файлы будут откомпилированы и/или помещены на сервер Web готовыми к использованию. Чтобы протестировать приложение Web, можно либо запустить приложение (что предоставит весь набор средств отладки VS), либо просто направить браузер на адрес
http://localhost/PCSWebAppl/webForm1.aspx
. В любом случае можно будет увидеть кнопку Click Me на странице Web. До нажатия кнопки посмотрим на код, полученный браузером, с помощью View|Source (в IE). Раздел
<input type= "submit" name="triggerButton" value="Click Me" id="triggerButton" />
</form>
Элементы управления сервера Web сгенерировали правильный код HTML —
<span>
и
<input>
для
<asp:Label>
и
<asp:Button>
, соответственно. Также существует поле
<input type="hidden">
с именем
_VIEWSTATE
. Оно инкапсулирует состояние формы, как это упоминалось ранее. Эта информация используется, когда форма посылается назад на сервер для воссоздания UI, отслеживания изменений и т.д. Отметим, что для этого был сконфигурирован элемент
<form>
, он будет отправлять данные назад в
WebForm1.aspx
(определенное в
action
) с помощью операции HTTP POST (определенной в
method
). Ему было также присвоено имя
ctrl1
. Если посмотреть на HTML, сгенерированный более сложными формами Web, то можно увидеть, что это обычный тип присваивания и он соответствует способу, которым работает ASP.NET.
После нажатия на кнопку и появления текста проверьте снова исходный код HTML (пробелы добавлены для ясности)