Опубликован: 20.09.2008 | Доступ: свободный | Студентов: 1083 / 111 | Оценка: 4.33 / 4.02 | Длительность: 05:48:00
Лекция 5:

Создание и редактирование страниц

< Лекция 4 || Лекция 5: 12345 || Лекция 6 >

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

Создают на Web-формах кнопки-переключатели, которые отображают список взаимоисключающих вариантов. Щелчок такой кнопки включает ее, одновременно отключая остальные кнопки в группе. RadioButton является производным от CheckBox и, таким образом, поддерживает те же свойства и события. Кроме того, он имеет дополнительное свойство GroupName для указания группы, к которой относится переключатель. В следующем примере объявляется пять элементов управления RadioButton, разделенных на две группы: из 3 и из 2 кнопок. Свойство RadioButton.Checked включает первую кнопку каждой группы:

<asp:RadioButton ID="Green" runat="server" GroupName="Color" Text="Зеленый" Checked="True" /><br />
<asp:RadioButton ID="Red" runat="server" GroupName=" Color" Text="Красный" /><br />
<asp:RadioButton ID="Blue" runat="server" GroupName="Color" Text="Синий" />

<asp:RadioButton ID="Circle" runat="server" GroupName="Shape" Text="Круг" Checked="True" /><br />
<asp:RadioButton ID="Square" runat="server" GroupName="Shape" Text="Квадрат" />

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

Чтобы в серверном сценарии определить, какой переключатель из группы был включен, нужно проверить значение свойства Checked у каждой кнопки группы. Удобнее для добавления переключателей к Web-странице использовать RadioButtonList. Его свойство Selectedlndex соответствует включенной кнопке. RadioButtonList также упрощает задачу выравнивания кнопок-переключателей на странице.

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

Код для задания элемента управления Table

<asp:Table ID="MyTable" runat="server">
    <asp:TableRow runat="server">
        <asp:TableCell runat="server">Row 1, Column 1</asp:TableCell>
        <asp:TableCell runat="server">Row 1, Column 2</asp:TableCell>
    </asp:TableRow>
    <asp:TableRow runat="server">
        <asp:TableCell runat="server">Row 2, Column 1</asp:TableCell>
        <asp:TableCell runat="server">Row 2, Column 2</asp:TableCell>
    </asp:TableRow>
</asp:Table>

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

MyTable.Rows[0].Cells[0].Text = "Cell 1";
MyTable.Rows[0].Cells[1].Text = "Cell 2";
MyTable.Rows[1].Cells[0].Text = "Cell 3";
MyTable.Rows[1].Cells[1].Text = "Cell 4";

А этот сценарий создает во время исполнения всю таблицу:

<asp:Table ID="My_Table" runat="server">
</asp:Table>

for (int i = 0; i < 2; i++)
{
    TableRow row = new TableRow();
    for (int j = 0; j < 2; j++)
    {
        TableCell cell = new TableCell();
        cell.Text = String.Format("Row {0}, Column {1}", i + 1, j + 1);
        row.Cells.Add(cell);
    }
    My_Table.Rows.Add(row);
}

Эти сценарии работают благодаря тому, что строки, содержащиеся в объекте Table, доступны через свойство Rows. Каждая строка набора Rows — это экземпляр класса TableRow. Внутри строки каждая ячейка представлена объектом TableCell, доступ к которому осуществляется посредством набора Cells объекта-строки. Вызов Add для набора Rows или Cells позволяет программно добавить строку к таблице или ячейку к строке.

По умолчанию рамки элементов управления Table невидимы. Изменить это можно, установив свойство GridLines в Horizontal, Vertical или Both. Другие свойства TableCellPadding и Cellspacing — как и одноименные HTML-атрибуты, управляют промежутками внутри ячеек, a BacklmageUrl задает фоновую картинку. Таблицы часто используются Web-страницами для отображения цветного фона. Изменить цвет фона для Table позволяет его свойство BackColor, унаследованное от WebControl.

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

Служат контейнерами для других элементов управления. Одно из применений элементов управления Panelуправление видимостью группы элементов управления. Следующая Web-форма то отображает, то скрывает 4 элемента управления Label, устанавливая свойство Visible элемента управления Panel в true или false при всяком щелчке флажка. Обратите внимание на атрибут AutoPostBack="True" в тэге

<asp:Panel ID="MyPanel" runat="server" Height="50px" Width="125px">
<asp:Label ID="surname" runat="server" Text="Иванов"></asp:Label> <br />
<asp:Label ID="name" runat="server" Text="Иван"></asp:Label><br />
</asp:Panel>
<asp:CheckBox ID="Toggle" runat="server" AutoPostBack="True" 
    OnCheckedChanged="Toggle_CheckedChanged" Text="Показать надписи" />

    protected void Toggle_CheckedChanged(object sender, EventArgs e)
    {
        MyPanel.Visible = Toggle.Checked;
    }

Кнопки

Семейство Web-элементов управления включает три типа кнопок: Button, LinkButton и ImageButton. Все три имеют общее функциональное назначение: возврат содержащей их формы на сервер. Отличия: Button выглядит как командная кнопка, LinkButton — как гиперссылка, a ImageButton отображает заданную картинку. Практически на любой Web-форме есть одна или несколько кнопок, с помощью которых пользователь может отправить форму на сервер. Ниже приведены примеры объявления экземпляров кнопок каждого типа:

<asp:Button ID="Button1" runat="server" Text="Кнопка" OnClick="Button1_Click"/>

<asp:LinkButton ID="LinkButton1" runat="server" Text="Кнопка-сылка"> </asp:LinkButton>

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Logo.gif" 
  AlternateText="Кнопка изображение" OnClick="ImageButton1_Click"/>

Свойство Text задает текст, отображаемый поверх элемента управления Button или LinkButton. ImageUrl задает картинку, отображаемую элементом управления LinkButton. Все типы кнопок генерируют по щелчку два вида событий: Click и Command. Атрибут OnClick в тэге элемента управления связывает с кнопкой обработчик Click. Обработчики Click для Button и LinkButton имеют такой прототип:

protected void Button1_Click(object sender, EventArgs e)
{
// Здесь выполняется обработка события,
}

А прототип обработчиков Click для элементов ImageButton отличается:

protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
 {
  // Получить координаты щелчка,
  int x = e.X;
  int у = e.Y;
 }

Объект ImageClickEventArgs, передаваемый обработчику Click объекта ImageButton, содержит открытые поля X и Y, указывающие положение указателя мыши в момент щелчка. X и Y измеряются в пикселах и соответствуют расстоянию от левого верхнего угла картинки.

Списки

В семейство элементов управления со списками входят 4 члена: ListBox, DropDownList, CheckBoxList и RadioButtonList. У них две общие характеристики: все они произведены от System.Web.UIWebControlsListControl и предназначены для отображения списков. Элементы управления ListBox и DropDownList содержат текстовые строки, которые могут быть выбраны пользователем. Оба преобразуются в HTML- теги <select>. CheckBoxList и RadioButtonList отображают массивы флажков и переключателей и преобразуются в тэги <input type=" checkbox" > и <input type="radio"> соответственно. Тэги <input> могут содержаться в HTML-таблице для выравнивания. Элементы списков представляются экземплярами класса Listltem, которые объявляются тэгами <asp:Listltem>. Listltem содержит текстовые свойства Text и Value. Text — это текст элемента списка; Value — произвольная строка, связанная с этим пунктом списка. Listltem также имеет свойство Selected булевого типа указывающее, выбран ли данный пункт. Следующие операторы объявляют ListBox, содержащий 4 элемента, и выбирают второй элемент:

<asp:ListBox ID="MyListBox" runat="server">
       <asp:ListItem Text="Волга"></asp:ListItem>
       <asp:ListItem Text="Жигули" Selected="True"></asp:ListItem>
       <asp:ListItem Text="Москвич"></asp:ListItem>
       <asp:ListItem Text="Запорожец"></asp:ListItem>
   </asp:ListBox>

Небольшое изменение кода создает вместо ListBox элемент управления DropDownList:

<asp:DropDownList ID="MyDropDownList" runat="server">
  <asp:ListItem Text="Волга"></asp:ListItem>
  <asp:ListItem Text="Жигули" Selected="True"></asp:ListItem>
  <asp:ListItem Text="Москвич"></asp:ListItem>
  <asp:ListItem Text="Запорожец"></asp:ListItem>
</asp:DropDownList>&nbsp;</div>

В ListBox или DropDownList свойство Selected объекта Listltem определяет, выбран ли данный элемент ( true ) или нет ( false ). В CheckBoxList или RadioButtonList то же свойство определяет, включен ли данный элемент. После возврата формы серверному сценарию не надо проверять каждый элемент списка, чтобы определить выбранный. Элементы управления со списками наследуют от базового класса ListControl свойства Selectedlndex и Selectedltem. Таким образом, сценарий может определить, какая кнопка-переключатель выбрана, считывая ее индекс (индексы начинаются с 0):

int Index = MyRadioButtonList.SelectedIndex;

Для элементов управления CheckBoxList свойства Selectedlndex и Selectedltem не столь интересны, так как может быть установлено более одного флажка из списка, но для других списков они крайне полезны. При изменении выбора, т. е. при выборе нового элемента ListBox и DropDownList или по щелчку кнопки в CheckBoxList и RadioButtonList элементы управления со списками генерируют событие SelectedlndexChanged. По умолчанию событие не генерируется, пока какое-либо иное событие не вызовет возврат формы. Однако все списки наследуют от ListControl свойство AutoPostBack, которое можно установить в true, чтобы события SelectedlndexChanged генерировались немедленно.

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

Отображают элементы в выпадающем списке, напоминающем поле со списком в Windows. Классический пример применения элемента управления DropDoumList - отображение списка семи базовых цветов. Следующий код создает такой список и отображает выбор пользователя на Web-странице:

<asp:DropDownList ID="ColorList" runat="server">
    <asp:ListItem Text="Красный"></asp:ListItem>
    <asp:ListItem Text="Оранжевый"></asp:ListItem>
    <asp:ListItem Text="Желтый"></asp:ListItem>
    <asp:ListItem Text="Зеленый"></asp:ListItem>
    <asp:ListItem Text="Голубой"></asp:ListItem>
    <asp:ListItem Text="Синий"></asp:ListItem>
    <asp:ListItem Text="Фиолетовый"></asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Select_Color" runat="server" OnClick="Select_Color_Click"  Text="Выбери цвет" />
<asp:TextBox ID="Color" runat="server"></asp:TextBox>

    protected void Select_Color_Click(object sender, EventArgs e)
    {
        Color.Text = ColorList.SelectedItem.Text;
    }
< Лекция 4 || Лекция 5: 12345 || Лекция 6 >