Пошаговое руководство. Создание элементов многократного использования с помощью пользовательских элементов управления ASP.NET

Visual Studio 2010

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

В этом пошаговом руководстве будет создан пользовательский элемент управления ASP.NET, действующий как элемент управления выбора. Элемент управления выбора содержит два списка, в одном из которых (источнике) расположен набор возможных значений. Пользователи могут выбрать элементы в спискеSourceList и затем добавить их в список TargetList.

Это пошаговое руководство содержит следующие три части:

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

  • Во второй части будет создана новая (главная) страница ASP.NET и затем будет добавлен пользовательский элемент управления на страницу ASP.NET.

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

В данном пошаговом руководстве представлены следующие задачи:

  • Использование пользовательского элемента управления и добавление в него элементов управления сервера ASP.NET.

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

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

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

Для выполнения инструкций данного пошагового руководства потребуется следующее.

  • Средства веб-разработки Microsoft Visual Web Developer.

  • Microsoft .NET Framework.

В этом пошаговом руководстве предполагается, что пользователь знаком с методами работы в Visual Web Developer. Общие сведения см. в разделе Пошаговое руководство. Создание базовой веб-страницы в Visual Studio.

Если веб-узел уже создан в Visual Web Developer (например, посредством Пошаговое руководство. Создание базовой веб-страницы в Visual Studio), можно использовать этот веб-узел и перейти к следующему разделу. В противном случае создайте новый веб-сайт и страницу, выполнив следующие действия.

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

Создание веб-сайта на базе файловой системы

  1. Откройте Visual Web Developer.

  2. В меню Файл выберите Создать и затем — Веб-узел.

    Откроется диалоговое окно Новый веб-узел.

  3. В разделе Установленные шаблоны Visual Studio выберите Веб-узел ASP.NET.

  4. В крайнем правом поле Расположение введите имя папки, где следует хранить страницы веб-узла.

    Например, введите имя папки C:\WebSites.

  5. В списке Язык выберите язык программирования, с которым вы предпочитаете работать.

  6. Нажмите кнопку ОК.

    Visual Web Developer создаст папку и новую страницу с именем Default.aspx.

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

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

  1. В обозревателе решений щелкните правой кнопкой мыши имя веб-сайта и выберите команду Добавить новый элемент.

  2. В диалоговом окне Добавить новый элемент <Путь> в разделе Установленные шаблоны Visual Studio выберите Пользовательский веб-элемент управления.

  3. В поле Имя введите ListPicker.

    Файл пользовательского элемента управления получит расширение ascx, которое автоматически добавляется к ListPicker.

  4. В списке Язык выберите язык предпочтительный язык программирования.

  5. Нажмите кнопку Добавить.

    Новый элемент управления будет создан и открыт в конструкторе. Разметка элемента управления выглядит соответственно странице за одним важным исключением: в верхней части страницы отсутствует директива @ Page. Вместо этого, используется директива @ Control, которая определяет файл для ASP.NET как пользовательский элемент управления.

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

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

