Управление HTML-элементами в ASP.NET
Упражнение 5. Элемент управления HTMLInputButton
Элемент управления HTMLInputButton позволяет программировать HTML-теги
Эти теги используются для отображения функциональных кнопок в документах HTML. Они должны входить в состав HTML-формы и, как только пользователь нажимает кнопку отправки формы, данные заданным в атрибуте формы методом ( GET, POST, SOAP ) отсылаются на сервер для обработки.
Разработаем активную ASP.NET-страницу, в которой подтверждаются права доступа пользователя на основании его имени и пароля (учетной записи). Страницу для разнообразия создадим на основе HTML-файла с совмещенным кодом, где код C# вставим прямо в саму страницу.
-
Через
контекстное меню в панели Solution Explorer,
вызванное для узла всего проекта, добавьте
командой Add New Item новую HTML-страницу
с именем HTMLInputButton.aspx выбрав
шаблон HTML Page
-
Сделайте
новую страницу стартовой для удобства отладки
через контекстное меню панели Solution Explorer командой Set As Start Page
Мы видим, что мастер создал заготовку интерфейсной части для обычной статической страницы. Наша задача - превратить эту страницу в активную серверную, причем код на C# будет размещен на этой же странице, а не в отделенном файле, как это делалось ранее.
-
Отредактируйте
интерфейс пользователя на странице HTMLInputButton.aspx следующим
образом (в том числе добавьте директиву @ Page в
начало файла)
<%@ Page Language="C#" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>
<h1 align="center">
Управление элементом HTMLInputButton</h1>
<center>
<form id="form1" runat="server" method="post">
<h2>
<font color="red">
<samp id="sampID" runat="server">
Подменяемый текст</samp>
</font>
</h2>
<p>
</p>
Имя пользователя:
<input id="Username" runat="server" type="text" value="DefaultUser" />
<p>
</p>
Пароль:
<input id="Password" runat="server" type="password">
<p>
</p>
<input id="SubmitButton" runat="server"
type="submit" value="Submit Query" />
<input id="ResetButton" runat="server" type="button" value="Reset" />
</form>
<hr>
<a id="PrevLink" runat="server">Назад</a>
<a id="NextLink" runat="server">Вперед</a>
</center>
</body>
</html>
Листинг
3.10.
Код интерфейсной части страницы HTMLInputButton.aspx
Обратите внимание, что все HTML-элементы, которыми мы хотим программно управлять, помечены атрибутом runat="server", то есть будут активно обрабатываться средой исполнения ASP.NET.
Визуальное представление страницы HTMLInputButton.aspx в броузере клиента будет таким
-
Перейдите
в режим Design редактирования страницы
и двойным щелчком мыши на пустом месте Web-формы (вне интерфейсных
элементов управления) создайте блок кода и заготовку обработчика
события Load на
той же самой интерфейсной странице
-
Подобным
образом создайте обработчики для кнопок SubmitButton и ResetButton,
и заполните все обработчики в кодовой части страницы как
показано ниже
<script runat="server">
static bool flag = true;
protected void Page_Load(object sender, EventArgs e)
{
sampID.InnerText = "Введите учетную запись для регистрации";
Username.Size = 20;
Password.Size = 10;
Username.MaxLength = 30;
Password.MaxLength = 30;
PrevLink.HRef = "HTMLImage.aspx";
NextLink.HRef = "HTMLInputCheckBox.aspx";
}
protected void SubmitButton_ServerClick(object sender, EventArgs e)
{
if (Username.Value == "Иванов"
&& Password.Value.ToUpper() == "SA")
sampID.InnerText =
"Приветствуем Вас, наш дорогой "
+ Username.Value.ToUpper()
+ ", как зарегистрированного Пользователя!!!";
else
sampID.InnerText =
"Уходите! Вам не разрешено пользоваться этим ресурсом!";
}
protected void ResetButton_ServerClick(object sender, EventArgs e)
{
sampID.InnerText = "Введите учетную запись для регистрации";
Username.Value = "DefaultUser";
}
</script>
Листинг
3.11.
Скриптовый блок C# страницы HTMLInputButton.aspx
-
Запустите
приложение и проверьте его работоспособность. Попытайтесь
разобраться в коде
В данном упражнении мы несколько обычных HTML-элементов интерфейсной части страницы превратили в серверные, дополнив их атрибутом runat="server" и уникальным идентификатором id. Такое действие равносильно созданию экземпляров классов поддержки этих элементов с именами, указанными в атрибутах id. Это дало возможность управлять объектами через их обработчики событий, которые выполняются перед генерацией HTML-отклика активной страницы (рендерингом), и формировать нужный HTML- и JavaScript-код, посылаемый клиенту.
Главный вывод здесь такой: когда в серверной странице имеется чистый HTML-код элементов, то по запросу он не будет обрабатываться средой исполнения, а в неизменном виде будет отправлен клиенту. Но стоит вставить внутрь дескриптора HTML-элемента атрибут runat="server" и идентификатор id, то это равносильно созданию экземпляра поддерживающего этот элемент класса, и функциональностью такого экземпляра уже можно управлять в обработчиках событий.
Нам, как программистам, для управления таким HTML-элементом, превращенным в активный, не обязательно знать, какой поддерживающий класс стоит за ним. Мы будем иметь дело только с id этого элемента и при программировании подсказчик кода IntelliSense покажет доступные свойства и события. Хотя, при наведении курсора на имя объекта в кодовой части страницы всплывающая подсказка сообщит имя поддерживающего этот объект класса
Упражнение 6. Элемент управления HTMLInputCheckBox
Класс HTMLInputCheckBox позволяет программировать HTML-тег <input type="CheckBox">. Этот тег используется в HTML-документах для моделирования работы флажка, который может быть отмеченым или неотмеченным. Разработаем страницу, в которой будем проверять, отмечен флажок или нет.
-
Через
меню оболочки Website/Add New Item добавьте
к проекту новую страницу с отделенным кодом и именем HTMLInputCheckBox.aspx
-
Сформируйте
интерфейсную часть страницы HTMLInputCheckBox.aspx,
чтобы она выглядела так
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="HTMLInputCheckBox.aspx.cs"
Inherits="HTMLInputCheckBox" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>HTMLInputCheckBox</title>
</head>
<body>
<center>
<h1>
Элемент управления HTMLInputCheckBox
</h1>
<p id="StateCheck" runat="server">
</p>
<form id="form1" runat="server" method="post">
<p>
Сделайте свой выбор:
<input id="checkBox" runat="server" type="CheckBox">
</p>
<p>
<input id="SubmitButton" runat="server" type="submit"
value="Submit Query">
</p>
</form>
<hr>
<a id="PrevLink" runat="server">Назад</a>
<a id="NextLink" runat="server">Вперед</a>
</center>
</body>
</html>
Листинг
3.12.
Интерфейсная часть страницы HTMLInputCheckBox.aspx
-
Двойным
щелчком на кнопке SubmitButton в режиме Design создайте
для нее обработчик
-
Сформируйте
код C# управляющей части CodeBehind страницы в файле HTMLInputCheckBox.aspx.cs,
чтобы он выглядел так
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class HTMLInputCheckBox : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
PrevLink.HRef = "HTMLInputButton.aspx";
NextLink.HRef = "HTMLInputFile.aspx";
SubmitButton.Value = "Показать состояние CheckBox";
}
protected void SubmitButton_ServerClick(object sender, EventArgs e)
{
if (checkBox.Checked)
StateCheck.InnerHtml = "<h2>CheckBox включен</h2>";
else
StateCheck.InnerHtml = "<h2>CheckBox выключен</h2>";
}
}
Листинг
3.13.
Код управляющей части в файле HTMLInputCheckBox.aspx.cs
-
Сделайте
новую страницу стартовой и постройте проект
Результат внешне будет примерно таким
