Принципы разработки пользовательского интерфейса интернет-приложения
Использование Literal и HiddenField
Элемент управления Literal представляет собой один из способов вывода информации на экран. Literal можно использовать в качестве контейнера для размещения HTML-элементов на странице. Чаще всего его используют для динамического добавления текста. Схожие возможности по добавлению текста предоставляет элемент Label, Literal отличается от него тем, что не добавляет дополнительных HTML-элементов к тексту. Label, например, размещает текст внутри тега <span>, Panel - внутри <div> и т. д. Размещение элементов внутри тегов создает возможность для поддержки ими стилей оформления, Literal же не имеет такой возможности. Рекомендуется задействовать элемент Literal в том случае, когда необходимо размещать текст на странице без применения дополнительной разметки, либо в том случае, когда существует HTML-текст (например, хранящийся в файле или базе данных), содержащий форматирование с использованием тегов, и его необходимо вывести на экран.
Самым важным свойством элемента управления Literal является Mode. Существуют три значения этого свойства:
Transform | Любая разметка, добавляемая к элементу управления, преобразуется таким образом, чтобы максимально удовлетворять особенностям протокола браузера, запрашивающего страницу. |
PassThrough | Добавляемая к элементу управления разметка передается браузеру как есть, без каких-либо модификаций. |
Encode | Добавляемая к элементу управления разметка декодируется с использованием метода HtmlEncode, преобразующего HTML-представление страницы в текст. |
Рассмотрим, как при использовании следующего примера элемента 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.
- С помощью Panel можно создать область группы с заголовком. Для этого необходимо ввести в свойство GroupingText строку заголовка группы. Пример изображения группы, получаемой в этом случае, приведен на рис. 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> <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> </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); }