Добавление серверных элементов управления

  1. Перейдите в представление конструирования. (Если работа выполняется на странице фонового кода, перейдите к элементу управления ListPicker.ascx и затем — в представление конструирования.)

  2. В меню Таблица выберите команду Вставить таблицу.

  3. С помощью диалогового окна Вставка таблицы создайте таблицу с одной строкой и тремя столбцами и затем нажмите кнопку ОК.

    Таблица создается для размещения элементов управления; то есть это — таблица макета.

  4. В таблице в левом столбце введите Доступно и затем нажмите клавишу ВВОД, чтобы создать новую строку.

  5. В правом столбце введите Выбрано и затем нажмите клавишу ВВОД, чтобы создать новую строку.

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

    Элемент управления

    Свойства

    Перетащите ListBox в левый столбец и поместите его в группе Доступно.

    Высота: 200 пкс

    Идентификатор: SourceList

    Ширина: 200 пкс

    Перетащите кнопку Button в средний столбец.

    Идентификатор: AddAll

    Текст: >>

    Перетащите кнопку Button в средний столбец.

    Идентификатор: AddOne

    Текст: (ПРОБЕЛ)>(ПРОБЕЛ)

    Перетащите кнопку Button в средний столбец.

    Идентификатор: Remove

    Текст: (ПРОБЕЛ)X(ПРОБЕЛ)

    Перетащите ListBox в правый столбец и поместите его в группе Выбрано.

    Высота: 200 пкс

    Идентификатор: TargetList

    Ширина: 200 пкс

    Вместо элементов Button можно использовать элементы управления ImageButton, чтобы изображение отображало, что отвечает на щелчок мыши. Однако в данном пошаговом руководстве достаточно использовать текст, чтобы эмулировать тип изображения, которое обычно используется для указания действий "Добавить все", "Добавить" и "Удалить" — как правило, это две стрелки вправо (>>), одна стрелка вправо (>) и знак X, соответственно.

  7. Если нужно, подстройте ширину и высоту столбцом соответственно требованиям.

  8. Выберите список SourceList и затем в "Свойствах" для свойства Items нажмите кнопку с многоточием (…).

    Откроется диалоговое окно Редактор коллекции ListItem.

  9. Нажмите кнопку Добавить три раза, чтобы добавить три элемента.

  10. Для первого, второго и третьего элементов в разделе Свойства ListItem задайте для параметра Текст значения A, B и C, соответственно.

    Теперь создайте тестовые данные. Позже в этом пошаговом руководстве на шаге "Добавление пользовательских свойств и методов к пользовательскому элементу управления" тестовые данные будут удалены и добавлен код для динамической загрузки списка SourceList.

Добавление кода для обработки выбора пользователей

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

Добавление кода для обработки выбора пользователя

  1. В конструкторе дважды нажмите кнопку >> (AddAll), чтобы создать обработчик событий для события Click, и затем добавьте следующий выделенный код.

    Protected Sub AddAll_Click(ByVal sender As Object, _
            ByVal e As EventArgs) Handles AddAll.Click
       TargetList.SelectedIndex = -1
       Dim li As ListItem
       For Each li In SourceList.Items
          AddItem(li)
       Next
    End Sub
    

    protected void AddAll_Click(object sender, EventArgs e)
    {
        TargetList.SelectedIndex = -1;
        foreach(ListItem li in SourceList.Items)
        {
            AddItem(li);
        }
    }
    

    Код выполняет цикл по всем элементам списка в списке SourceList. Для каждого элемента он вызывает метод AddItem и передает его текущему элементу. Позже в данной процедуре будет написан код для метода AddItem.

  2. Перейдите в конструктор, дважды нажмите кнопку > (AddOne), чтобы создать обработчик событий для события Click и затем добавьте следующий выделенный код:

    Protected Sub AddOne_Click(ByVal sender As Object, _
           ByVal e As EventArgs) Handles AddOne.Click
       If SourceList.SelectedIndex >= 0 Then
          AddItem(SourceList.SelectedItem)
       End If
    End Sub
    

    protected void AddOne_Click(object sender, EventArgs e)
    {
        if(SourceList.SelectedIndex >= 0)
        {
            AddItem(SourceList.SelectedItem);
        }
    }
    

    Этот код сначала проверяет, сделан ли выбор в списке SourceList. Если выбор сделан, код вызывает метод AddItem, который будет написан позже в этой процедуре, передавая его текущему выбранному элементу в списке SourceList.

  3. Перейдите в конструктор, дважды нажмите кнопку X (Remove), чтобы создать обработчик событий для события Click, и затем добавьте следующий выделенный код:

    Protected Sub Remove_Click(ByVal sender As Object, _
          ByVal e As EventArgs) Handles Remove.Click
       If TargetList.SelectedIndex >= 0 Then
         TargetList.Items.RemoveAt(TargetList.SelectedIndex)
         TargetList.SelectedIndex = -1
       End If
    End Sub
    

    protected void Remove_Click(object sender, EventArgs e)
    {
        if (TargetList.SelectedIndex >= 0)
        {
            TargetList.Items.RemoveAt(TargetList.SelectedIndex);
            TargetList.SelectedIndex = -1;  
        }
    }
    

    Код сначала проверяет список TargetList, который содержит выбор. Если выбор существует, код удаляет выбранный элемент из списка, а также выбор.

  4. Добавьте следующий метод AddItem:

    Protected Sub AddItem(ByVal li As ListItem)
       TargetList.SelectedIndex = -1
       TargetList.Items.Add(li)
    End Sub
    

    protected void AddItem(ListItem li)
    {
        TargetList.SelectedIndex = -1;
        TargetList.Items.Add(li);
    }
    

    Этот код безусловно добавляет элемент к списку TargetList. Позже в этом пошаговом руководстве на шаге "Добавление пользовательских свойств и методов к пользовательскому элементу управления" этот код будет улучшен добавлением параметра, чтобы определить, имеются ли дублированные элементы.

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

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

