В этой главе мы рассмотрим два различных вида элементов управления:
□ Элементы управления пользователя — преобразование существующих страниц ASP.NET в элементы управления
□ Специальные элементы управления — объединение функций нескольких элементов управления, расширение существующих элементов управления и создание новых элементов управления с самого начала
Мы проиллюстрируем элементы управления пользователя, преобразовывая приложение предварительного заказа помещения для проведения мероприятий из предыдущей главы в элемент управления пользователя так, чтобы его можно было легко встроить в другие страницы 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 открывает важное различие: в элементе <body> отсутствует элемент <form>. Это связано с тем, что элементы управления пользователя будут вставляться внутрь форм ASP.NET в других файлах, и поэтому не нуждаются в собственном теге формы.
Просмотр созданных шаблонных файлов открывает еще одно важное отличие: созданный класс наследует из класса System.Web.UI.UserControl. Это также связано с тем, что элемент управления будет использоваться внутри формы.
Наш простой элемент управления будет выводить графическое изображение, соответствующее одной из четырех стандартных мастей колоды карт (трефы, бубны, черви, пики). Требуемые для этого графические изображения поставляются как часть Visual Studio; их можно найти в C:Program FilesMicrosoft Visual Studio.NETCommon7Graphicsbitmapsassorted с именами файлов CLUB.BMP, DIAMOND.BMP, HEART.BMP и SPADE.BMP. Скопируйте их в каталог проекта, чтобы ими можно было воспользоваться.
Добавим некоторый код к новому элементу управления. В файл PCSUserC1.ascx, представленный в виде кода HTML, добавим следующие строки:
<HTML>
<HEAD> </HEAD>
<BODY>
<TABLE CellSpacing=4>
<TR vAlign=middle>
<TD>
<asp:Image Runat="server" ID="suitPic" ImageURL="club.bmp " />
</TD>
<TD height=20>
<asp:Label Runat="server" ID="suitLabel">Club</asp:Label>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Этот код определяет состояние по умолчанию элемента управления, которое будет изображением трефы с меткой. Прежде чем добавлять дополнительную функциональность, протестируем такое поведение по умолчанию, добавляя этот элемент управления в проект Web-страницы WebForm1.aspx.
Чтобы использовать специальный элемент управления в файле .aspx, сначала необходимо определить, как мы будем на него ссылаться, то есть, имя тега, который будет представлять элемент управления в коде HTML. Чтобы сделать это, используется директива <%@ Register %> в верхней части кода следующим образом:
<%@ Register TagPrefix="PCS" TagName="UserC1" Src="PCSUserC1.ascx" %>
Здесь используются атрибут Src для указания на файл, содержащий элемент управления пользователя, и атрибуты TagPrefix и TagName для определения имени тега для использования (в форме TagPrefix: TagName). Теперь мы можем использовать этот элемент управления, добавляя следующий элемент:
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false"
Inherits="PCSUserCWebApp1.WebForm1" %>
<%@ Register TagPrefix="PCS" TagName="UserC1" Src= "PCSUserC1.ascx" %>
<HTML>
<HEAD>
<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">
<PCS:UserC1 Runat="server" id="myUserControl" />
</form>
</BODY>
</HTML>
Элементы управления пользователя могут не объявляться по умолчанию в базовом коде формы, поэтому может понадобиться добавить следующее объявление в WebForm1.aspx.cs:
public class WebForm1 : System.Web.UI.Page {
protected PCSUserC1 myUserControl;
...
Это все, что нужно сделать для тестирования элемента управления пользователя, и выполнение проекта приведет к следующему результату:
club
Этот элемент управления группирует вместе два существующих элемента управления, изображение и метку в табличной компоновке. Поэтому он попадает в категорию композитных элементов управления.
Чтобы получить управление над выводимой мастью, можно использовать атрибут элемента <PCS: UserC1>. Атрибуты элементов для элементов управления пользователя автоматически отображаются в свойства элементов управления пользователя, поэтому для того, чтобы это заработало, необходимо только добавить свойство в код элемента управления PCSUserC1.ascx.cs. Назовем это свойство Suit и позволим ему принимать значение любой масти. Чтобы упростить представление состояния элемента управления, определим внутри пространства имен PCSUserCWebAppl перечисление для хранения четырех названий мастей:
namespace PCSUserCWebAppl {
...
public enum suit {
club, diamond, heart, spade
}
...
}
Для класса PCSUserC1 требуется переменная-член для хранения типа данных suit (масть) — currentSuit:
public class PCSUserC1 : System.Web.UI.UserControl {
protected System.Web.UI.WebControls.Image suitPic;
protected System.Web.UI.WebControls.Label suitLabel;
protected suit currentSuit;
А также свойство для доступа к этой переменной-члену, Suit:
public suit Suit {
get {
return currentSuit;
}
set {
currentSuit = value;
suitPic.ImageUrl = currentSuit.ToString() + ".bmp";
suitLabel.Text = currentSuit.ToString();
}
}
Здесь метод доступа set() задает URL изображения как один из файлов, скопированных ранее, а текст выводит название масти.
Теперь элемент управления закончен, и нам надо добавить код в WebForm1.aspx для доступа к этому новому свойству. Используем список переключателей для выбора масти:
<BODY MS_POSITIONING="GridLayout">
<form method="post" runat="server">
<PCS:UserC1 Runat="server" id="myUserControl" />
<asp:RadioButtonList Runat="server" ID="suitList" autopostback="True">
<asp:ListItem Value="club" Selected="True">Club</asp:ListItem>
<asp:ListItem Value="diamond">Diamond</asp:ListItem>
<asp:ListItem Value="heart">Heart</asp:ListItem>
<asp:ListItem Value="spade">Spade</asp:ListItem>
</asp:RadioButtonList>
