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

Применение пользовательских элементов управления в ASP.NET 2.0

Задание:

1) Создайте приложение  ASP.NET на основе шаблона ASP.NET Web Site в каталоге C:\Labs\UserWebControl.

Создайте в этом приложении Web-форму, аналогичную представленной на рис. 8-1а. На эту форму поместите один элемент управления Label с начальным значением "Неизвестно" и ниже - кнопку с надписью "Чайник или не чайник?"

2) Создайте пользовательский элемент управления с единственным флажком "Я чайник" и поместите этот элемент управления в нижнюю часть Web-формы.

3) Реализуйте в вашем приложении (пользовательском элементе управления и Web-форме код), который бы при нажатии на кнопку получал из пользовательского элемента управления информацию о том, установлен флажок или нет. Если флажок установлен, то при помощи элемента управления Label на главной форме должна выводиться надпись "Это чайник", если нет - "Это не чайник" (см. рис. 8-1б)

Рис. 8-1а

Рис. 8-1б

Решение:

К пункту 1 - создание Web-приложения и главной формы:

1. Создайте в Visual Studio.NET 2005 новый проект на основе шаблона ASP.NET Web Site. При создании в поле Location введите C:\Labs\UserWebControl. После создания приложения форма Default.aspx откроется в окне дизайнера автоматически.

2. Поместите на эту форму из ToolBox элемент управления Label в верхнюю часть формы. Значение свойства (ID) для этого элемента управления должно быть Label1. Значение свойства Text для него установите в "Неизвестно".

3. Под элементом управления Label разместите элемент управления Button. Значение свойства (ID) для него должно быть Button1. Свойству Text присвойте значение " Чайник или не чайник?".

4. Нажмите на кнопку F5 и убедитесь, что форма выглядит так, как вы задумывали. Закройте окно Internet Explorer.

К пункту 2 - создание пользовательского элемента управления и применение его на главной форме:

1. В окне Solution Explorer щелкните правой кнопкой мыши по строке проекта UserWebControl и в контекстном меню выберите Add -> Add New Item. В открывшемся окне Add New Item выделите шаблон Web User Control, убедитесь, что в поле Name стоит WebUserControl1.ascx и нажмите на кнопку Open. В список элементов проекта в Solution Explorer будет добавлен файл WebUserControl.ascx и он будет открыт в окне дизайнера форм.

2. Перетащите из окна Toolbox на страницу WebUserControl.ascx элемент управления CheckBox. Для его свойства (ID) должно стоять значение CheckBox1, а для свойства Text введите значение "Я чайник". Сохраните созданный элемент управления.

3. В окне дизайнера перейдите на вкладку для главной формы (WebForm1.aspx) и из контейнера Toolbox перетащите в нижнюю часть формы элемент управления Panel.

4. Внутрь элемента управления Panel перетащите из окна Solution Explorer созданный вами файл пользовательского элемента управления WebUserControl.ascx.

5. Нажмите на кнопку F5, чтобы убедиться, что пользовательский элемент управления правильно отображается на вашей форме. Закройте окно Internet Exporer.

К пункту 3 - обеспечение взаимодействия между пользовательским элементом управления и главной формой:

1. В окне Solution Explorer щелкните правой кнопкой мыши по объекту WebUserControl.ascx и в контекстном меню выберите View Code. Откроется страница WebUserControl.ascx.vb с программным кодом для пользовательского элемента управления.

2. Впишите перед строкой End Class следующий код:

Public ReadOnly Property pTeapot() As Boolean

        Get

            Return CheckBox1.Checked

        End Get

End Property

3. Откройте в окне дизайнера форм форму Default.aspx и перейдите на вкладку Source. Непосредственно под тегом Page должен находиться тег

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

а в списке элементов управления формы - тег

            <uc1:WebUserControl ID="WebUserControl1" runat="server" />

Обратите внимание, что для значения атрибута ID автоматически добавляется 1, поэтому имя объекта вашего пользовательского элемента управления должно быть WebUserControl1 (а не WebUserControl).

3. В окне Solution Explorer щелкните правой кнопкой мыши уже по строке Default.aspx и в контекстном меню для него выберите View Code. В списке объектов в верхнем левом углу редактора кода выберите объект Button1, а в списке событий - событие Click. Будет сгенерирована событийная процедура Button1_Click(). Добавьте для нее следующий код:

        If WebUserControl1.pTeapot = True Then

            Label1.Text = "Это чайник"

        Else

            Label1.Text = "Это не чайник"

        End If

Нажмите на кнопку F5 и убедитесь, что ваше приложение работает, как планировалось.

Получить учебные материалы по этому курсу