Пошаговое руководство. Создание базового конструктора элементов управления для серверного веб-элемента управления

Статья
10/22/2014

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

В этом пошаговом руководстве демонстрируется создание конструктора основных элементов управления для обеспечения серверного веб-элемента управления пользовательским интерфейсом (UI) во время разработки.

При создании пользовательского серверного элемента управления ASP.NET можно создавать связанные конструкторы для отображения элемента управления в средстве визуальной разработки, например Microsoft Visual Studio 2005. Конструктор позволяет среде хоста отображать интерфейс пользователя времени разработки для элементов управления, что позволяет разработчикам легко настроить свойства и содержимое элемента управления. Дополнительные сведения о средствах конструктора и о том, как связать различные классы конструктора с пользовательским элементом управления, содержатся в разделе Общие сведения о конструкторах элементов управления ASP.NET.

В процессе выполнения этого пошагового руководства вы научитесь:

Создавать стандартный составной элемент управления конструктора и связывать его с составным элементом управления.
Создавать изменяемый в размерах составной элемент управления конструктора и связывать его с составным элементом управления.
Создавать основной контейнер элемента управления конструктора с изменяемыми областями и связывать его с элементом управления WebControl. Этот конструктор позволяет добавить текст к изменяемой области в оболочке конструктора, а также перетащить дополнительные элементы управления в область.
Ссылаться на пользовательские элементы управления (и их связанные конструкторы) на веб-странице.
Работать с веб-страницей в режиме конструктора в Visual Studio 2005.

Обязательные компоненты

Для выполнения этого пошагового руководства потребуется:

Visual Studio 2005, которая будет использоваться для создания веб-страницы, на которой размещены пользовательские элементы управления и их связанные конструкторы.
ASP.NET веб-узел для страницы, содержащей элемент управления. Если есть такой уже настроенный узел, можно использовать его в качестве отправной точки для данного пошагового руководства. Если нет, то сведения о создании виртуального каталога или узла содержатся в разделе Практическое руководство. Создание и настройка виртуальных каталогов в IIS 5.0 и 6.0.

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

В этом разделе создаются три основных серверных элементов управления и конструктор связанного пользовательского элемента управления для каждого из них.

Создание файла для кода

В редакторе создайте новый файл с именем SimpleControlDesigners с соответствующим расширение для языка, с которым вы работаете. Например, в Visual Studio 2005 создайте новый файл класса с именем SimpleControlDesigners.vb или SimpleControlDesigners.cs.

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

Imports System
Imports System.ComponentModel
Imports System.ComponentModel.Design
Imports System.Drawing
Imports System.Web.UI
Imports System.Web.UI.Design
Imports System.Web.UI.Design.WebControls
Imports System.Web.UI.WebControls

Namespace Samples.AspNet.VB.Controls
End Namespace

using System;
using System.ComponentModel;
using System.ComponentModel.Design;
using System.Drawing;
using System.Web.UI;
using System.Web.UI.Design;
using System.Web.UI.Design.WebControls;
using System.Web.UI.WebControls;

namespace Samples.AspNet.CS.Controls 
{
}

Сохраните файл.

Теперь приступайте к созданию составного веб-сервера управления и связанного конструктора. Конструктор может находиться в той же сборке, что элемент управления, или в другой; в этом пошаговом руководстве они созданы в одном файле кода и сборки для удобства.

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

В пространстве имен, объявленном в файле SimpleControlDesigners, создайте глобальное объявление для класса составного элемента управления, наследуемого от CompositeControl, как показано в следующем примере.
```
    Public Class SimpleCompositeControl
        Inherits CompositeControl
    End Class
```
```
 public class SimpleCompositeControl : CompositeControl
    {
    }
```

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

Dim _prompt As String = "Please enter your date of birth: "
Overridable Property Prompt() As String
    Get
        Dim o As Object
        o = ViewState("Prompt")
        If o Is Nothing Then
            Return _prompt
        Else
            Return CType(o, String)
        End If
    End Get
    Set(ByVal value As String)
        ViewState("Prompt") = value
    End Set
End Property

Overridable Property DOB() As DateTime
    Get
        Dim o As Object
        o = ViewState("DOB")
        If o Is Nothing Then
            Return DateTime.Now
        Else
            Return CType(o, DateTime)
        End If
    End Get
    Set(ByVal value As DateTime)
        ViewState("DOB") = value
    End Set
End Property

private String _prompt = "Please enter your date of birth: ";
public virtual String Prompt
{
    get
    {
        object o = ViewState["Prompt"];
        return (o == null) ? _prompt : (string)o;
    }
    set
    {
        ViewState["Prompt"] = value;
    }
}

public virtual DateTime DOB
{
    get
    {
        object o = ViewState["DOB"];
        return (o == null) ? DateTime.Now : (DateTime)o;
    }
    set
    {
        ViewState["DOB"] = value;
    }
}

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

Protected Overrides Sub CreateChildControls()
    Dim lab As New Label

    lab.Text = Prompt
    lab.ForeColor = System.Drawing.Color.Red
    Me.Controls.Add(lab)

    Dim lit As New Literal()
    lit.Text = "<br />"
    Me.Controls.Add(lit)

    Dim tb As New TextBox()
    tb.ID = "tb1"
    tb.Text = DOB.ToString()
    Me.Controls.Add(tb)

    MyBase.CreateChildControls()
End Sub

protected override void CreateChildControls() 
{
    Label lab = new Label();

    lab.Text = Prompt;
    lab.ForeColor = System.Drawing.Color.Red;
    this.Controls.Add(lab);

    Literal lit = new Literal();
    lit.Text = "<br />";
    this.Controls.Add(lit);

    TextBox tb = new TextBox();
    tb.ID = "tb1";
    tb.Text = DOB.ToString();
    this.Controls.Add(tb);

    base.CreateChildControls();
}

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

Хотя существуют разнообразные возможности отрисовки пользовательского интерфейса, которые можно добавить в конструктор, в следующем примере просто создается конструктор и переопределяется ключевое свойство в базовом классе, чтобы предотвратить изменение размеров элемента управления в режиме конструктора.
```
Public Class SimpleCompositeControlDesigner
    Inherits CompositeControlDesigner
    ' Set this property to prevent the designer from being resized.
    Public Overrides ReadOnly Property AllowResize() As Boolean
        Get
            Return False
        End Get
    End Property
End Class
```
```
public class SimpleCompositeControlDesigner : CompositeControlDesigner
{
    // Set this property to prevent the designer from being resized.
    public override bool AllowResize 
    {
        get { return false; }
    }
}
```
Немедленно выше объявления класса для составного элемента управления добавьте атрибут Designer метаданных, который связывает элемент управления с созданным конструктором класса, как показано в следующем примере:
```
<Designer(GetType(SimpleCompositeControlDesigner))> _
Public Class SimpleCompositeControl
    Inherits CompositeControl
```
```
[Designer(typeof(SimpleCompositeControlDesigner))]
public class SimpleCompositeControl : CompositeControl
```
Сохраните файл.

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

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

В пространстве имен, объявленном в файле SimpleControlDesigners, создайте глобальное объявление для нового класса составного элемента управления, наследующего от элемента управления SimpleCompositeControl, созданного ранее. В следующем примере показаны новые объявления.
```
    Public Class SimpleCompositeControl2
        Inherits SimpleCompositeControl
    End Class
```
```
 public class SimpleCompositeControl2 : SimpleCompositeControl
    {
    }
```
Свяжите этот элемент управления с базовым классом CompositeControlDesigner.

По умолчанию в этом примере создается основной, изменяемый в размерах конструктор для составного элемента управления.
```
<Designer(GetType(CompositeControlDesigner))> _
Public Class SimpleCompositeControl2
    Inherits SimpleCompositeControl
End Class
```
```
[Designer(typeof(CompositeControlDesigner))]
public class SimpleCompositeControl2 : SimpleCompositeControl
{
}
```
Сохраните файл.

Первые два элемента управления, которые вы создали, были составными элементами управления, связанными с конструктором составного элемента управления. Теперь предстоит создать простой элемент управления, производный от WebControl, и связать его с классом ContainerControlDesigner. Этот тип конструктора удобен, если требуется связать конструктор с одним пользовательским серверным веб-элементом управления и предоставить одну изменяемую область в области конструктора. Пользовательский элемент управления, созданный здесь, не реализует все фактические функции; он существует только для отображения возможностей класса ContainerControlDesigner.

Примечание.
Можно также указать эти же функциональные возможности при помощи составного элемента управления и конструктора, как те, что уже были созданы ранее. Этот пример предназначен только для демонстрации того, как можно использовать класс ContainerControlDesigner и связать его с элементом управления WebControl.

Можно также указать эти же функциональные возможности при помощи составного элемента управления и конструктора, как те, что уже были созданы ранее. Этот пример предназначен только для демонстрации того, как можно использовать класс ContainerControlDesigner и связать его с элементом управления WebControl.

Создание веб-сервера управления и контейнера конструктора с изменяемыми областями

В пространстве имен, объявленных в файле SimpleControlDesigners, создайте открытое объявление для нового веб-сервера управления класса, как показано в следующем примере кода:
```
  Public Class SimpleContainerControl
        Inherits WebControl
        Implements INamingContainer
    End Class
```
```
 public class SimpleContainerControl : WebControl, INamingContainer
    {
    }
```

Создайте класс конструктора элементов управления контейнера для того, чтобы связать пользовательский управления. Реализуются два свойства: свойство FrameStyle для хранения стилей для конструктора фрейма и свойство FrameCaption, чтобы содержать текст заголовка фрейма. Эти свойства предоставляют фреймы, чтобы элемент управления был видим и выбран в области конструктора. Код для конструктора и свойства отображается в приведенном ниже примере.

Примечание.
Класс ContainerControlDesigner автоматически обрабатывает все другие аспекты отрисовки пользовательского элемента управления во время разработки и предоставляет одну изменяемую область.

Public Class SimpleContainerControlDesigner
    Inherits ContainerControlDesigner

    Dim _style As Style

    ' Add the caption by default.
    Public Overrides ReadOnly Property FrameCaption() As String
        Get
            Return "A Simple ContainerControlDesigner"
        End Get
    End Property

    Public Overrides ReadOnly Property Framestyle() As Style
        Get
            If _style Is Nothing Then
                _style = New Style()
                _style.Font.Name = "Verdana"
                _style.Font.Size = New FontUnit("XSmall")
                _style.BackColor = Color.LightBlue
                _style.ForeColor = Color.Black
            End If

            Return _style
        End Get
    End Property

End Class

public class SimpleContainerControlDesigner : ContainerControlDesigner
{
    private Style _style = null;

    // Add the caption by default. Note that the caption 
    // will only appear if the Web server control 
    // allows child controls rather than properties. 
    public override string FrameCaption
    {
        get
        {
            return "A Simple ContainerControlDesigner";
        }
    }

    public override Style FrameStyle
    {
        get
        {
            if (_style == null)
            {
                _style = new Style ();
                _style.Font.Name = "Verdana";
                _style.Font.Size = new FontUnit ("XSmall");
                _style.BackColor = Color.LightBlue;
                _style.ForeColor = Color.Black;
            }

            return _style;
        }
    }
}

Связь конструктора с элементами управления. Непосредственно над объявлением класса для серверного веб-элемент управления добавьте атрибут метаданных Designer. Обратите внимание, что в данном случае, как показано в следующем примере, также добавляется атрибут ParseChildren с параметром false. Эта инструкция предписывает разборщику во время разработки рассматривать внутреннее содержимое элемента управления как дочерний элемент управления, а не как свойства. В этом случае нужно считать дочерний элемент управления таким образом, чтобы это позволило фактически перетащить другие серверные элементы управления в изменяемую область во время разработки и изменить их свойства, а также внутреннее содержимое этого элемента управления.
```
<Designer(GetType(SimpleContainerControlDesigner))> _
<ParseChildren(False)> _
Public Class SimpleContainerControl
    Inherits WebControl
    Implements INamingContainer
End Class
```
```
[Designer (typeof(SimpleContainerControlDesigner))]
[ParseChildren (false)]
public class SimpleContainerControl : WebControl, INamingContainer
{
}
```
Сохраните файл.

Вы создали три настраиваемых элемента управления и связанные с ним конструкторы элементов управления. Остается компилировать элементы управления в сборку и затем работать с ними в средстве визуального проектирования.

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

Откройте командную строку и перейдите в папку, где создан файл SimpleControlDesigners. Из этой командной строки можно скомпилировать исходный код в сборку.

Примечание.
Чтобы запустить компиляторы платформы .NET Framework из этого расположения, должна быть уже добавлена переменная PATH, содержащая путь к установленному .NT Framework. Обычно этот путь используется в каталоге установки Windows на \Microsoft.NET\Framework\<номер_версии>. Если вы не обновили переменную PATH, щелкните правой кнопкой мыши Мой компьютер, выберите Свойства, перейдите на вкладку Дополнительно и нажмите кнопку переменные среды. В списке Системные переменные дважды щелкните переменную PATH. В поле Значение переменной добавить точку с запятой в конец существующих значений текстового поля и затем введите путь установки .NET Framework. Нажмите кнопку OK, чтобы закрыть каждое диалоговое окно.

Чтобы запустить компиляторы платформы .NET Framework из этого расположения, должна быть уже добавлена переменная PATH, содержащая путь к установленному .NT Framework. Обычно этот путь используется в каталоге установки Windows на \Microsoft.NET\Framework\<номер_версии>. Если вы не обновили переменную PATH, щелкните правой кнопкой мыши Мой компьютер, выберите Свойства, перейдите на вкладку Дополнительно и нажмите кнопку переменные среды. В списке Системные переменные дважды щелкните переменную PATH. В поле Значение переменной добавить точку с запятой в конец существующих значений текстового поля и затем введите путь установки .NET Framework. Нажмите кнопку OK, чтобы закрыть каждое диалоговое окно.

Скомпилируйте элементы управления в файле SimpleControlDesigners в сборке с помощью следующей команды компиляции:

csc /r:System.dll /r:System.Design.dll /r:System.Drawing.dll /debug+ /r:System.Web.dll /t:library /out:SimpleControlDesignersCS.dll simplecontroldesigners.cs

vbc /r:System.dll /r:System.Design.dll /r:System.Drawing.dll /debug+ /r:System.Web.dll /t:library /out:SimpleControlDesignersVB.dll SimpleControlDesigners.vb

Переместите полученный файл сборки в папку \Bin веб-узла для страницы, где будет размещаться элемент управления.

Примечание.
Пользователи Visual Studio, желающие скомпилировать элементы управления и конструкторы, должны добавить ссылку на System.Design.dll. Дополнительные сведения см. в разделе Практическое руководство. Добавление ссылки на компонент .NET или COM на веб-узле.

Пользователи Visual Studio, желающие скомпилировать элементы управления и конструкторы, должны добавить ссылку на System.Design.dll. Дополнительные сведения см. в разделе Практическое руководство. Добавление ссылки на компонент .NET или COM на веб-узле.

Создание веб-страницы на узле элемента управления

Теперь, после создания сборки с пользовательскими элементами управления и их конструкторами связанного элемента управления, создайте веб-страницу в Visual Studio 2005, чтобы ссылаться на элементы управления, просмотреть, как они указаны в режиме конструктора и загрузить страницу в обозреватель.

Создание веб-страницы для размещения элементов управления

При помощи веб-сайта, открытого на Visual Studio 2005, создайте новую страницу, вызываемую ControlDesigners.aspx. Наверху страницы, сразу под объявлением страницы, добавьте директиву Register, чтобы сослаться на сборку и элементы управления, созданные ранее, как показано в следующем примере.
```
<%@ Page Language="VB" %>
<%@ register tagprefix="aspSample" 
  assembly="SimpleControlDesignersVB" 
  namespace="Samples.AspNet.VB.Controls" %>
```
```
<%@ Page Language="C#" %>
<%@ register tagprefix="aspSample" 
  assembly="SimpleControlDesignersCS" 
  namespace="Samples.AspNet.CS.Controls" %>
```

Выполните остальную часть страницы как показано в следующем примере кода, чтобы сделать ссылки для каждого из трех элементов управления, созданного ранее: SimpleCompositeControl, SimpleCompositeControl2, и SimpleContainerControl. Обратите внимание, что для ссылки каждого элемента управления можно использовать префикс aspSample, указанный в директиве Register.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Designers Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <p style="font-family:tahoma;font-size:large;
            font-weight:bold">
            Simple Control Designers
        </p>
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
            Composite, no-resize</span>
        </div>
        <aspSample:SimpleCompositeControl id="SimpleControl1" runat="server" />
        <br /><br />
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
            Composite, resize</span>
        </div>
        <aspSample:SimpleCompositeControl2 id="SimpleControl2" runat="server"  
            height="87px" width="238px" />
        <br /><br />
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
                Container</span>
        </div>
        <aspSample:SimpleContainerControl id="SimpleControl3" runat="server" 
            height="57px">
            Type some content here.
        </aspSample:SimpleContainerControl>
        <br /><br />
    </div>
    </form>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Designers Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <p style="font-family:tahoma;font-size:large;
            font-weight:bold">
            Simple Control Designers
        </p>
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
            Composite, no-resize</span>
        </div>
        <aspSample:SimpleCompositeControl id="SimpleControl1" runat="server" />
        <br /><br />
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
            Composite, resize</span>
        </div>
        <aspSample:SimpleCompositeControl2 id="SimpleControl2" runat="server"  
            height="87px" width="238px" />
        <br /><br />
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
                Container</span>
        </div>
        <aspSample:SimpleContainerControl id="SimpleControl3" runat="server" 
            height="57px">
            Type some content here.
        </aspSample:SimpleContainerControl>
        <br /><br />
    </div>
    </form>
</body>
</html>

Сохраните эту страницу.

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

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

Переключитесь в режим конструктора для страницы.

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

Страница ControlDesigners.aspx в режиме разработки
Щелкните в области содержимого элемента управления контейнером и введите некоторое текстовое содержимое элемента управления.
Переключитесь в представление источника и найдите код источника для контейнерного элемента управления. Убедитесь, что текст был введен в области и теперь отображается в исходном коде.
Переключитесь в представление дизайнера.
Щелкните фрейм элемента управления, поместите указатель мыши над одним из значков изменения размеров и измените размер элемента управления контейнер.
Щелкните в изменяемой области элемента управления в конце текстового содержимого и нажмите клавишу ENTER, чтобы добавить разрыв строки.
Перетащите элемент управления Button из Панели элементов и поместите его в изменяемую область под введенный текст. Перетащите элемент управления Label из Панели элементов и поместите его рядом с кнопкой. Это демонстрирует, что можно перетаскивать дочерние элементы управления в изменяемую область. Если требуется, чтобы можно было задать свойства для дочерних элементов управления во время разработки, можно добавить код для элемента управления Button для обновления во время выполнения свойства Text элемента управления Label.

Страница, содержащая добавленные элементы управления, должна выглядеть примерно так, как это показано в следующем снимке экрана:

Элемент управления контейнером с дочерними элементами управления
Сохраните эту страницу.

Просмотр страницы во время выполнения

Загрузите страницу в обозреватель.

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

Завершенные элементы управления конструкторами веб-страницы

Следующие действия

В данном пошаговом руководстве продемонстрированы основные задачи, участвующие в создании пользовательского элемента управления, связанного с совмещением или разработкой контейнера элемента управления. Вы создали пользовательские элементы управления с помощью конструктора, которые разрешают изменять размер элемента управления и добавлять текст в области редактирования в режиме конструктора в Visual Studio 2005. Можно изучить следующие моменты:

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

См. также

Основные понятия

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

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