Принципы разработки пользовательского интерфейса интернет-приложения

Как известно, существует три основных способа описания стилей:

Внутри Web-страницы может существовать несколько элементов с одинаковыми именами классов, но идентификаторы всегда являются уникальными.

Создадим новый класс, внутри которого опишем оформление таблицы. Для этого щелкнем правой кнопкой в области окна редактора документа стиля и в контекстном меню выберем пункт Add Style Rule, как показано на рис 5.11.

В открывшемся окне необходимо установить переключатель Class name, т. к. мы создаем стиль на основе класса, и ввести имя класса, в данном случае ).

Затем необходимо нажать кнопку(рис 5.12) для включения созданного класса в иерархию стилей и нажать OK.

Внутри созданного стиля класса щелкнуть правой кнопкой мыши и в открывшемся контекстном меню выбрать пункт Build Style (рис 5.14). При этом открывается окно Style Builder, с помощью которого можно задавать значения практически любым доступным свойствам данного элемента.

В нашем примере необходимо задать значения для следующих свойств.

В разделе Edges указать параметры для контуров таблицы, как показано на рис 5.15.

В разделе Other указать значения для размещения ячеек друг относительно друга, как показано на рис 5.16.

В результате проделанных действий в редактируемый стиль ).

Для применения созданного стиля к таблице необходимо в свойстве ).

Видно, что данный стиль был применен только к рамке таблицы. Для настройки ячеек таблицы необходимо создать отдельный стиль. Вообще, для каждой ячейки таблицы возможно создавать отдельное оформление - для этого необходимо создать отдельный стиль для каждой группы ячеек, имеющих одинаковые параметры оформления, либо произвести настройки оформления непосредственно в самой таблице. На практике чаще всего ячейки таблицы оформляются одинаково за исключением ячеек заголовка таблицы, поэтому необходимо создать стиль, который можно было бы легко применить ко всем ячейкам таблицы примера. Для этого нужно вспомнить, как в языке HTML описываются таблицы. Несмотря на то, что мы используем серверный элемент управления, в конечном счете он будет представлен в виде стандартных тегов языка HTML, в котором для описания строк используется тег <tr>, для описания обычных ячеек в рамках строки - <td>, ячеек строки заголовка - <th>. Исходя из этого, создадим стиль для обычных ячеек таблицы. Для этого необходимо выполнить следующие операции:

Щелкнуть правой кнопкой внутри окна редактора стилей, в открывшемся контекстном меню выбрать пункт Add Style Rule.

В окне Add Style Rule выбрать переключатель Class name и ввести имя уже существующего класса mytable, после чего добавить его к иерархии стилей.

Выбрать переключатель . Нажать OK.(рис 5.19) Добавление тега к существующему элементу

В результате этой операции в файл стиля будет добавлен стиль

.mytable TD
{
}.

Щелкнуть правой кнопкой мыши внутри только что созданного стиля и выбрать пункт Build Style.

В окне Style Builder установить параметры Borders в разделе Edges аналогично параметрам, установленным ранее для класса mytable.

В результате проделанных действий будет получена таблица, внешний вид которой аналогичен предыдущей. Более того, теперь для каждой вновь создаваемой таблицы можно настроить такое же оформление, просто указав в ее свойстве CssClass значение mytable. При необходимости что-то поменять в оформлении таблицы необходимо изменить соответствующие настройки стилей.

Аналогичным образом, добавив соответствующий стиль для строки заголовка таблицы и установив свойство .

Добавленный стиль выглядит следующим образом:

.mytable THEAD
{
  font-weight: bold;
  color: white;
  font-family: Arial;
  background-color: black;
}

Иногда возникает необходимость изменять содержимое таблицы на основе производимых пользователем действий. В этом случае обойтись статическими элементами, вводимыми в таблицу на этапе разработки приложения, невозможно. Решить данную задачу можно, воспользовавшись механизмом добавления элементов в таблицу во время выполнения. Здесь следует отметить, что элемент управления Table не сохраняет те элементы, которые добавляются в него во время выполнения приложения. Это приводит к тому, что таблицу необходимо заново создавать на основе данных, сохраненных в переменной состояния.

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

public partial class _Default : System.Web.UI.Page
{
  protected void Page_Load(object sender, EventArgs e)
  {

  }
  protected void btn_Add_Click(object sender, EventArgs e)
  {
    //Записать текст в состояние отображения страницы
    ViewState.Add(ViewState.Count.ToString(), tb_TableRow.Text);
    CreateTable();
  }
  private void CreateTable()
  {
    //массив слов
    string[] arrWords;
    //строка, состоящая из значений ячеек строки таблицы
    string strWords;
    TableRow newRow;
    TableCell newCell;
    //цикл для каждого элемента ViewState
    for (int i = 0; i < ViewState.Count;i++)
    {
      //символ - разделитель значений полей таблицы
      char[] c ={','};
      //создать новую строку
      newRow = new TableRow();
      //извлечь из ViewState очередной элемент
      strWords = ViewState[i.ToString()].ToString();
      //преобразовать строку в массив, используя разделитель
      arrWords = strWords.Split(c);
      //цикл для каждого элемента массива слов
      for (int j = 0; j <= arrWords.GetUpperBound(0); j++)
      {
        //создать новую ячейку таблицы
        newCell = new TableCell();
        //установить текст в созданную ячейку
        newCell.Text = arrWords[j];
        //добавить ячейку к набору ячеек строки таблицы
        newRow.Cells.Add(newCell);
      }
      //добавить строку к таблице
      t_Table1.Rows.Add(newRow);
    }

  }
}

