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

Использование 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.

Рис. 5.33. Использование Literal для отображения информации в режиме PassThrough

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

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

Рис. 5.34. Использование Literal для отображения информации в режиме Encode

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

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

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

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

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

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

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

   
   Рис. 5.35. Пример изображения группы элементов
   Следует отметить, что при установке свойства GroupingText становится невозможным использование полос прокрутки.
3. С помощью 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);
}