Управление HTML-элементами в ASP.NET
Упражнение 1. Элемент управления HTMLAnchor
-
В панели
Solution Explorer измените имя страницы
с Default.aspx на
HTMLAnchor.aspx -
На
открытой странице HTMLAnchor.aspx Web-формы
в самом низу слева щелкните по кнопке Source,
чтобы перейти из режима визуального проектирования в режим
HTML-редактирования
-
Удалите
код, который выделен
ниже красным цветом
(он нам пока не нужен)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HTMLAnchor.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
Листинг
3.1.
Частичное удаление блока кода файла HTMLAnchor.aspx
-
Выполните
проект и в строке состояния запущенного окна броузера убедитесь,
что стоит результат Done - это означает,
что ошибок в коде не обнаружено.
-
Отредактируйте
HTML-код интерфейсной части страницы так, как показано ниже
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="HTMLAnchor.aspx.cs" Inherits="HTMLAnchor" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Страница для испытания HTMLAnchor</title>
</head>
<body>
<h1 align="center">
Пример применения элемента управления HTMLAnchor</h1>
<p>
</p>
<a id="PageLink" runat="server">Перейти к следующей странице</a>
</body>
</html>
Листинг
3.2.
Код файла HTMLAnchor.aspx
-
Через
меню оболочки View выполните команду Code (или через контекстное
меню редактора команда View Code) и перейдите
в режим редактирования сопровождающего ( CodeBehind ) файла
на C# с именем HTMLAnchor.aspx.cs
Директивы страницы - это команды, которые использует компилятор при обработке страниц. Обратите внимание на первую строку кода в последнем листинге, в которой находится директива @Page страницы. Она устанавливает общие свойства страницы, в том числе в ней находится свойство CodeFile с установленным значением HTMLAnchor.aspx.cs. Это свойство указывает, что страница обслуживается кодом C#, размещенным в сопровождающем файле HTMLAnchor.aspx.cs.
-
Внесите
в файл кодовой части страницы добавления, показанные ниже
using System;
using System.Data;
using System.Configuration;
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 HTMLAnchor : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
PageLink.HRef = "~/HTMLButton.aspx";
}
}
Листинг
3.3.
Добавления в файл HTMLAnchor.aspx.cs кодовой части
Обратите внимание, что знак '~' в URL-адресе ссылки обозначает корневой узел проекта сайта.
-
Постройте
и выполните приложение. Должен получиться такой результат
-
Наведите
курсор на ссылку и убедитесь в строке состояния, что ссылка
показывает полный адрес URL. Причем, к элементу тега ссылки
мы обращаемся как к объекту по его идентификатору. Если щелкнуть
по ссылке, то броузер выдаст ошибку с сообщением "The resource
cannot be found" - "Ресурс не может быть найден",
поскольку мы заложили ссылку на страницу, к созданию которой
сейчас только приступим.
Таким образом, стандартный тег ссылки, используемый в старых HTML-документах, мы превратили в активный объект, с которым можно выполнять нужные манипуляции в сопровождающем страницу коде C#.
Упражнение 2. Элемент управления HTMLButton
Приступим к демонстрации управления кнопкой как объектом. Чаще всего кнопки применяются в составе HTML-форм (теги <form>...</form> и предназначены для отправки данных на сервер или восстановления значений полей данных в исходное состояние. В традиционном HTML-коде кнопки по их функциональному назначению бывают трех типов:
- Button - кнопка без закрепленной функциональности
- Submit - отправить данные полей на сервер
- Reset - восстановить начальные значения полей данных формы
-
Перейдите
в панель Solution Explorer и вызовите для
нее контекстное меню, щелкнув правой кнопкой мыши на корневом
узле проекта. Выполните команду Add New Item/Web Form,
чтобы создать новую ASP.NET-страницу с именем HTMLButton.aspx
Обратите внимание на включенный флажок "Place code in separate file" - разместить код в отдельном файле, который требует, чтобы мастер оболочки создал наряду с интерфейсной страницей еще и кодовый файл.
-
Отредактируйте
интерфейсную часть странице следующим образом
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="HTMLButton.aspx.cs" Inherits="HTMLButton" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Страница для испытания HTMLButton</title>
</head>
<body>
<h1 align="center">
Пример применения элемента управления HTMLButton</h1>
<center>
<form id="Form1" runat="server">
<br />
<samp id="sampID" runat="server">
Текстовая метка по умолчанию</samp>
<br />
<br />
<input id="Message1" runat="server" type="button" value="Текст1">
<input id="Message2" runat="server" type="button" value="Текст2">
</form>
<a id="PrevLink" runat="server">Назад</a>
<a id="NextLink" runat="server">Вперед</a>
</center>
</body>
</html>
Листинг
3.4.
Измененный файл HTMLButton.aspx
-
Перейдите
в режим дизайна страницы HTMLButton.aspx и
двойным щелчком на каждой кнопке создайте для них обработчики
в сопровождающем кодовом файле HTMLButton.aspx.cs
-
Отредактируйте
файл HTMLButton.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.HtmlControls;
public partial class HTMLButton : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
NextLink.HRef = "~/HTMLGeneric.aspx";
PrevLink.HRef = "~/HTMLAnchor.aspx";
}
protected void Message1_ServerClick(object sender, EventArgs e)
{
sampID.InnerHtml = "Это строка текста номер 1";
}
protected void Message2_ServerClick(object sender, EventArgs e)
{
sampID.InnerHtml = "А вот это другой текст номер 2";
}
}
Листинг
3.5.
Файл кодовой части страницы HTMLButton.aspx
-
Постройте
и выполните страницу, чтобы убедиться, что она работает.
Неразрешенная ссылка "Вперед" отправляет на еще не созданную
страницу, построением которой мы займемся сейчас. Выполненная
страница должна выглядеть так
Обратите внимание, что при первой загрузке каждой новой страницы происходит задержка выполнения, но при повторных переходах по ссылкам задержки нет. При загрузке новой страницы среда выполнения CLR производит компиляцию с промежуточного языка MSIL в машинный язык, а при повторных переходах по ссылкам срабатывает кэш IIS-сервера.
Обратите внимание еще вот на что. Если не щелкать по кнопкам страницы HTMLButton.aspx, а после ее открытия броузером воспользоваться кнопкой броузера Back (вверху слева), то перейдем сразу на предыдущую страницу HTMLAnchor.aspx. Если же прежде пощелкать по нашим кнопкам страницы HTMLButton.aspx, то количество переходов по кнопке Back броузера увеличивается. Отсюда следует, что поскольку броузер запоминает историю (объект History) для каждой новой страницы, то при каждом щелчке по кнопкам управления с сервера посылается совершенно новая страница.