Результат работы кода страницы представлен на рис 5.21.

Одними из наиболее широко распространенных элементов управления являются "Список" и "Выпадающий список". Содержимое этих элементов управления может быть добавлено как на этапе разработки приложения, так и на этапе выполнения.

Для добавления содержимого к элементам управления "Список" ( listbox ) и "Выпадающий список" ( dropdownlist ) необходимо выполнить одинаковые действия. Рассмотрим пример.

Добавим на созданную ранее страницу элементы управления "Список" (ID=lb_goods) и "Выпадающий список" (ID=ddl_goods). Добавим к созданным элементам управления две строки: "порошок стиральный" и "отбеливатель". Для этого необходимо выполнить следующие действия:

Выделить элемент управления, открыть меню как показано на рис 5.22, с помощью щелчка левой кнопки мыши, выполнить команду Edit Items...(рис 5.22) Меню редактирования элементов ListBox

В открывшемся окне ListItem Collection Editor добавить два новых элемента путем нажатия на кнопку Add (рис 5.23).(рис 5.23) Окно редактора элементов объекта ListBox

Ввести в свойство Text создаваемых элементов добавляемые строки.

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

Проделав аналогичные операции для элемента управления ):

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

//Добавить элемент в ListBox
lb_goods.Items.Add(tb_TableRow.Text);
//Добавить элемент в DropDownList
ddl_goods.Items.Add(tb_TableRow.Text);

В результате введенные в текстовое поле элементы после нажатия на кнопку "Добавить" добавляются не только в таблицу, но и в списки, как показано на рис 5.25.

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

В качестве примера добавим два элемента .

При нажатии на кнопку "Отобразить выбранные элементы" в элементах lbl_ListBoxSelectedItem и lbl_DropDownListSelectedItem должны отобразиться выбранные в данный момент элементы.

Добавим обработчик события нажатия на кнопку "Отобразить выбранные элементы". Исходный код процедуры представлен ниже.

protected void btn_ShowSelectedItems_Click(object sender,
EventArgs e)
{
  if (lb_goods.SelectedItem != null)
    lbl_ListBoxSelectedItem.Text = "В элементе ListBox выбран
     элемент " + lb_goods.SelectedItem.Text;
  else
    lbl_ListBoxSelectedItem.Text = "В элементе ListBox ничего
     не выбрано";

  if (ddl_goods.SelectedItem!=null)
    lbl_DropDownListSelectedItem.Text = "В элементе DropDownList
     выбран элемент " + ddl_goods.SelectedItem.Text;
  else
    lbl_DropDownListSelectedItem.Text = "В элементе
     DropDownList ничего не выбрано";
}

Как видно, обращение к текущему элементу списков происходит посредством свойства SelectedItem, предоставляющего доступ к объекту - элементу списка. Если необходимо получить доступ к свойству Text текущего элемента списка, к нему возможно обратиться следующим образом: ddlgoods.SelectedItem.Text.

Результаты работы данной страницы представлены на рис 5.27.

В реальных приложениях часто возникает необходимость привязки значений элемента управления к какому-либо источнику данных. Таким источником могут быть таблицы базы данных, массивы, свойства объектов или выражения, объединяющие несколько элементов. Рассмотрим привязку значений элемента управления DropDownList к данным, хранящимся в строковом массиве. Привязки элементов управления к другим источникам данных более подробно рассматриваются в лекции 10 "Использование баз данных в приложениях ASP.NET".

Для привязки элемента управления DropDownList к данным, хранящимся в строковом массиве, сначала необходимо создать сам массив, а также вызвать метод DataBind(), который осуществит привязку элемента управления к источнику данных. При вызове метода DataBind() для всей страницы будет осуществлена привязка всех элементов управления, расположенных на странице, к источникам данных. Метод DataBind() проверяет все выражения на странице и заменяет их соответствующими значениями, взятыми из указанного источника данных. Если не вызвать этот метод, выражение привязки не заполнит элемент управления - он просто будет отброшен в момент преобразования страницы в HTML.

public string[] listData ={"доска","кирпич","бетон","песок"};
protected void Page_Load(object sender, EventArgs e)
{
  Page.DataBind();
}

Для указания источника данных необходимо отредактировать исходный код страницы, добавив определение источника данных к элементу ddl_goods, как показано в следующем фрагменте кода:

<asp:DropDownList ID="ddl_goods" runat="server"
DataSource='<%#listData %>' Width="185px">
<asp:ListItem>порошок стиральный</asp:ListItem>
<asp:ListItem>отбеливатель</asp:ListItem>
</asp:DropDownList>

Здесь было использовано выражение привязки данных, которое располагается между ограничителями <%# %>. В качестве выражения привязки данных не допускается использование программного кода, это может быть значение свойства, переменная-член или функция либо любое другое выражение, которое может быть вычислено во время выполнения.