Создание главной страницы

  1. В обозревателе решений щелкните правой кнопкой мыши имя веб-сайта и выберите команду Добавить новый элемент.

  2. В разделе Установленные шаблоны Visual Studio выберите Форма Web Forms.

  3. В поле Имя введите HostUserControl.

  4. В списке Язык выберите предпочтительный язык программирования и затем щелкните Добавить.

    В конструкторе откроется новая страница.

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

  1. Перейдите в представление конструирования.

  2. В обозревателе решений перетащите файл пользовательского элемента управления (ListPicker.ascx) на страницу.

    ПримечаниеПримечание

    При перетаскивании ListPicker.ascx на страницу убедитесь, что вы находитесь в режиме конструктора.

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

  3. Перейдите в представление Исходный код.

    Помещение пользовательского элемента управления на страницу создает два новых элемента на странице:

    • В верхней части страницы находится новая директива @ Register, которая выглядит примерно следующим образом:

      <%@ Register Src="ListPicker.ascx" TagName="ListPicker"
         TagPrefix="uc1" %> 
      

      Директива @ Register является обязательной, так как пользовательский элемент управления является внешним компонентом. Значение директивы предоставляет сведения, необходимые ASP.NET для поиска элемента управления при компиляции и запуске страницы. Также атрибуты TagPrefix и TagName указывают, как пользовательский элемент управления объявлен на странице. Атрибут Src указывает файл, и если требуется — путь, по которому расположен исходный файл.

    • Второй новый элемент является элементом для пользовательского элемента управления и выглядит примерно следующим образом:

      <uc1:ListPicker id="ListPicker1" Runat="server" />
      

      Элемент для пользовательского элемента управления выглядит так же, как элемент для исходного серверного элемента управления ASP.NET. Разница в том, что пользовательский элемент управления имеет другой префикс тега (uc1) и уникальное имя тега (ListPicker). Хотя значения устанавливаются автоматически директивой @ Registerпри помещении пользовательского элемента управления на страницу, для него можно использовать любой префикс тега и имя тега, а также значения, которые уже не используются на странице.

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

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

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

  1. Нажмите клавиши CTRL+F5 для запуска страницы.

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

  2. Нажмите кнопку >> (AddAll).

    Все значения списка SourceList копируются в список TargetList.

  3. Щелкните по очереди каждый элемент списка TargetList и затем нажмите кнопку X (Удалить), чтобы удалить все элементы.

  4. Выберите одно значение в списке SourceList и затем нажмите кнопку > (AddOne).

    Значение скопируется в список TargetList.

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

  6. По окончании, закройте обозреватель.

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

  • Указать список элементов для динамического отображения в списке SourceList.

  • Возрастить список элементов, которые пользователь выбрал в списке TargetList.

  • Указать, нужно ли разрешить дублировать значения в списке TargetList (дополнительно).

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

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

Добавьте два свойства к элементу управления. Первое свойство извлекает список элементов, которые находятся в списке TargetList. Второе свойство позволяет указать, допускает ли список TargetList повторяющиеся значения. Далее в этом разделе добавьте метод, который позволяет заполнить список SourceList.

Добавление кода для определения пользовательских свойств

  1. Для элемента управления ListPicker откройте или перейдите к файлу кода.

  2. Используйте следующий код для создания свойства SelectedItems.

    Public ReadOnly Property SelectedItems() As ListItemCollection
       Get
          Return TargetList.Items
       End Get
    End Property
    

    public ListItemCollection SelectedItems
    {
       get { return TargetList.Items ; }
    }
    

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

  3. Используйте следующий код для создания свойства AllowDuplicates.

    Public Property AllowDuplicates() As Boolean
       Get
          Return CType(ViewState("allowDuplicates"), Boolean)
       End Get
       Set(ByVal value As Boolean)
          ViewState("allowDuplicates") = value
       End Set
    End Property
    

    public Boolean AllowDuplicates
    {
        get
        {
            return (Boolean)ViewState["allowDuplicates"];
        }
        set
        {
            ViewState["allowDuplicates"] = value;
        }
    }
    
    

    Свойство AllowDuplicates доступно для чтения и записи. Значение свойства AllowDuplicates требуется явно сохранить в состоянии представления, чтобы оно сохранялось между циклами обработки. (Свойство SelectedItems не требуется явно сохранять в состоянии представления, так как в состоянии представления сохраняет значения список TargetList.)

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

Изменение существующего кода для использования свойства AllowDuplicates

  • Обратитесь к методу AddItem, написанному ранее на шаге "Добавление кода для обработки выбора пользователя" ранее в этом пошаговом руководстве, и замените содержимое следующим выделенным кодом:

    Protected Sub AddItem(ByVal li As ListItem)
       TargetList.Selectedindex = -1
       If Me.AllowDuplicates = True Then
          TargetList.Items.Add(li)
       Else
          If TargetList.Items.FindByText(li.Text) Is Nothing Then
             TargetList.Items.Add(li)
          End If
       End If
    End Sub
    

    protected void AddItem(ListItem li)
    {
        TargetList.SelectedIndex = -1;
        if (this.AllowDuplicates == true)
        {
            TargetList.Items.Add(li);
        }
        else
        {
            if (TargetList.Items.FindByText(li.Text) == null)
            {
                TargetList.Items.Add(li);
            }
        }
    }
    

    Код выполняет ту же функцию, что и прежде (добавление элемента к списку TargetList), но теперь выполняет проверку, чтобы определить, установлено ли для свойства AllowDuplicate значение true. Если свойство AllowDuplicate имеет значение true, то элемент добавляется. Если для свойства AllowDuplicate установлено значение false, то код сначала ищет существующий элемент с тем же значением, и если существующий элемент не найден, то добавляется новый элемент.

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

Удаление тестовых данных списка SourceList

  1. Перейдите в представление конструирования.

  2. Щелкните элемент управления SourceList и затем в свойствах для меню Элементы нажмите кнопку с многоточием (…).

    Откроется окно Редактор коллекции ListItem.

  3. Нажмите кнопку Удалить, чтобы удалить все элементы примера, и затем нажмите кнопку ОК.

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

Также можно добавить методы для выполнения задач в пользовательском элементе управления, когда методы вызываются кодом в главной странице. Чтобы показать это в данном пошаговом руководстве, добавьте два метода. Первый метод может быть вызван для добавления элементов к списку SourceList. Второй метод удаляет содержимое списка TargetList.

Добавление метода для удаления списка TargetList

  1. Используйте следующий код для добавления метода AddSourceItem.

    Public Sub AddSourceItem(ByVal sourceItem As String)
        SourceList.Items.Add(sourceItem)
    End Sub
    

    public void AddSourceItem(String sourceItem)
    {
        SourceList.Items.Add(sourceItem);
    }
    
  2. Используйте следующий код для добавления метода ClearAll.

    Public Sub ClearAll()
        SourceList.Items.Clear()
        TargetList.Items.Clear()
    End Sub
    

    public void ClearAll()
    {
        SourceList.Items.Clear();
        TargetList.Items.Clear();
    }
    
  3. В меню Файл выберите Сохранить все, чтобы сохранить изменения, внесенные в пользовательский элемент управления.

Окончательной задачей в этом пошаговом руководстве является расширение возможностей главной страницы до общего использования значений с пользовательским элементом управления. Некоторые свойства для пользовательского элемента управления можно задать декларативно. (В этом пошаговом руководстве невозможно установить список SourceList непосредственно с помощью кода, но его можно установить программным способом.) В данной процедуре установите для свойства AllowDuplicates значение по умолчанию true.

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

  1. Перейдите на страницу HostUserControl.aspx или откройте ее.

  2. В режиме исходного текста декларативно задайте AllowDuplicates с помощью синтаксиса, как в следующем примере:

    <uc1:ListPicker id="ListPicker1" Runat="server"
        AllowDuplicates="true" />
    

    Обратите внимание, что для AllowDuplicates стали доступны функциональные возможности Microsoft IntelliSense.

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

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

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

  1. Перейдите в представление конструирования.

  2. Из группы Стандартные в панели элементов перетащите следующие элементы в таблицу на главной странице и затем установите свойства, как указано ниже.

    Элемент управления

    Свойства

    TextBox

    Идентификатор: NewItem

    Текст: (пусто)

    Button

    Идентификатор: AddItem

    Текст: добавить элемент

    Button

    Идентификатор: LoadFiles

    Текст: список файлов

    Button

    Идентификатор: ClearSelection

    Текст: очистить все

    CheckBox

    AutoPostBack: True

    Проверено: True

    Идентификатор: AllowDuplicates

    Текст: разрешить повторы

    Button

    Идентификатор: ShowSelection

    Текст: показать выбор

    Label

    Идентификатор: Selection

    Текст: (пусто)

  3. В режиме конструктора дважды щелкните AllowDuplicates, чтобы создать обработчик событий для события CheckedChanged, и затем добавьте следующий выделенный код:

    Protected Sub AllowDuplicates_CheckedChanged( _
    ByVal sender As Object, _
    ByVal e As EventArgs) Handles AllowDuplicates.CheckedChanged
        ListPicker1.AllowDuplicates = AllowDuplicates.Checked
    End Sub
    

    protected void AllowDuplicates_CheckedChanged(Object sender, EventArgs e)
    {
        ListPicker1.AllowDuplicates = AllowDuplicates.Checked;
    }
    
  4. Перейдите в конструктор, дважды щелкните AddItem, чтобы создать обработчик событий для события Click, и затем добавьте следующий выделенный код:

    Protected Sub AddItem_Click(ByVal sender As Object, _
    ByVal e As EventArgs) Handles AddItem.Click
        Dim sourceItem As String = Server.HtmlEncode(NewItem.Text)
        ListPicker1.AddSourceItem(sourceItem)
    End Sub
    

    protected void AddItem_Click(object sender, EventArgs e)
    {
        ListPicker1.AddSourceItem(Server.HtmlEncode(NewItem.Text));
    }
    

    Код создаст коллекцию ListItemCollection в коде и заполнит ее данными примера. Затем код присваивает значение SourceItems коллекции.

  5. Перейдите в конструктор, дважды щелкните LoadFiles, чтобы создать обработчик событий для события Click, и затем добавьте следующий выделенный код.

    Protected Sub LoadFiles_Click(ByVal sender As Object, _
    ByVal e As EventArgs) Handles LoadFiles.Click
       Dim path As String = Server.MapPath(Request.ApplicationPath)
       Dim files() As String = System.IO.Directory.GetFiles(path)
       Dim filename As String
       For Each filename in Files
          ListPicker1.AddSourceItem(filename)
       Next
    End Sub
    

    protected void LoadFiles_Click(object sender, EventArgs e)
    {
       String path = Server.MapPath(Request.ApplicationPath);
       String[] files = System.IO.Directory.GetFiles(path);
       foreach(String filename in files)
       {
          ListPicker1.AddSourceItem(filename);
       }
    }
    

    Этот тот же код, что и для AddItem, за исключением того, что он добавляет список полей в корневой каталог веб-узла.

  6. Перейдите в конструктор, дважды щелкните ShowSelection, чтобы создать обработчик событий для события Click, и затем добавьте следующий выделенный код:

    Protected Sub ShowSelection_Click(ByVal sender As Object, _
          ByVal e As EventArgs) Handles ShowSelection.Click
       Dim lItem As ListItem
       Dim selectedItemsString As String = ""
       For Each lItem in ListPicker1.SelectedItems
          selectedItemsString &= "<br>" & lItem.Text
       Next
       Selection.Text = selectedItemsString
    End Sub
    

    protected void ShowSelection_Click(object sender, EventArgs e)
    {
       String selectedItemsString = "";
       foreach(ListItem lItem in ListPicker1.SelectedItems)
       {
          selectedItemsString += "<br>" + lItem.Text;
       }
       Selection.Text = selectedItemsString;
    }
    
    

    Этот код извлекает объект, который типизирован как объект ListItemCollection, считывает каждый элемент в коллекции и затем отображает результаты в элементе Selection.

  7. Перейдите в конструктор, дважды щелкните ClearSelection, чтобы создать обработчик событий для события Click, и затем добавьте следующий выделенный код:

    Protected Sub ClearSelection_Click(ByVal sender As Object, _
    ByVal e As EventArgs) Handles ClearSelection.Click
       ListPicker1.ClearAll()
    End Sub
    

    protected void ClearSelection_Click(object sender, EventArgs e)
    {
       ListPicker1.ClearAll();
    }
    

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

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

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

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

  1. Нажмите клавиши CTRL+F5 для запуска страницы.

  2. Введите значение в текстовом поле и выберите Добавить элемент.

  3. Повторите шаг 2 несколько раз, пока не будут выбраны элементы в пользовательском элементе управления.

  4. Используйте кнопки для выбора одного или нескольких исходных элементов в списке SourceList и затем добавьте элемент к списку TargetList.

  5. Щелкните Показать выбор.

    В элементе Selection будут отображены элементы списка TargetList.

  6. Щелкните Очистить все.

  7. Щелкните Список файлов.

    Список SourceList теперь отобразит список имен файлов.

  8. В элементе управления выберите Добавить, чтобы добавить несколько элементов к списку TargetList.

  9. Попробуйте добавить к списку TargetList элемент, который уже имеется в списке.

    Будет добавлен повтор значения.

  10. Очистите поле Разрешить повторы и затем снова попробуйте добавить повторы значений.

    Теперь повторы на добавляются к списку TargetList.

  11. Щелкните Показать выбор.

    На главной странице откроется список элементов в списке TargetList.

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

  • Свойства внешнего вида.

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

    ПримечаниеПримечание

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

  • Свойства данных.

    Можно добавлять свойства, которые поддерживает элемент управления, чтобы использовать более широкий выбор вариантов данных в списке SourceList. Например, можно добавить свойства для установки набора данных, таблицы данных и отображения поля данных.

  • Функциональные возможности.

    К пользовательскому элементу управления можно добавить кнопки и код, чтобы разрешить пользователям не только копировать элементы из списка SourceList в список TargetList, но также удалять элементы — элемент удаляется из списка SourceList, если перемещается в список TargetList. Затем можно использовать кнопки элемента управления, с помощью которых можно обратно перемещать данные из списка TargetList в список SourceList.

Показ: