Поделиться через

Общие сведения о пользовательских элементах управления ASP.NET

  • Статья

Обновлен: Ноябрь 2007

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

  • Пользовательские элементы управления. Пользовательские элементы управления — это контейнеры, в которые можно поместить разметку и серверные веб-элементы управления. Пользовательский элемент управления затем можно рассматривать как единое целое и задавать для него свойства и методы.

  • Настраиваемые элементы управления. Настраиваемые элементы управления представляют собой классы с кодом, добавляемым и изменяемым программистом, производные от класса Control или WebControl.

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

В этом разделе содержатся общие сведения о работе с пользовательскими элементами управления ASP.NET.

Структура пользовательских элементов управления

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

Пользовательские элементы управления отличаются от веб-страницы ASP.NET:

  • Расширением имени файла; пользовательский элемента управления имеет расширение ASCX.

  • Вместо директивы @ Page пользовательский элемент управления содержит директиву @ Control, определяющую конфигурацию и другие свойства.

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

  • В пользовательском элементе управления отсутствует элемент html, body или form. Эти элементы должны находиться на странице, на которой размещены элементы управления.

В пользовательском элементе управления можно использовать те же элементы HTML (кроме элементов html, body или form) и веб-элементы управления, что и на веб-странице ASP.NET. Например, при создании пользовательского элемента управления, который используется как панель инструментов, можно поместить в этот элемент управления набор серверных веб-элементов управления Button и задать обработчики событий для кнопок.

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

fb3w5b53.alert_security(ru-ru,VS.90).gifПримечание о безопасности.

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

 
<%@ Control Language="VB" ClassName="UserControl1" %>
<script runat="server">
    Protected colors As String() = {"Red", "Green", "Blue", "Yellow"}
    Protected currentColorIndex As Integer = 0
    Protected Sub Page_Load(ByVal sender As Object, _
            ByVal e As System.EventArgs)
        If IsPostBack Then
            currentColorIndex = CInt(ViewState("currentColorIndex"))
        Else
            currentColorIndex = 0
            DisplayColor()
        End If
    End Sub
    
    Protected Sub DisplayColor()
        textColor.Text = colors(currentColorIndex)
        ViewState("currentColorIndex") = currentColorIndex.ToString()
    End Sub

    Protected Sub buttonUp_Click(ByVal sender As Object, _
            ByVal e As System.EventArgs)
        If currentColorIndex = 0 Then
            currentColorIndex = colors.Length - 1
        Else
            currentColorIndex -= 1
        End If
        DisplayColor()
    End Sub
    
    Protected Sub buttonDown_Click(ByVal sender As Object, _
            ByVal e As System.EventArgs)
        If currentColorIndex = colors.Length - 1 Then
            currentColorIndex = 0
        Else
            currentColorIndex += 1
        End If
        DisplayColor()
    End Sub
</script>
<asp:TextBox ID="textColor" runat="server" 
    ReadOnly="True" />
<asp:Button Font-Bold="True" ID="buttonUp" runat="server"  
    Text="^" OnClick="buttonUp_Click" />
<asp:Button Font-Bold="True" ID="buttonDown" runat="server" 
    Text="v" OnClick="buttonDown_Click" />

<% @ Control Language="C#" ClassName="UserControl1" %>
<script runat="server">
    protected int currentColorIndex;
    protected String[] colors = {"Red", "Blue", "Green", "Yellow"};
    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            currentColorIndex = 
                Int16.Parse(ViewState["currentColorIndex"].ToString());
        }
        else
        {
            currentColorIndex = 0;
            DisplayColor();
        }
    }
    
    protected void DisplayColor()
    {
        textColor.Text = colors[currentColorIndex];
        ViewState["currentColorIndex"] = currentColorIndex.ToString();
    }
    
    protected void buttonUp_Click(object sender, EventArgs e)
    {
        if(currentColorIndex == 0)
        {
            currentColorIndex = colors.Length - 1;
        }
        else
        {
            currentColorIndex -= 1;
        }
        DisplayColor();
    }

    protected void buttonDown_Click(object sender, EventArgs e)
    {
        if(currentColorIndex == (colors.Length - 1))
        {
            currentColorIndex = 0;
        }    
        else
        {
            currentColorIndex += 1;
        }
        DisplayColor();
    }
</script>
<asp:TextBox ID="textColor" runat="server" 
    ReadOnly="True" />
<asp:Button Font-Bold="True" ID="buttonUp" runat="server" 
    Text="^" OnClick="buttonUp_Click" />
<asp:Button Font-Bold="True" ID="buttonDown" runat="server" 
    Text="v" OnClick="buttonDown_Click" />

Обратите внимание, что пользовательский элемент управления похож на страницу ASP.NET — он содержит несколько элементов управления (элемент управления TextBox и два элемента управления Button) и код, обрабатывающий события Click кнопок, и событие Load страницы. Однако элемент управления не содержит разметки, за исключением элементов управления, и вместо директивы @ Page содержит директиву @ Control.

Добавление пользовательского элемента управления на страницу

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

Определение методов и свойств для пользовательского элемента управления

Определить свойства и методы для пользовательского элемента управления можно точно так же, как и для страницы. Определение свойства для пользовательского элемента управления позволяет задавать его свойства декларативно и в коде.

События в пользовательских элементах управления

Если пользовательский элемент управления содержит серверные веб-элементы управления, то можно написать код в пользовательском элементе управления для обработки событий, вызванных дочерними элементами управления. Например, если пользовательский элемент управления содержит элемент управления Button, то можно создать обработчик событий для события Click кнопки.

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

Ссылки на внешние ресурсы

При выполнении пользовательского элемента управления ссылки на внешние ресурсы, такие как изображения или точки привязки на другие страницы разрешаются с помощью URL-адреса пользовательского элемента управления, который используется как базовый URL-адрес. Например, если пользовательский элемент управления содержит элемент управления Image, свойство ImageUrl которого имеет значение Images/Button1.gif, то URL-адрес изображения добавляется к URL-адресу пользовательского элемента управления для разрешения полного пути к изображению. Если пользовательский элемент управления ссылается на ресурс, находящийся за пределами вложенной папки самого пользовательского элемента управления, то необходимо предоставить путь, разрешающийся в правильную папку во время выполнения. Дополнительные сведения об указании путей для серверных элементов управления ASP.NET см. в разделе Путь к веб-узлу ASP.NET.

Кэширование и пользовательские элементы управления

Пользовательские элементы управления могут кэшировать директивы, не представленные на странице, на которой расположен элемент управления. Следовательно, пользовательские элементы управления можно добавлять на страницы и на кэшированные части страниц. Дополнительные сведения см. в разделе Кэширование частей страницы ASP.NET.

См. также

Другие ресурсы

Пользовательские элементы управления ASP.NET