В данном случае, в качестве выражения привязки данных указана переменная listData, являющаяся именем созданного ранее массива строк. Теперь в момент запуска приложения элемент DropDownList будет заполнен значениями элементов массива.

ASP.NET предоставляет много других полезных элементов управления, реализующих самые различные задачи. Рассмотрим самые основные из них, использование которых необходимо практически в каждом Web-приложении. Остальные будут рассматриваться в следующих частях данного курса.

Использование элементов CheckBox, CheckBoxList, RadioButton, RadioButtonList и BulletedList

В ряде случаев необходимо принимать от пользователя булевые значения, для этих целей применяются элементы CheckBox, CheckBoxList, RadioButton и RadioButtonList. Элементы CheckBox и RadioButton отличаются тем, что CheckBox позволяет устанавливать значения одного или нескольких флажков одновременно, в то время как RadioButton - только одно значение. Окончание List говорит о том, что данный элемент управления представляет собой целый набор флажков, объединенных в группу. Группы флажков легче привязывать к источникам данных, поэтому их целесообразнее использовать в случае, если флажки должны отображать данные, находящиеся в БД, либо если с помощью них данные должны вводиться в базу данных, либо если флажки логически связаны между собой.

Для получения значений элементов управления CheckBox и RadioButton необходимо использовать свойство Checked. Например, в следующем коде осуществляется проверка значения флажка, которое выводится на экран:

protected void Button1_Click(object sender, EventArgs e)
{
  Response.Write("Флажок установлен в значение
  "+CheckBox1.Checked.ToString());
}

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

Для получения и установки значений элементов управления RadioButtonList и CheckBoxList необходимо последовательно опрашивать все элементы управления списка, проверяя их значения. Для этого очень удобно использовать цикл For Each.

В следующем примере последовательно проверяются значения всех флажков элемента CheckBoxList1. Если флажок выбран, на экран выводится соответствующее сообщение:

protected void Button1_Click(object sender, EventArgs e)
{
  foreach (ListItem l in CheckBoxList1.Items)
  {
    if (l.Selected)
    Response.Write("выбран " + l.Text + "<br/>");
  }
}

Следует обратить внимание на тот факт, что элемент управления CheckBoxList, как и RadioButtonList, содержит элементы управления ListItem, а не CheckBox или RadioButton, как можно было бы предположить.

Аналогичным образом производятся проверки и для элемента RadioButtonList.

BulletedList является аналогом HTML-элементов, предназначенных для организации упорядоченных и неупорядоченных списков с помощью тегов <ul> и <ol> соответственно, однако позволяет обращаться к списку программно. Для установки элементов, отображаемых в списке, необходимо ввести их с помощью средств, аналогичных рассмотренным ранее для CheckBoxList и RadioButtonList.

Особенностью BulletedList является возможность настройки внешнего вида и типа элементов списка. Основными свойствами этого элемента управления являются следующие.

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

protected void BulletedList1_Click(object sender,
BulletedListEventArgs e)
{
Response.Write("Вы щелкнули по элементу списка
"+BulletedList1.Items[e.Index].ToString());
}

Использование Image, ImageMap, ImageButton

Отображение графики на Web-странице является абсолютно необходимым условием. ASP.NET предоставляет несколько возможностей отображения графики.

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

В следующем примере при нажатии на соответствующую кнопку отображается изображение обезьяны, лося либо кошки (рис 5.28).

protected void btn_Monkey_Click(object sender, EventArgs e)
{
  Image1.ImageUrl = "~//Images//monkey.jpg";
}

protected void btn_Elk_Click(object sender, EventArgs e)
{
  Image1.ImageUrl = "~//Images//elk.jpg";
}

protected void btn_Cat_Click(object sender, EventArgs e)
{
  Image1.ImageUrl = "~//Images//cat.jpg";
}

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

protected void ImageButton1_Click(object sender,
  ImageClickEventArgs e)
 {
   string strClickFigure="";
if (!(e.X <= 380  e.X >= 20  e.Y <= 380  e.Y >= 20))
  strClickFigure = "рамка";
   if (e.X>=60  e.X<=210  e.Y>=60  e.Y<=210)
     strClickFigure="квадрат";
   if ((e.Y>=495-e.X)  (e.Y>=e.X-45)  e.Y<=332)
     strClickFigure="треугольник";
   Label1.Text = "Вы щелкнули в точке Х="+e.X.ToString()+";
   Y="+e.Y.ToString()+" это "+strClickFigure;
 }

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

Для использования элемента управления ImageMap необходимо определить области, на нахождение внутри которых должна реагировать карта. Добавление областей осуществляется путем добавления объектов HotSpot в коллекцию ImageMap. Существует три типа областей HotSpot: CircleHotSpot - определяющая окружность, RectangleHotSpot - прямоугольник, PolygonHotSpot - многоугольник (полигон). Для задания областей необходимо добавить в коллекцию HotSpots соответствующий элемент и указать его координаты. Кроме того, возможно указание следующих дополнительных параметров:

В качестве примера создадим с помощью .

В примере необходимо добиться того, чтобы при щелчке по квадрату и прямоугольнику осуществлялся вывод информации о том, где именно был произведен щелчок, а при щелчке по рамке - производился переход на страницу поисковой системы Яндекс.

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

Разница в том, что для описания треугольника не подходят предопределенные HotSpot Rectangle и Circle, поэтому необходимо использовать PolygonHotSpot. Его особенностью является то, что координаты вершин многоугольника задаются в свойстве Coordinates через запятую.

Для описания рамки ее целесообразно разбить на две части. Первая часть будет состоять из верхней и правой частей, вторая - нижней и левой. Это объясняется тем, что в .

Исходный код элемента ImageMap будет выглядеть следующим образом:

<asp:ImageMap ID="ImageMap1" runat="server" Height="400px"
 ImageUrl="~/Images/figure.gif"
  OnClick="ImageMap1_Click" Width="400px">
  <asp:RectangleHotSpot AlternateText="квадрат" Bottom="60"
   HotSpotMode="PostBack"
    Left="60" PostBackValue="квадрат" Right="210" Target=
     "_blank" Top="210" />
  <asp:PolygonHotSpot AlternateText="треугольник" Coordinates=
   "270,225,375,332,165,331"
    HotSpotMode="PostBack" PostBackValue="треугольник" />
  <asp:PolygonHotSpot AlternateText="рамка"
   Coordinates="0,0,400,0,400,400,380,380,380,20,20,20"
    HotSpotMode="Navigate" NavigateUrl="http://www.yandex.ru"
     Target="_blank" />
  <asp:PolygonHotSpot AlternateText="рамка" Coordinates=
   "0,0, 0,400,400,400,380,380,20,380,20,20"
    HotSpotMode="Navigate" NavigateUrl="http://www.yandex.ru"
     Target="_blank" />
</asp:ImageMap>

В результате работа элемента управления будет практически аналогична предыдущему примеру, однако его использование в данном случае гораздо более просто и удобно.

Как уже было сказано, в настоящее время доступны только три типа геометрических фигур - окружность, прямоугольник, многоугольник. Иногда их бывает недостаточно, например, было бы полезно иметь возможность определения области в виде эллипса. Дополнительные области возможно определять самостоятельно, создавая свои классы на основе класса .

Использование Literal и HiddenField

Элемент управления Literal представляет собой один из способов вывода информации на экран. Literal можно использовать в качестве контейнера для размещения HTML-элементов на странице. Чаще всего его используют для динамического добавления текста. Схожие возможности по добавлению текста предоставляет элемент Label, Literal отличается от него тем, что не добавляет дополнительных HTML-элементов к тексту. Label, например, размещает текст внутри тега <span>, Panel - внутри <div> и т. д. Размещение элементов внутри тегов создает возможность для поддержки ими стилей оформления, Literal же не имеет такой возможности. Рекомендуется задействовать элемент Literal в том случае, когда необходимо размещать текст на странице без применения дополнительной разметки, либо в том случае, когда существует HTML-текст (например, хранящийся в файле или базе данных), содержащий форматирование с использованием тегов, и его необходимо вывести на экран.

Самым важным свойством элемента управления Literal является Mode. Существуют три значения этого свойства:

Рассмотрим, как при использовании следующего примера элемента Literal могут быть получены различные результаты.

При использовании значения Mode=PassThrough, как показано в следующем фрагменте исходного кода

private string s = "<input id='Button1' type='button'
 value='кнопка' /><br/><table border='1' cellpadding='1'
 cellspacing='0'><tr><td>номер</td><td>наименование</td><td>
 кол-во</td></tr><tr><td>1</td><td>Краска</td><td>10</td>
 </tr><tr><td>2</td><td>Кисточка</td><td>50</td></tr></table>";
protected void Page_Load(object sender, EventArgs e)
{
  Literal1.Mode = LiteralMode.PassThrough;
  Literal1.Text = s;
}

будет получен результат, изображенный на рис 5.33.

А при использовании режима Encode - следующий:

Элемент управления HiddenField целесообразно использовать в том случае, когда на странице необходимо сохранить какие-то данные, но не отображать их. Например, это может быть какая-нибудь информация о пользователе, которая необходима для выполнения сервисных функций.

У элемента HiddenField существует лишь одно свойство, заслуживающее внимания. Это Value, посредством которого ему и присваивается значение.

При использовании элемента управления HiddenField необходимо помнить о безопасности, т. к., несмотря на то, что информация, хранящаяся в данном элементе, не отображается на экране, ее легко можно увидеть, просмотрев исходный код страницы. Более того, пользователь может изменить данную информацию перед инициированием postback и отправкой ее на сервер. Поэтому не рекомендуется хранить какие-либо конфиденциальные данные, а также данные, критичные для выполнения приложения на сервере, в данном элементе управления.

Использование Panel

Элемент управления Panel используется для группирования элементов управления. При этом он выступает в качестве контейнера, способного вмещать в себя различные другие элементы управления, и тем самым дает возможность манипулировать ими как единым целым. Например, возможно скрытие или показ элемента Panel со всеми входящими в него элементами путем задания значения свойства Visible равным true или false.

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

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

С помощью Panel можно создать область, содержащую полосы прокрутки. Для этого достаточно установить соответствующее значение свойства ScrollBars, а также установить необходимые значения свойств Height и Width.

С помощью .(рис 5.35) Пример изображения группы элементовСледует отметить, что при установке свойства GroupingText становится невозможным использование полос прокрутки.

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

В следующем примере создается простейшая форма авторизации пользователя на сайте. При вводе имени пользователя и пароля, а также щелчке по кнопке "Войти" (либо нажатии Enter), введенные данные сравниваются с хранящимися в коде программы. В случае, если данные совпадают, панель, содержащая элементы управления, скрывается, а вместо нее выводится приветственное сообщение. Исходный код страницы выглядит следующим образом:

<body>
  <form id="form1" runat="server">
  <div>
    <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
    <br />
    <br />
    <asp:panel ID="Panel1" runat="server" height="118px"
     width="215px" DefaultButton="btn_Enter">
      <asp:Label ID="Label2" runat="server" Text=
       "Имя "></asp:Label>
      nbsp; nbsp;nbsp;
      <asp:TextBox ID="tb_Name" runat="server"></asp:TextBox><br />
      <br />
      <asp:Label ID="Label3" runat="server" Text="Пароль">
       </asp:Label>
      <asp:TextBox ID="tb_Password" runat="server" TextMode=
       "Password"></asp:TextBox><br />
      <br />
      <asp:Button ID="btn_Enter" runat="server" OnClick=
       "btn_Enter_Click" Text="Войти" /></asp:panel> nbsp;
  </div>
  </form>
</body>

Исходный код процедуры нажатия на кнопку, осуществляющий проверку введенных данных, представлен ниже.

protected void btn_Enter_Click(object sender, EventArgs e)
{
  if (tb_Name.Text == "user"  tb_Password.Text == "12345")
  {
    Panel1.Visible = false;
    Label1.Text = tb_Name.Text + " успешно вошел в систему.";
  }
  else
  {
    Label1.Text = "Неверное имя или пароль";
    Label1.ForeColor = System.Drawing.Color.Red;
    tb_Name.Text = "";
  }
}

Использование LinkButton

Элемент управления LinkButton представляет собой кнопку, которая выглядит как гиперссылка, но имеет поведение кнопки. Этот элемент управления внедряет в HTML-код страницы элементы JavaScript, необходимые для обработки событий кнопки, поэтому необходимо, чтобы клиентский браузер поддерживал JavaScript.

LinkButton может быть двух разновидностей: командная кнопка и кнопка перенаправления. Кнопка перенаправления не содержит сопоставленного с ней обработчика события и просто инициирует событие postback. Командная кнопка ведет себя как обычная кнопка и может иметь несколько обработчиков событий, сопоставленных с ней. Как и обычная кнопка, она может реагировать на щелчок левой кнопки мыши с помощью события LinkButton_Click, кроме того, возможна обработка события LinkButton_Command. В качестве аргументов обработчику события Command передаются значения свойств CommandName и CommandArgument. С помощью этого события становится возможным определение того, какая из нескольких расположенных на странице кнопок была нажата.

В следующем примере на странице размещены два элемента LinkButton.

<asp:LinkButton ID="LinkButton1" runat="server" CommandName=
 "Открыть" CommandArgument="c:\1.txt" OnCommand=
 "LinkButton_Command"> Открыть </asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server" CommandArgument=
 "http://www.yandex.ru" CommandName="Перейти" OnCommand=
 "LinkButton_Command"> Перейти</asp:LinkButton>

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

protected void LinkButton_Command(object sender, CommandEventArgs e)
{
  Response.Write("Команда: " + e.CommandName + ", параметр: " +
  e.CommandArgument);
}

Проверка вводимых данных

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

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

В идеале проверка вводимых данных должна осуществляться на стороне клиента, т. к. в этом случае он может сразу же, еще до отправки данных на сервер, получить уведомление о содержащихся ошибках. Однако, независимо от того, осуществлялась ли проверка вводимых данных на стороне клиента, необходимо осуществлять проверку и на стороне сервера.

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

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

Всего в ASP.NET 2.0 существует шесть элементов управления, предназначенных для осуществления проверки вводимых данных.

Допускается использование нескольких элементов управления проверкой ввода данных, связанных с одним элементом ввода данных.

С помощью верификаторов возможно проверить данные, вводимые в такие элементы управления, как TextBox, ListBox, DropDownList, RadioButtonList, HtmlInputText, HtmlTextArea, HtmlSelect.

При использовании валидаторов возможно применение автоматической проверки страницы при ее отправке на сервер или же вручную в коде. Наиболее распространен первый подход, при котором пользователь видит обычную страницу с элементами ввода данных, заполняет их и инициирует отправку страницы на сервер. Если отправка инициируется нажатием на кнопку (что бывает в большинстве случаев), проверка введенных данных зависит от значения свойства CausesValidation кнопки.

Проверка вводимых данных осуществляется при щелчке пользователя на определенных кнопках; например, при возникновении события изменения значения текущего элемента списка такого не происходит. Тем не менее верификаторы добавляют код для проверки вводимых данных на стороне клиента. В этом случае практически вся проверка может осуществляться на стороне клиента, что для клиента будет выглядеть идентично результатам проверки данных на стороне сервера. Однако при успешной проверке данных на стороне клиента на стороне сервера подобная проверка будет осуществлена повторно.

Все валидаторы образованы от класса BaseValidator и имеют следующие основные общие для всех свойства:

Самым простым валидатором является RequiredFieldValidator. Он предназначен для проверки того, введены ли данные в связанное с ним поле или нет. Это значит, что если в соответствующем текстовом поле ввода не будет символов, отличных от пробелов, возникнет ошибка ввода.

В качестве демонстрации работы данного валидатора создадим следующую страницу (рис 5.36):

Исходный код этой страницы выглядит таким образом:

<body>
  <form id="form1" runat="server">
  <div>
    <asp:Label ID="Label1" runat="server" Text="Имя"></asp:Label>
    <asp:TextBox ID="tb_Name" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1"
     runat="server" ErrorMessage="Необходимо ввести имя пользователя"
     ControlToValidate="tb_Name">*</asp:RequiredFieldValidator><br />
    <br />
    <asp:Button ID="btn_OK" runat="server" Text="OK" Width="89px" />
  </div>
  </form>
</body>

Результат выполнения данной страницы изображен на рис 5.37.

Если при нажатии на кнопку OK поле ввода имени пользователя будет пустым, рядом с полем ввода появится символ красной звездочки. Нетрудно заметить, что при этом обратная отсылка данных на сервер не производится. Можно изменить текст, который будет выводиться при возникновении ошибки. Для этого достаточно изменить строку свойства Text валидатора.

Элемент управления RangeValidator используется для проверки попадания введенного значения в диапазон значений валидатора. Основными свойствами данного валидатора являются MinimumValue, MaximumValue и Туре. Первые два определяют диапазон допустимых значений, type - тип данных, вводимых в элемент управления.

В качестве примера добавим к предыдущей странице элемент ввода данных о возрасте пользователя (в пределах от 18 до 70 лет), а также верификатор RangeValidator, который будет контролировать значение вводимого числа. Исходный код фрагмента страницы, содержащего необходимые элементы управления, а также валидатор представлены ниже.

<asp:Label ID="Label2" runat="server" Text="Возраст (от 18
     до 70)"></asp:Label> 
    <asp:TextBox ID="tb_Age" runat="server"></asp:TextBox>
    <asp:RangeValidator ID="RangeValidator1" runat="server"
     ControlToValidate="tb_Age"
      ErrorMessage="Возраст должен быть между 18 и 70 годами"
       MaximumValue="70" MinimumValue="18"
      Type="Integer">*
</asp:RangeValidator>

Валидатор CompareValidator сравнивает значение в одном элементе управления с фиксированным значением либо со значением в другом элементе управления. Основными свойствами данного валидатора являются ValueToCompare и ControlToCompare: первое из них задает элемент управления, значение которого должно контролироваться, второе - элемент управления, со значением которого будет сравниваться значение элемента управления, указанного в ValueToCompare. Кроме того, свойство Operator определяет тип операции сравнения.

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

<asp:Label ID="Label3" runat="server" Text="Пароль"></asp:Label>
<asp:TextBox ID="tb_Password1" runat="server" TextMode="Password">
 </asp:TextBox>
<asp:Label ID="Label4" runat="server" Text="Пароль
 (повторно)"></asp:Label>
<asp:TextBox ID="tb_Password2" runat="server" TextMode="Password">
 </asp:TextBox>
<asp:CompareValidator ID="CompareValidator1" runat="server"
 ControlToCompare="tb_Password1" ControlToValidate="tb_Password2"
 ErrorMessage="Введенные пароли не совпадают">*
 </asp:CompareValidator>

Стоит отметить, что у валидаторов существует возможность использования графических объектов вместо текста, выводимых на экран в случае возникновения ошибки. Так, в данном примере возможно использование изображения вместо символа "*". Для этого необходимо ввести в свойство Text валидатора тег <img>, с указанием графического файла, который необходимо отображать в случае возникновения ошибки, как показано в примере ниже.

<asp:CompareValidator ID="CompareValidator1" runat="server"
 ControlToCompare="tb_Password1" ControlToValidate="tb_Password2"
 ErrorMessage="Введенные пароли не совпадают">
 <img src="Images/Warning.png" /></asp:CompareValidator>

Результат показан на рис 5.38.

Валидатор RegularExpressionValidator позволяет сравнить вводимый текст с шаблоном, определенным в регулярном выражении, которое устанавливается в свойстве ValidationExpression. Регулярные выражения позволяют определять правила, задающие количество символов и их положение в строке. Наиболее часто используемые конструкции для регулярных выражений перечислены ниже.

Escape-последовательности символов, применяемые в регулярных выражениях, приведены далее.

Классы символов, определяющие множество символов, представлены ниже.

Квантификаторы, задающие шаблоны совпадений, перечислены ниже.

За более подробной информацией о регулярных выражениях можно обратиться к справочной системе MSDN, произведя поиск по ключевым словам "Regular Expression".

Ниже приведена таблица, содержащая примеры шаблонов наиболее популярных регулярных выражений. На сайте http://RegexLib.com можно найти гораздо больше примеров регулярных выражений.

В качестве примера добавим в предыдущую страницу поле для ввода адреса электронной почты, а также валидатор, проверяющий корректность его формата. Исходный код фрагмента страницы, содержащего элементы для ввода e-mail, а также валидатор приведены ниже.

<asp:Label ID="Label5" runat="server" Text="e-mail"></asp:Label>
<asp:TextBox ID="tb_Email" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1"
 runat="server" ControlToValidate="tb_Email" ErrorMessage="e-mail
 неверного формата" ValidationExpression="\S+@\S+\.\S+">*
 </asp:RegularExpressionValidator>

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

CustomValidator можно связать с элементом управления, предназначенным для ввода текста, как и в случае с другими валидаторами. Если проверка вводимых данных завершается неудачей, свойство Page.IsValid устанавливается в значение false (то же самое происходит и при проверке с помощью другого валидатора ).

Проверка вводимых данных с помощью CustomValidator происходит в специально создаваемых процедурах, которые могут быть реализованы на стороне клиента и на стороне сервера. При этом данные процедуры имеют одинаковое определение - они должны принимать два параметра: ссылку на элемент управления проверкой достоверности и целевой объект, содержащий проверяемое значение, которое доступно через свойство Value, а также свойство IsValid, с помощью которого возможно определить значение результата проверки.

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

Сначала необходимо добавить те элементы управления, которые будут использоваться для ввода данных, а также элемент CustomValidator. Исходный код этих элементов показан ниже.

<asp:Label ID="Label6" runat="server" Text=
 "Зарплата (кратна 10)"></asp:Label>
<asp:TextBox ID="tb_Salary" runat="server"></asp:TextBox>
<asp:CustomValidator ID="CustomValidator1" runat="server"
 ErrorMessage="размер зарплаты должен быть кратным 10"
 ClientValidationFunction="SalaryCheck"
 ControlToValidate="tb_Salary">*</asp:CustomValidator>

В качестве значений свойств ClientValidationFunction и ControlToValidate установлены соответственно значения SalaryCheck и tb_Salary. Первое соответствует имени функции, осуществляющей проверку вводимых данных, второе - ID элемента управления, осуществляющего ввод данных.

Функция SalaryCheck может быть написана на языке JavaScript следующим образом:

<script language="javascript">
function SalaryCheck(vc,control)
{
  control.IsValid=(control.Value%10==0);
}
</script>

При успешной проверке функцией SalaryCheck вводимых данных страница отправляется на сервер, и там запускается событие ServerValidate элемента CustomValidator. Это событие можно обработать, реализовав исходный код на языке C# или VB.NET. Серверная обработка вводимых данных должна осуществляться всегда, независимо от существования проверок на стороне клиента.

Для реализации серверной обработки вводимых данных о зарплате в рассматриваемом примере необходимо добавить обработчик события ServerValidate элемента CustomValidator. Ниже приведен возможный код такого обработчика.

protected void CustomValidator1_ServerValidate(object source,
ServerValidateEventArgs args)
  {
    try
    {
      args.IsValid = int.Parse(args.Value) % 10 == 0;
    }
    catch
    {
      args.IsValid = false;
    }
  }

Для отображения итоговой информации о результатах всех проверок вводимой информации необходимо использовать элемент управления ValidationSummary. Он выводит значение ErrorMessage каждого валидатора, для которого эта проверка завершилась неудачей. Итоговая информация может отображаться либо на странице, либо в отдельном окне. Для указания данного режима необходимо установить свойства ShowMessageBox и ShowSummary. При значении свойства ShowMessageBox=true сообщение выводится в отдельном окне, если же значение свойства ShowSummary=true - на странице. При отображении итоговой информации на странице возможно установить некоторые дополнительные параметры с помощью свойства DisplayMode, а также задать заголовок для итоговой информации с помощью свойства HeaderText. Пример использования элемента управления ValidationSummary на основе созданной ранее страницы приведен ниже.

Исходный код элемента ValidationSummary выглядит следующим образом:

<asp:ValidationSummary ID="ValidationSummary" runat="server"
DisplayMode="List" HeaderText="В результате заполнения полей воз-
никли следующие ошибки:" />

В результате использования данного элемента ошибки на странице выводятся, как показано на рис 5.39.

Доступ к верификаторам возможен и из программного кода. Все валидаторы при их размещении на странице помещаются в коллекцию Validators. Для последовательного обращения ко всем валидаторам можно организовать циклический перебор элементов этой коллекции.

Это можно продемонстрировать на следующем примере. Добавим на страницу четыре флажка, с помощью которых будем изменять текущие свойства валидаторов, отвечающие за проверку вводимых данных. Результат показан на рис 5.40.

Для работы данного примера необходимо создать обработчик события изменения значения флажка и ввести в него следующий код:

{
  foreach (BaseValidator v in Page.Validators)
  {
    v.Enabled = cb_EnableValidators.Checked;
    v.EnableClientScript = cb_ClientValidation.Checked;
  }
  ValidationSummary.ShowSummary = cb_ShowSummary.Checked;
  ValidationSummary.ShowMessageBox = cb_ShowMessageBox.Checked;
}

При реализации механизмов проверки вводимых данных возможно создать пользовательскую проверку. Для этого необходимо установить значение свойства CausesValidation кнопки, инициирующей метод postback равным false, затем создать обработчик события нажатия на эту кнопку, внутри которого и реализовать алгоритм проверки вводимых данных. Для того чтобы инициировать проверку введенных данных с помощью присутствующих на странице валидаторов, необходимо вызвать метод Validate() страницы. Данный метод устанавливает свойство IsValid страницы на основе данных валидаторов. По значению данного метода можно судить о существовании ошибок на странице.

В качестве примера создадим пользовательскую проверку вводимых данных на странице. Для этого установим свойство CausesValidation кнопки OK равным false. В обработчике события нажатия этой кнопки необходимо ввести следующий код:

protected void btn_OK_Click(object sender, EventArgs e)
{
  this.Validate();
  if (!this.IsValid)
  {
    string msg = "<b>В результате заполнения полей возникли
     следующие ошибки:</b><br/>";
    //Перебор валидаторов
    TextBox tb;
    foreach (BaseValidator bv in this.Validators)
    {
      if (!bv.IsValid)
      {
        msg += bv.ErrorMessage + "<br/>";
        tb = (TextBox)this.FindControl(bv.ControlToValidate);
        msg += "Ошибка ввода в следующем значении:";
        msg += tb.Text+"<br/>";
        tb.BackColor = System.Drawing.Color.Pink;
      }
    }
    lbl_Error.Text = msg;
  }
}

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

Пример результатов этой проверки приведен на рис 5.41.

Группировка элементов проверки ввода данных

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

В ASP.NET такое возможно благодаря группам проверки. Для создания группы проверки вводимых данных необходимо поместить элементы ввода и кнопку в одну группу проверки данных. Для этого необходимо установить одинаковое значение свойства ValidationGroup всех элементов управления, входящих в эту группу. В качестве значения свойства ValidationGroup используется строка, например Login, Registration и т. п.

Например, на следующей странице присутствуют две группы элементов управления для ввода данных, для которых реализована своя логика проверки. Первая группа, объединяющая созданные ранее элементы управления, предназначена для регистрации пользователя и называется registration. Вторая - предназначена для авторизации и называется authorisation. В результате для каждой группы выполняется своя логика проверки вводимых данных.

Комбинирование верификаторов

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

Для интерпретации сообщений об ошибках, генерируемых при использовании нескольких верификаторов с одним элементом управления, необходимо понимать правила проверки вводимых данных, принятые в ASP.NET. Так, все верификаторы за исключением RequiredFieldValidator приравнивают отсутствие введенного значения к вводу правильного значения. Таким образом, при отсутствии введенных данных генерируются одни сообщения (это проверяет RequireFieldValidator ) и другие, если введенное значение находится вне допустимого диапазона или имеет неверный формат.

Для добавления еще одного верификатора и связывания его с текущим полем ввода необходимо добавить его на страницу и установить для него свойства Text, ErrorMessage, ControlToValidate, ValidationGroup.

Краткие итоги

Вопросы построения пользовательского интерфейса являются одними из самых важных при создании Web-приложения. Процесс создания интерфейса отличается от аналогичного процесса при разработке традиционных Windows-приложений.

При создании пользовательского интерфейса Web-приложения необходимо использовать каскадные таблицы стилей для повышения его эффективности и гибкости.

Создание пользовательского интерфейса Web-приложения можно производить как путем редактирования исходного кода страницы, так и с использованием встроенного в Visual Studio визуального редактора, однако наиболее эффективным способом является применение комбинированного метода, при котором в некоторых режимах редактирование осуществляется визуальными средствами, а в других - с помощью редактирования исходного кода.

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

В состав ASP.NET входит множество различных элементов управления, предназначенных для решения задач организации интерфейса пользователя любой сложности. Одной из основных задач при разработке Web-приложения является организация работы с текстовой информацией. Для этого существуют такие элементы, как Label, TextBox, Table и другие, предоставляющие разработчику большой выбор возможностей организации обработки, вывода на страницу и ввода текстовой информации. При создании пользовательского интерфейса Web-приложения необходимо использовать каскадные таблицы стилей. Visual Studio содержит визуальный редактор стилей, значительно облегчающий их создание.

Содержимое серверных элементов управления может динамически изменяться. Организация этого возможна путем взаимодействия с серверным элементом из программного кода приложения. В реальных приложениях часто возникает необходимость привязки значений элемента управления к какому-либо источнику данных. Таким источником могут быть как таблицы базы данных, так и массивы либо свойства объектов или выражения, объединяющие несколько элементов. Для осуществления такой привязки необходимо выполнить метод DataBind() для всей страницы Web-приложения, а также использовать выражение привязки данных внутри элемента управления.

В ASP.NET существует возможность простой организации и применения карты изображения, для чего можно использовать элемент ImageMap. При необходимости вывода на экран информации, содержащей форматирование с использованием тегов HTML, необходимо применять элемент Literal.

Важной составляющей любого ввода данных является проверка вводимых данных. Такая проверка должна осуществляться как на клиентском компьютере, так и на сервере. Клиентская проверка осуществляется за счет использования программного кода, написанного на языке JavaScript. В ASP.NET реализован удобный механизм организации такой проверки за счет применения верификаторов - специальных элементов управления, размещаемых на Web-странице и позволяющих осуществлять как клиентскую, так и серверную проверку вводимых данных.