Среда ASP.NET позволяет программисту создавать собственные элементы управления. Выделяют два вида элементов: пользовательские элементы управления (User Controls, UC) и серверные элементы (Server Custom Controls, SCC). Фактически, UC представляют собой фрагменты обыкновенной aspx-страницы, помещенные в специальную именованную оболочку. Процесс их создания в целом подобен процессу визуального дизайна. SCC – это полноценные классы, размещенные в отдельных сборка. Процесс создания SCC является невизуальным, и возможностей для тонкой настройки они предоставляют больше.
Пользовательский элемент управления может быть создан декларативно в текстовом или HTML редакторе. Декларативный синтаксис пользовательского элемента управления очень похож на синтаксис, используемый при создании страниц Web Forms. Основным отличием является то, что пользовательский элемент управления не включает элементы <html>, <body> и <form>. В качестве примера UC приведем компонент для ввода имени пользователя и пароля. Ниже приведен код компонента (файл LogonForm.ascx).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<script language="C#" runat="server"> public string UserId {
get { return User.Text; }
set { User.Text = value; } } public string Password {
get { return Pass.Text; }
set { Pass.Text = value; } } </script>
<table style="BORDER-RIGHT: black 1px solid;
BORDER-TOP: black 1px solid;
BORDER-LEFT: black 1px solid;
BORDER-BOTTOM: black 1px solid;
FONT: 10pt verdana" cellspacing="15"> <TR>
<TD><B>Login: </B></TD> <TD>
<asp:TextBox id="User" runat="server" Width="144px" /> </TD> </TR> <TR>
<TD><B>Password: </B></TD> <TD>
<asp:TextBox id="Pass" runat="server" Width="144px" TextMode="Password" /> </TD> </TR> <TR>
<TD></TD> <TD>
<asp:Button id="Button1" runat="server" Text="Submit" /> </TD> </TR> </table>
|
Создадим страницу, на которой будет использоваться элемент управления. При написании такой страницы необходимо использовать директиву
@Register для указания следующих параметров:
- Src – имя ascx-файла, содержащего элемент управления;
- TagName – имя тэга, идентифицирующего элемент управления;
- TagPrefix – префикс для тэгов, ссылающихся на элемент управления. При размещении элемента на странице он должен быть снабжен атрибутом
runat="server".
1
2
3
4
5
|
<%@ Register TagPrefix="EPAM" TagName="Login"
Src="~\LogonForm.ascx" %> <html> <body>
<form id="Form1" method="post" runat="server">
<EPAM:Login id="Login1" runat="server" /> </form> </body> </html>
|
Вообще говоря, существует универсальный «рецепт» преобразования любой aspx-страницы в пользовательский элемент управления. Чтобы сделать это:
1. Удалите все элементы <html>, <body> и <form> из страницы.
2. Если в aspx-странице есть директива @Page, замените ее директивой @Control. Чтобы избежать ошибки синтаксического разбора при преобразовании страницы в элемент управления, удалите все атрибуты, поддерживаемые директивой @Page, которые не поддерживаются директивой @Control.
3. Включите атрибут className в директиву @Control (при желании). Это даст возможность присвоить строгий тип пользовательскому элементу управления при программном добавлении на страницу или к другому серверному элементу управления.
4. Присвойте элементу управления имя файла, которое отражает планы по его использованию, и измените расширение имени файла на .ascx.
UC похож на страницу и тем, что он может содержать обработчики собственных событий. Следующий пример демонстрирует элемент управления, инкапсулирующий LinkButton, который отображает текущее время. При щелчке на ссылке или загрузке страницы время обновляется. При разработке этого элемента управления мы поместим требуемый код в code-behind-файл. Также определим собственное свойство, отвечающее за формат отображения времени.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<%@ Control Codebehind="TimeDisplay.ascx.cs"
Inherits="TimeDisplay"%> <asp:LinkButton id="lnkTime" runat="server"
OnClick="lnkTime_Click" />
using System;
using System.Web;
using System.Web.UI.WebControls;
public class TimeDisplay : System.Web.UI.UserControl {
}
protected LinkButton lnkTime; private string format; public string Format {
get { return format; }
set { format = value; } } protected void Page_Load(object sender,
System.EventArgs e) {
if (!Page.IsPostBack) RefreshTime(); } protected void lnkTime_Click(object sender,
System.EventArgs e) {
RefreshTime(); } public void RefreshTime() {
if (format == "")
lnkTime.Text = DateTime.Now.ToLongTimeString();
else
lnkTime.Text = DateTime.Now.ToString(format); }
|
Текст страницы с двумя элементами TimeDisplay, а также ее внешний вид приведены ниже
1
2
3
4
5
6
7
|
<%@ Register TagPrefix="EPAM" TagName="TimeDispl"
Src="~\TimeDisplay.ascx" %> <html> <body>
<form id="Form1" method="post" runat="server"> <EPAM:TimeDispl id="TD1" runat="server"
Format="dddd, dd MMMM yyyy HH:mm:ss tt (GMT z)" /> <hr />
Рис. 28. Страница с элементами TimeDisplay.ascx
<EPAM:TimeDispl id="TD2" runat="server" /> </form> </body> </html>
|
Последний аспект, который будет продемонстрирован для пользовательских элементов управления, это создание собственных событий. Пусть требуется создать элемент управления, содержащий две опции выбора – Yes и No, а также кнопку, при нажатии на которую генерируется определенное событие. Предполагается, что в это событие в качестве аргумента передается индекс выбранной опции (1 или 2).
Исходный текст и код элемента управления представлен ниже.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<%@ Control Codebehind="UserChoiceComponent.ascx.cs"
Inherits="UserChoice"%> <table style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid;
BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; FONT: 10pt verdana" cellspacing="15"> <TR>
<TD> <B>
<asp:RadioButtonList id="RBL1" runat="server" /> </B> </TD> </TR> <TR> <TD>
<asp:Button id="B1" runat="server" Text="Submit" onclick="B1_Click" /> </TD> </TR> </table>
using System;
using System.Web;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
public class UserChoice : System.Web.UI.UserControl { protected RadioButtonList RBL1;
protected Button B1; protected void Page_Load(object sender,
System.EventArgs e) { if (!Page.IsPostBack) {
string[] items = {"Yes", "No"}; RBL1.DataSource = items; RBL1.DataBind(); } }
public event UserChoiceEventHandler UserChoosed;
protected void B1_Click(object sender,System.EventArgs e){ if (UserChoosed != null) {
int item = RBL1.SelectedIndex + 1;
UserChoiceEventArgs args =
new UserChoiceEventArgs(item); UserChoosed(this, args); } } }
public class UserChoiceEventArgs : EventArgs { private int selectedItem; public int SelectedItem {
get { return selectedItem; } } public UserChoiceEventArgs(int item) {
selectedItem = item; } }
public delegate void UserChoiceEventHandler(object sender,
UserChoiceEventArgs e);
|
Дадим некоторые комментарии. Для генерации события был создан собственный тип UserChoiceEventArgs, описывающий аргументы события. Это стандартный подход. Кроме этого, был объявлен соответствующий открытий делегат, а в классе компонента – событие UserChoosed. Компонент содержит два обработчика внутренних событий. В обработчике события Page_Load() происходит заполнение отображаемого списка. В обработчике события нажатия на кнопку проверяется, назначен ли внешний обработчик для UserChoosed. Если это так, то создается требуемый аргумент и генерируется это событие.
