Часть 2-5.Создание и использование пользовательских элементов управления
Описание работы:
В этой лабораторной работе будет создан пользовательский элемент управления ASP.NET, действующий как элемент управления выбора. Элемент управления выбора содержит два списка, в одном из которых (источнике) расположен набор возможных значений. Пользователи могут выбрать элементы в спискеSourceList и затем добавить их в список TargetList.
Ход выполнения лабораторной работы Упражнение 1 - Создание веб-узла
Упражнение 2. Создание пользовательского элемента управления
Пользовательский элемент управления создается так же, как веб-страница ASP.NET. На
самом деле, пользовательский элемент управления является, практически, поднабором
страницы ASP.NET и может включать большинство типов элементов, размещенный на
странице ASP.NET.
Добавим новый элемент «Пользовательский веб-элемент управления»
Перейдем в конструктор. Добавим таблицу, которая имеет одну строку и 3 столбца
В левом столбце введем «Доступно», а в правом «Выбрано»
Добавим в таблицу следующие элементы управления, предварительно задав их свойствами:
Рис. 1. Таблица элементов
Выберите список SourceList и затем в "Свойствах" для свойства Items нажмите кнопку с многоточием (…).Для первого, второго и третьего элементов в разделе Свойства ListItem задайте для параметра Текст значения A, B и C, соответственно.
В конструкторе дважды нажмите кнопку >> (AddAll), чтобы создать обработчик
событий для события Click, и затем добавьте следующий выделенный код:
protected void AddAll_Click(object sender, EventArgs e)
{ TargetList.SelectedIndex = -1;
foreach(ListItem li in SourceList.Items) {
AddItem(li); } }
Аналогичные действия проводим для AddOne и Remove. Добавляем код соответственно:
protected void AddOne_Click(object sender, EventArgs e)
{ if(SourceList.SelectedIndex >= 0) {
AddItem(SourceList.SelectedItem); } }
protected void Remove_Click(object sender, EventArgs e) {
if (TargetList.SelectedIndex >= 0) {
TargetList.Items.RemoveAt(TargetList.SelectedIndex);
TargetList.SelectedIndex = -1; } }
Добавим следующий метод AddItem:
protected void AddItem(ListItem li) {
TargetList.SelectedIndex = -1;
TargetList.Items.Add(li);
Упражнение 3 - Использование пользовательского элемента управления
Добавим новый элемент Форма Web Forms
Перейдем в конструктор. В обозревателе решений перетащим файл пользовательского элемента управления (ListPicker.ascx) на страницу.
Протестируем работу программы:
Рис. 2. Промежуточный результат
Упражнение 4. Добавление пользовательских свойств и методов к пользовательскому элементу управления
Созданный пользовательский элемент теперь работает, но еще не имеет обычных
полезных функций элемента управления.Более практическая версия пользовательского элемента управления позволила бы выполнять следующие задачи:
Указать список элементов для динамического отображения в списке SourceList.
Возрастить список элементов, которые пользователь выбрал в списке TargetList.
Указать, нужно ли разрешить дублировать значения в списке TargetList
(дополнительно).
Предоставить пользователям возможность для быстрого удаления элементов в списке TargetList.
Удаление тестовых данных списка SourceList
Для элемента управления ListPicker откроем или перейдем к файлу кода.
Используем следующий код для создания свойства SelectedItems:
public ListItemCollection SelectedItems {
get { return TargetList.Items ; } }
Используем следующий код для создания свойства AllowDuplicates:
public Boolean AllowDuplicates
{ get {
return (Boolean)ViewState["allowDuplicates"]; }
set {
ViewState["allowDuplicates"] = value; } }
Обратитесь к методу AddItem, заменим его код на:
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); } } }
Перейдем в конструктор. Нажмем на элемент управления SourceList и затем в свойствах для меню Элементы нажмем кнопку с многоточием (…). Удали все элементы.
Используем следующий код для добавления метода AddSourceItem:
public void AddSourceItem(String sourceItem) {
SourceList.Items.Add(sourceItem);}
Используем следующий код для добавления метода ClearAll:
public void ClearAll() {
SourceList.Items.Clear();
TargetList.Items.Clear(); }