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

Visual Studio 2010

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

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

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

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

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

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

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

  • Ссылаться на пользовательские элементы управления (и их связанные конструкторы) на веб-странице.

  • Работать с веб-страницей в режиме конструктора в Visual Studio 2005.

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

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

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

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

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

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

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

    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 
    {
    }
    
    
    
  3. Сохраните файл.

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

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

  1. В пространстве имен, объявленном в файле SimpleControlDesigners, создайте глобальное объявление для класса составного элемента управления, наследуемого от CompositeControl, как показано в следующем примере.

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

    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;
        }
    }
    
    
    
    
  3. Создайте метод добавления дочерних элементов составного элемента управления. Следующий метод добавляет два текстовых поля и разрыв строки, которые будут видны на веб-странице:

    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();
    }
    
    
    
  4. Создайте простой класс составного элемента управления конструктора, производный от CompositeControlDesigner, чтобы связать составное управление только что созданным.

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

    public class SimpleCompositeControlDesigner : CompositeControlDesigner
    {
        // Set this property to prevent the designer from being resized.
        public override bool AllowResize 
        {
            get { return false; }
        }
    }
    
    
    
  5. Немедленно выше объявления класса для составного элемента управления добавьте атрибут Designer метаданных, который связывает элемент управления с созданным конструктором класса, как показано в следующем примере:

    [Designer(typeof(SimpleCompositeControlDesigner))]
    public class SimpleCompositeControl : CompositeControl
    
    
    
  6. Сохраните файл.

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

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

  1. В пространстве имен, объявленном в файле SimpleControlDesigners, создайте глобальное объявление для нового класса составного элемента управления, наследующего от элемента управления SimpleCompositeControl, созданного ранее. В следующем примере показаны новые объявления.

    	public class SimpleCompositeControl2 : SimpleCompositeControl
    	{
    	}
    
    
    
  2. Свяжите этот элемент управления с базовым классом CompositeControlDesigner.

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

    [Designer(typeof(CompositeControlDesigner))]
    public class SimpleCompositeControl2 : SimpleCompositeControl
    {
    }
    
    
    
  3. Сохраните файл.

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

12yydcke.alert_note(ru-ru,VS.100).gifПримечание.

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

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

  1. В пространстве имен, объявленных в файле SimpleControlDesigners, создайте открытое объявление для нового веб-сервера управления класса, как показано в следующем примере кода:

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

    12yydcke.alert_note(ru-ru,VS.100).gifПримечание.

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

    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;
            }
        }
    }
    
    
    
  3. Связь конструктора с элементами управления. Непосредственно над объявлением класса для серверного веб-элемент управления добавьте атрибут метаданных Designer. Обратите внимание, что в данном случае, как показано в следующем примере, также добавляется атрибут ParseChildren с параметром false. Эта инструкция предписывает разборщику во время разработки рассматривать внутреннее содержимое элемента управления как дочерний элемент управления, а не как свойства. В этом случае нужно считать дочерний элемент управления таким образом, чтобы это позволило фактически перетащить другие серверные элементы управления в изменяемую область во время разработки и изменить их свойства, а также внутреннее содержимое этого элемента управления.

    [Designer (typeof(SimpleContainerControlDesigner))]
    [ParseChildren (false)]
    public class SimpleContainerControl : WebControl, INamingContainer
    {
    }
    
    
    
  4. Сохраните файл.

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

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

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

    12yydcke.alert_note(ru-ru,VS.100).gifПримечание.

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

  2. Скомпилируйте элементы управления в файле 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
    
  3. Переместите полученный файл сборки в папку \Bin веб-узла для страницы, где будет размещаться элемент управления.

    12yydcke.alert_note(ru-ru,VS.100).gifПримечание.

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

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

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

  1. При помощи веб-сайта, открытого на Visual Studio 2005, создайте новую страницу, вызываемую ControlDesigners.aspx. Наверху страницы, сразу под объявлением страницы, добавьте директиву Register, чтобы сослаться на сборку и элементы управления, созданные ранее, как показано в следующем примере.

    <%@ Page Language="C#" %>
    <%@ register tagprefix="aspSample" 
      assembly="SimpleControlDesignersCS" 
      namespace="Samples.AspNet.CS.Controls" %>
    
    
    
  2. Выполните остальную часть страницы как показано в следующем примере кода, чтобы сделать ссылки для каждого из трех элементов управления, созданного ранее: 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>
    
    
    
  3. Сохраните эту страницу.

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

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

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

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

    Страница ControlDesigners.aspx в режиме разработки
    График VS ControlDesigners.aspx в просмотре конструктора
  2. Щелкните в области содержимого элемента управления контейнером и введите некоторое текстовое содержимое элемента управления.

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

  4. Переключитесь в представление дизайнера.

  5. Щелкните фрейм элемента управления, поместите указатель мыши над одним из значков изменения размеров и измените размер элемента управления контейнер.

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

  7. Перетащите элемент управления Button из Панели элементов и поместите его в изменяемую область под введенный текст. Перетащите элемент управления Label из Панели элементов и поместите его рядом с кнопкой. Это демонстрирует, что можно перетаскивать дочерние элементы управления в изменяемую область. Если требуется, чтобы можно было задать свойства для дочерних элементов управления во время разработки, можно добавить код для элемента управления Button для обновления во время выполнения свойства Text элемента управления Label.

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

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

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

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

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

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

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

Показ: