Симон Робинсон - C# для профессионалов. Том II

Мы проиллюстрируем элементы управления пользователя, преобразовывая приложение предварительного заказа помещения для проведения мероприятий из предыдущей главы в элемент управления пользователя так, чтобы его можно было легко встроить в другие страницы ASP.NET. В случае специальных элементов управления мы создадим элемент управления для выборочного опроса общественного мнения, позволяющий пользователю голосовать за какой-то вариант из списка и видеть, как проходит голосование.

Элементы управления пользователя создаются с помощью кода ASP.NET также, как создаются стандартные страницы Web ASP.NET. Различие состоит в том, что после создания элемента управления пользователя его можно повторно применять на множестве страниц ASP.NET с минимальными трудностями.

Например, предположим, что создана страница, которая выводит некоторую информацию из базы данных, возможно, информацию о заказе. Вместо создания фиксированной страницы, которая это делает, можно поместить соответствующий код в элемент управления пользователя и затем вставлять при желании этот элемент управления в множество различных страниц Web.

Кроме того, можно определить свойства и методы для элементов управления пользователя. Например, определить фоновый цвет для вывода таблицы базы данных на странице Web или повторно выполнить запрос к базе данных для проверки изменений.

Давайте создадим простой элемент управления пользователя, обсуждая соответствующие вопросы по мере их появления, и затем скомпонуем его, чтобы увидеть, как можно добавлять методы и свойства.

В VS.NET создадим новое приложение Web с именем PCSUserCWebAppl, открывая VS.NET, щелкнув на Getting Started, и выбирая затем New Project, щелкнув на пиктограмме Web Application. Должно открыться диалоговое окно, позволяющее сохранить этот проект.

Когда будут созданы стандартные файлы, выберем пункт меню Project|Add New Item… и добавим Web User Control с именем PCSUserC1.ascx, как показано ниже:

Добавленные к проекту файлы с расширениями .ascxи .ascx.csработают очень похожим образом с файлами .aspx, с которыми мы уже знакомы. Файл .ascxбудет содержать код ASP.NET и выглядеть очень похоже на обычный файл .aspx. Файл .ascx.csявляется нашим кодом, который определяет элемент управления пользователя преимущественно так же, как в файлах .aspx.csопределяются формы.

Файлы .ascxможно просматривать в виде кода HTML или в окне построителя, как и файлы .aspx. Просмотр файла в виде кода HTML открывает важное различие: в элементе

Просмотр созданных шаблонных файлов открывает еще одно важное отличие: созданный класс наследует из класса System.Web.UI.UserControl. Это также связано с тем, что элемент управления будет использоваться внутри формы.

Наш простой элемент управления будет выводить графическое изображение, соответствующее одной из четырех стандартных мастей колоды карт (трефы, бубны, черви, пики). Требуемые для этого графические изображения поставляются как часть Visual Studio; их можно найти в C:Program Files\Microsoft Visual Studio.NET\Common7\Graphics\bitmaps\assorted с именами файлов CLUB.BMP, DIAMOND.BMP, HEART.BMPи SPADE.BMP. Скопируйте их в каталог проекта, чтобы ими можно было воспользоваться.

Добавим некоторый код к новому элементу управления. В файл PCSUserC1.ascx, представленный в виде кода HTML, добавим следующие строки:

Этот код определяет состояние по умолчанию элемента управления, которое будет изображением трефы с меткой. Прежде чем добавлять дополнительную функциональность, протестируем такое поведение по умолчанию, добавляя этот элемент управления в проект Web-страницы WebForm1.aspx.

Чтобы использовать специальный элемент управления в файле .aspx, сначала необходимо определить, как мы будем на него ссылаться, то есть, имя тега, который будет представлять элемент управления в коде HTML. Чтобы сделать это, используется директива в верхней части кода следующим образом:

Здесь используются атрибут Srcдля указания на файл, содержащий элемент управления пользователя, и атрибуты TagPrefixи TagNameдля определения имени тега для использования (в форме TagPrefix: TagName). Теперь мы можем использовать этот элемент управления, добавляя следующий элемент: