Пример конструктора элементов управления со списками действий и службами

Visual Studio 2010

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

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

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

  • Создание конструкторов, использующих службы среды разработки и списки действий.

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

  • Компиляция элементов управления и связанных с ними конструкторов в одну сборку.

  • Обращение к элементам управления на веб-странице.

  • Работа с конструкторами элементов управления в представлении «Конструктор» Visual Studio 2005.

В данном разделе код конструкторов представлен на двух языках — Visual Basic и C#. В примере показаны конструкторы пользовательских элементов управления, использующие службы среды разработки и списки действий. Код примера приведен в разделе Практическое руководство. Использование служб и списков действий с конструкторами элементов управления. В примере имеются четыре пользовательских элемента управления, все они просты и созданы только для того, чтобы проиллюстрировать использование конструкторов. Три из них являются производными от класса Panel, а четвертый — это пользовательский элемент управления Button. Каждый из элементов управления панели в исходном коде также имеет соответствующий конструктор пользовательского элемента управления. Эти конструкторы используют службы, что позволяет элементу управления взаимодействовать со средой разработки, например Visual Studio 2005. В визуальной среде разработки (в Visual Studio 2005 — в режиме конструктора) эти конструкторы предоставляют код, который позволяет создавать меню времени разработки, решающим различные задачи по настройке элементов управления.

Примеры Visual Basic и C# имеют одинаковую функциональность, поэтому можно выбрать тот, который использует наиболее предпочтительный язык программирования.

Скомпилируйте пример на выбранном языке как библиотеку и поместите полученную сборку в каталог Bin веб-приложения.

Компиляция примера из командной строки:

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

После компиляции примера не забудьте скопировать полученный файл DesignerServicesAndListsVB.dll или DesignerServicesAndListsCS.dll в папку Bin веб-узла.

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

XML-файлы примера находятся в той же папке, что и веб-страницы, на которой будут размещаться элементы управления ASP.NET. Содержимое файлов RedStyle.xml, BlueStyle.xml и GreenStyle.xml показано ниже:

RedStyle.xml

<?xml version="1.0" encoding="utf-8" ?>
<styles>
    <style name="BackColor" value="red"></style>
    <style name="ForeColor" value="white"></style>
</styles>

BlueStyle.xml

<?xml version="1.0" encoding="utf-8" ?>
<styles>
    <style name="BackColor" value="blue"></style>
    <style name="ForeColor" value="white"></style>
</styles>

GreenStyle.xml

<?xml version="1.0" encoding="utf-8" ?>
<styles>
    <style name="BackColor" value="green"></style>
    <style name="ForeColor" value="white"></style>
</styles>

Для работы с примерами элементов управления и конструкторами необходимо разместить элементы управления на веб-странице ASP.NET, воспользовавшись, например, конструктором Visual Studio 2005. В Visual Studio 2005 необходимо добавить одну страницу ASP.NET к веб-узлу. Сначала создайте новую веб-страницу. Затем в представлении «Исходный код» удалите содержимое страницы по умолчанию и добавьте директивы Page и Register, как показано в следующем фрагменте:

<%@ page language="C#" %>
<%@ register tagprefix="aspSample" 
    assembly="DesignerServicesAndListsCS" 
    namespace="Samples.AspNet.CS.Controls" %>
d0etxzd8.alert_note(ru-ru,VS.100).gifПримечание.

Единственное отличие между директивами для Visual Basic и C# — это атрибут языка в директиве Page и расширение имени сборки в директиве Register.

Также скопируйте следующий код разметки после директивы Register. (Этот код одинаков для Visual Basic и C#.)

<!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 id="Head1" runat="server">
    <title>Designer Samples</title>
</head>
<body>
  <form id="form1" runat="server">
      <p style="font-family:tahoma;font-size:larger;
      font-weight:bold">
        Using Action Lists and Designer Host Services</p>
      <div style="font-family:tahoma;font-size:x-small">
        <span style="font-size: 10pt">Control #1 (ControlWithStyleTasksDesigner):
        PanelContainerDesigner using a DesignerActionList, which
        obtains a list of XML files in the project and sets 
        the style using the XML element
        definitions.</span><p />
      </div>
      <aspSample:ControlWithStyleTasks id="ctl1" 
        runat="server" 
        backcolor="Red" forecolor="White">
          Hello there.</aspSample:ControlWithStyleTasks>
      <br />
      <div style="font-family:tahoma;font-size:x-small">
        <span style="font-size: 10pt">Control #2 (ControlWithConfigurationSettingDesigner):
        PanelContainerDesigner using configuration settings
        to obtain 
        the FrameCaption value.</span><p />
      </div>
      <aspSample:ControlWithConfigurationSetting 
        id="ctl2" runat="server">
        Hello There
      </aspSample:ControlWithConfigurationSetting>
      <br />
      <div style="font-family:tahoma;font-size:x-small">
        <span style="font-size: 10pt">Control #3 (ControlWithButtonTasksDesigner):
        PanelContainerDesigner using a smart-task action 
        item to insert a new button on the Web Forms page.</span><p />
      </div>
      <aspSample:ControlWithButtonTasks 
        id="ctl3" runat="server">
        Hello There
      </aspSample:ControlWithButtonTasks>
      &nbsp; &nbsp;
  </form>
</body>
</html>

Один из конструкторов в этом примере использует запись файла конфигурации для динамического отображения заголовка в представлении «Конструктор» на одном из пользовательских элементов управления. Откройте файл Web.config веб-узла или создайте его, если он не существует, и добавьте следующий раздел в элемент <appSettings>:

<appSettings>
  <add key="ContainerControlTitle" value="Title from Config File"/>
</appSettings>

После добавления скомпилированной сборки (DLL-файл) в папку Bin веб-узла, добавления XML-файлов, страницы с пользовательскими элементами управления на ней и создания записи в файле Web.config, можно приступать к работе с элементами управления в конструкторе. Откройте страницу в представлении конструктора в Visual Studio 2005. Обратите внимание, что на странице расположены три элемента управления панели. Если щелкнуть элемент управления, будет выделена область редактирования.

Проверка служб конструктора и списков действий

Чтобы проверить конструктор первого элемента управления, установите указатель мыши на правый верхний угол элемента управления и затем щелкните список действий. На следующем снимке экрана показан элемент управления с открытым списком действий.

Элемент управления со списком действий
Конструктор VS для элемента управления PanelContainer

В текстовое поле Configure Xml в списке действий можно выбрать один из созданных ранее XML-файлов. Выбор одного из XML-файлов приведет к обновлению стиля времени разработки элемента управления данными стиля из XML-файла. Попробуйте использовать имена других XML-файлов.

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

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

Команда Add a Button добавляет элемент управления Button в представление времени разработки. Команда Add a custom button добавляет экземпляр пользовательского элемента управления кнопки на страницу.

Проверка служб конструктора и редактируемых областей

Второй элемент управления отображает надпись Title Added From Config. Конструктор элемента управления использует службы конструктора среды для извлечения этого параметра из файла Web.config и добавления его в представление режима разработки.

Этот элемент управления также представляет область редактирования в элементе управления. Щелкните область редактирования для ввода нового содержимого. Содержимое сохраняется в исходном коде страницы.

Показ: