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

Элементы управления 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. Другие свойства Table — CellPadding и 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;
    }

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

Похожи на элементы управления DropDownList, но отображают свои элементы в статичном, а не в выпадающем списке. Вот как создается элемент управления ListBox с перечнем семи базовых цветов, а выбор пользователя отображается на Web- странице:

<asp: ListBox ID="ColorList" runat="server" Rows="7" >
    <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: ListBox>
<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;
    }

По умолчанию размеры ListBox устанавливаются так, что одновременно видны только 4 пункта списка. Атрибут Rows в показанном выше тэге <asp:ListBox> увеличивает высоту списка до 7 элементов.

Единственным функциональным различием между ListBox и DropDownList является поддержка множественного выбора первым из них. Атрибут SelectionMode="Multiple" в тэге элемента управления создает ListBox с множественным выбором:

<asp:ListBox ID="ColorList" runat="server" Rows="7" SelectionMode="Multiple">

К сожалению, в классе ListBox нет открытого метода или свойства для получения индексов элементов, выбранных в списке с множественным выбором. Чтобы определить, какие элементы были выбраны, вам придется перебрать все элементы списка по одному, проверяя значение свойства Selected. Следующий метод принимает ссылку на ListBox как входной параметр и возвращает массив целых чисел, содержащий индексы всех выбранных элементов, начиная с нуля;

int[] GetSelectedlndices(ListBox lb)
  {
  ArrayList a = new ArrayList();
  for (int i=0; i<lb.Items.Count; i++)
      {
      if (lb.Items[i].Selected)
        a.Add(i);
      }
  int [] indices = new int[a.Count];
  a.CopyTo (indices);
  return indices;
  }

Используя показанный выше метод GetSelectedlndices, оператор:

int[ ] indices = GetSelectedlndices(ColorList) ;

определяет полный список элементов, отобранных в списке с множественным выбором "ColorList".

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

Создают массивы флажков. Следующий оператор отображает 4 флажка, расположенные по вертикали:

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

Чтобы в серверном сценарии определить, установлен ли данный флажок, обратитесь к значению его свойства Selected:

if (Auto_List.Items[2].Selected)
{
// Флажок установлен.
}
else
{
// Флажок сброшен.
}

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

Элемент управления RadioButtonList упрощает создание групп переключателей и определение выбранного переключателя. Операторы:

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

создают столбец переключателей и включают первый из них. Чтобы определить, какой переключатель выбран пользователем, серверный сценарий может применить RadioButtonList, Selectedlndex.

int index = Auto_List.SelectedIndex;

Тема 2.Работа с кодом C Sharp

При создании Web страницы, например, Default.aspx, одновременно создается и файл Default.aspx.cs или Default.aspx.vb, в котором могут размещаться фрагменты кода на языке C Sharp или VB соответственно. Эти фрагменты позволяют обрабатывать значения возвращаемые элементами управления. В дальнейшем будем ориентироваться на использование языка C Sharp, поэтому кратко рассмотрим основные типы данных и операторы этого языка.

В C Sharp используются следующие типы данных:

Переменной в C Sharp называется именованная область памяти, в которой хранятся данные определенного типа. У переменной есть имя и значение. Имя служит для обращения к области памяти, в которой хранится значение. Перед использованием любая переменная должна быть описана, например, так:

int a; 
float x;

При описании можно присвоить переменной начальное значение (инициализация):

int   a = 10;
float b = 20.5;

Из констант, переменных, разделителей и знаков операций можно конструировать выражения. Каждое выражение представляет собой правило вычисления нового значения. Если выражение формирует целое или вещественное число, то оно называется арифметическим. Пара арифметических выражений, объединенная операцией сравнения, называется отношением.

a+b+64  // арифметическое выражение
(c-4) > (d*e)  // отношение

В C Sharp имеются следующие типы операторов:

Оператор "выражение" это любое выражение, заканчивающееся точкой с запятой. Оно рассматривается как оператор, выполнение которого заключается в вычислении этого выражения.

i++;
a += 2;
x = a+b;

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

{
    n++;
    summa += n;
  }
  {
    int n = 0;
    n++; 
    summa += n;
  }

Условный оператор имеет полную и сокращенную форму.

if (выражение-условие) оператор1;      // сокращенная форма
if (выражение-условие) оператор1; else оператор2;  // полная форма

Если значение выражения-условия истинно, то выполняется оператор1, иначе выполняется оператор2

Оператор выбора позволяет сделать множественный выбор.

switch (выражение)
  {
    case константа1: оператор1;break;
    case константа2: оператор2; break;
    . . . . . . . . . . . 
    [default: операторы;]
  }

При выполнении оператора switch, вычисляется выражение, записанное после switch, оно может быть числовым или строковым. Полученное значение последовательно сравнивается с константами, которые записаны следом за case. При первом же совпадении выполняются операторы, помеченные данной меткой, а остальные игнорируются.

Если значение выражения, записанного после switch, не совпало ни с одной константой, то выполняются операторы, которые следуют за меткой default.

Цикл с предусловием

while (выражение-условие)
  оператор;

Если выражение-условие истинно, то тело цикла выполняется до тех пор, пока выражение-условие не станет ложным.

while (a!=0)
  {
    a= Convert.ToInt16(Console.ReadLine()); 
    s+=a;
  }

Цикл с постусловием

do
  оператор;
  while (выражение-условие);

Тело цикла выполняется до тех пор, пока выражение-условие истинно.

do
  {
    a= Convert.ToInt16(Console.ReadLine());
    s+=a;
  }
  while(a!=0);

Цикл с параметром

for (выражение_1;выражение-условие;выражение_3)
  оператор;

Выражение_1 – задает начальные условия для цикла (инициализация).

Выражение-условие определяет условие выполнения цикла, если оно не равно 0, цикл выполняется, а затем вычисляется значение выражения_3.

Выражение_3 – задает изменение параметра цикла или других переменных (коррекция).

Выражение_1 и выражение_3 могут состоять из нескольких выражений, разделенных запятыми. Любое выражение может отсутствовать, но разделяющие их " ; " должны быть обязательно.

Тема 3. Запуск и отладка проекта

Запустить проект в VWD 2005 EE можно одним из следующих способов; щелкнуть кнопку Start на панели инструментов, выбрать из меню Debug команду Start или нажать клавишу F5. После запуска проекта VWD 2005 EE компонует его файлы, показывая в окне Error List сообщения об ошибках, если таковые возникнут (рис. 5.1).

Дважды щелкнув описание ошибки в окне Error List, вы быстро найдете строку с ошибкой, чтобы исправить ее.

Если во время компоновки ошибки не обнаружены, VWD 2005 EE запускает Internet Explorer и открывает в нем начальную страницу Web-приложения. Если при исполнении приложения в режиме отладки возникает ошибка. VWD 2005 EE показывает в браузере соответствующее сообщение. (рис. 5.2).

Дальше можно выполнить одно из следующих действий:

Установка точки прерывания позволяет остановить исполнение проекта перед некоторой строкой кода. Встретив при исполнении проекта строку с точкой прерывания, VWD 2005 EE остановит приложение перед этой строкой и откроет ее в окне Code Editor, выделив, как показано на рис. 5.3. Чтобы установить точку прерывания, щелкните мышкой по серому полю слева от строки, перед которой нужно остановить исполнение программы, либо выделите эту строку и нажмите F9.

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

Чтобы сделать это, выделите переменную (объект) и перетащите ее в окно Watch. Для просмотра значений вложенных элементов (например, элементов массива или свойств объекта) щелкните знак "+" справа от сложного элемента в окне Watch.

Чтобы возобновить исполнение приложения, остановленного перед точкой прерывания, щелкните кнопку Continue на панели инструментов либо нажмите F5.

Можно также исполнять приложение построчно, нажимая F10 или F11.

F10 заставляет при вызове процедуры исполнить ее как одну команду. Другими словами, процедура исполняется без захода в нее ( step over ), после чего исполнение останавливается на следующей после вызова этой процедуры строке. Нажатие клавиши F11 вызывает исполнение процедуры с заходом в нее ( step in ), при этом исполнение останавливается на первой строке вызванной процедуры