Простой элемент управления пользователя / C# для профессионалов. Том II / Библиотека (книги, учебники и журналы) / В помощь Веб-Мастеру

В VS.NET создадим новое приложение Web с именем PCSUserCWebAppl, открывая VS.NET, щелкнув на Getting Started, и выбирая затем New Project, щелкнув на пиктограмме Web Application. Должно открыться диалоговое окно, позволяющее сохранить этот проект.

Когда будут созданы стандартные файлы, выберем пункт меню Project|Add New Item… и добавим Web User Control с именем PCSUserC1.ascx, как показано ниже:

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

Файлы .ascx можно просматривать в виде кода HTML или в окне построителя, как и файлы .aspx. Просмотр файла в виде кода HTML открывает важное различие: в элементе <body> отсутствует элемент <form>. Это связано с тем, что элементы управления пользователя будут вставляться внутрь форм ASP.NET в других файлах, и поэтому не нуждаются в собственном теге формы.

Просмотр созданных шаблонных файлов открывает еще одно важное отличие: созданный класс наследует из класса System.Web.UI.UserControl. Это также связано с тем, что элемент управления будет использоваться внутри формы.

Наш простой элемент управления будет выводить графическое изображение, соответствующее одной из четырех стандартных мастей колоды карт (трефы, бубны, черви, пики). Требуемые для этого графические изображения поставляются как часть Visual Studio; их можно найти в C:Program FilesMicrosoft Visual Studio.NETCommon7Graphicsbitmapsassorted с именами файлов CLUB.BMP, DIAMOND.BMP, HEART.BMP и SPADE.BMP. Скопируйте их в каталог проекта, чтобы ими можно было воспользоваться.

Добавим некоторый код к новому элементу управления. В файл PCSUserC1.ascx, представленный в виде кода HTML, добавим следующие строки:

<HTML> <HEAD> </HEAD> <BODY> <TABLE CellSpacing=4> <TR vAlign=middle> <TD> <asp:Image Runat="server" ImageURL="club.bmp " /> </TD> <TD height=20> <asp:Label Runat="server">Club</asp:Label> </TD> </TR> </TABLE> </BODY> </HTML>

Этот код определяет состояние по умолчанию элемента управления, которое будет изображением трефы с меткой. Прежде чем добавлять дополнительную функциональность, протестируем такое поведение по умолчанию, добавляя этот элемент управления в проект Web-страницы WebForm1.aspx.

Чтобы использовать специальный элемент управления в файле .aspx, сначала необходимо определить, как мы будем на него ссылаться, то есть, имя тега, который будет представлять элемент управления в коде HTML. Чтобы сделать это, используется директива <%@ Register %> в верхней части кода следующим образом:

<%@ Register TagPrefix="PCS" TagName="UserC1" Src="PCSUserC1.ascx" %>

Здесь используются атрибут Src для указания на файл, содержащий элемент управления пользователя, и атрибуты TagPrefix и TagName для определения имени тега для использования (в форме TagPrefix: TagName). Теперь мы можем использовать этот элемент управления, добавляя следующий элемент:

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="PCSUserCWebApp1.WebForm1" %> <%@ Register TagPrefix="PCS" TagName="UserC1" Src= "PCSUserC1.ascx" %> <HTML> <HEAD> <meta name=vs_targetSchema content="Internet Explorer 5.0"> <meta name="GENERATOR" Content="Microsoft Visual Studio 7.0"> <meta name="CODE_LANGUAGE" Content="C#" > </HEAD> <BODY MS_POSITIONING="GridLayout"> <form method="post" runat="server"> <PCS:UserC1 Runat="server" /> </form> </BODY> </HTML>

Элементы управления пользователя могут не объявляться по умолчанию в базовом коде формы, поэтому может понадобиться добавить следующее объявление в WebForm1.aspx.cs:

public class WebForm1 : System.Web.UI.Page { protected PCSUserC1 myUserControl; ...

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

club

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

Чтобы получить управление над выводимой мастью, можно использовать атрибут элемента <PCS: UserC1>. Атрибуты элементов для элементов управления пользователя автоматически отображаются в свойства элементов управления пользователя, поэтому для того, чтобы это заработало, необходимо только добавить свойство в код элемента управления PCSUserC1.ascx.cs. Назовем это свойство Suit и позволим ему принимать значение любой масти. Чтобы упростить представление состояния элемента управления, определим внутри пространства имен PCSUserCWebAppl перечисление для хранения четырех названий мастей:

namespace PCSUserCWebAppl { ... public enum suit { club, diamond, heart, spade } ... }

Для класса PCSUserC1 требуется переменная-член для хранения типа данных suit (масть) — currentSuit:

public class PCSUserC1 : System.Web.UI.UserControl { protected System.Web.UI.WebControls.Image suitPic; protected System.Web.UI.WebControls.Label suitLabel; protected suit currentSuit;

А также свойство для доступа к этой переменной-члену, Suit:

public suit Suit { get { return currentSuit; } set { currentSuit = value; suitPic.ImageUrl = currentSuit.ToString() + ".bmp"; suitLabel.Text = currentSuit.ToString(); } }

Здесь метод доступа set() задает URL изображения как один из файлов, скопированных ранее, а текст выводит название масти.

Теперь элемент управления закончен, и нам надо добавить код в WebForm1.aspx для доступа к этому новому свойству. Используем список переключателей для выбора масти:

<BODY MS_POSITIONING="GridLayout"> <form method="post" runat="server"> <PCS:UserC1 Runat="server" /> <asp:RadioButtonList Runat="server" autopostback="True"> <asp:ListItem Value="club" Selected="True">Club</asp:ListItem> <asp:ListItem Value="diamond">Diamond</asp:ListItem> <asp:ListItem Value="heart">Heart</asp:ListItem> <asp:ListItem Value="spade">Spade</asp:ListItem> </asp:RadioButtonList> </form> </BODY>

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

Отметим, что нужно задать свойство autopostback этого списка как true, так как обработчик события suitList_SelectedIndexChanged() не будет выполняться на сервере, если обратная отправка не задана, и этот элемент управления не включает обратную отправку по умолчанию.

Для метода suitList_SelectedIndexChanged() требуется следующий код в WebForm1.aspx.cs:

protected void suitList_SelectedIndexChanged(object sender, System.EventArgs e) { MyUserControl.Suit = (suit)Enum.Parse(typeof(suit), suitList.SelectedItem.Value); }

Мы знаем, что атрибуты value элементов <ListItem> представляют допустимые значения перечисления suit, которое было определено ранее, поэтому мы анализируем их просто как типы перечислений (у нас здесь то же пространство имен, поэтому нам не нужно переопределять тип) и используем их как значения свойства Suit элемента управления пользователя. Мы преобразуем возвращаемый тип object в suit с помощью простого синтаксиса преобразования типов, и это невозможно сделать неявно.

Не нужно это усложнять, просто определим одно значение с помощью атрибута Suit формы Web, например:

<PCS:UserC1 Runat="server" Suit="diamond" />

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

Теперь можно изменять масть при выполнении этого приложения Web:

Затем мы зададим для элемента управления несколько методов. Это снова сделать несложно, нам нужно только добавить методы в класс PCSUserC1:

public void Club() { Suit = suit.club; } public void Diamond() { Suit = suit.diamond; } public void Heart() { Suit = suit.heart; } public void Spade() { Suit = suit.spade; }

Эти четыре метода — Club(), Diamond(), Heart() и Spade() — изменяют выведенную на экран масть на ту, которая была указана.

Мы вызываем эти функции из четырех элементов управления на странице .aspx:

<asp:ImaqeButton Runat="server" ImageUrl="CLUB.BMP" /> <asp:ImageButton Runat="server" ImageUrl="DIAMOND.BMP" OnСlick="diamondButton_OnClick" /> <asp:ImageButton Runat="server" ImageUrl="HEART.BMP" OnClick="heartButton_OnClick" /> <asp:ImageButton Runat="server" ImageUrl="SPADE.BMP" /> </form>

С помощью следующих обработчиков событий:

protected void clubButton_OnClick(object sender, System.Web.UI.ImageClickEventArgs e) { myUserControl.Club() } protected void diamondButton_OnClick(object sender, System.Web.UI.ImageClickEventArgs e) { myUserControl.Diamond(); } protected void heartButton_OnClick(object sender, System.Web.UI.ImageClickEventArgs e) { myUserControl.Heart(); } protected void spadeButton_OnClick(object sender, System.Web.UI.ImageClickEventArgs e) { myUserControl.Spade(); }

Теперь мы имеем четыре новые кнопки, которые можно использовать для изменения масти:

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

Теперь, создав элемент управления пользователя, можно использовать его на любой другой странице Web с помощью директивы <%@ Register %> и двух файлов исходного кода (PCSUserC1.ascx и PCSUserC1.ascx.cs), созданных для элемента управления.

Оглавление книги

Оглавление статьи/книги

Похожие страницы