Файлы к лабораторной работе Вы можете скачать здесь.
Здесь мы займемся вопросами программирования
типовых HTML-тегов, которые относятся к элементам пользовательского
интерфейса на обычных HTML-страницах. Мы рассмотрим, как
из
Элементы управления обеспечивают разработчику
Web-страницы удобный
Серверными элементы управления называются потому, что они тесно взаимодействуют с кодом, реализующим бизнес-логику (функциональность выполняемого кода) самого приложения, размещаемого на стороне сервера. Различают несколько групп серверных элементов управления:
В этой работе мы познакомимся с серверными HTML-элементами
управления. В библиотеке .NET Framework все пользовательские
(интерфейсные) System.Web.UI.Control,
а значит обладают рядом общих свойств и методов, определяющих
их поведение.
Элемент управления - это программный объект, отображаемый
средой выполнения как часть графического элемента пользователя.
Имея
Подобно локальным приложениям
Windows, свойствами элементов можно управлять
из
Почти все элементы свитка HTML панели runat="server".
такая технология обеспечит сохранение возможности для HTML-элементов
вначале применять привычные инструменты при разработки Web-страниц,
например,
Классы всех System.Web.UI.HTMLControls.HTMLControl и
находятся в пространстве имен System.Web.UI.HtmlControls.
Любой HTML-тег можно превратить в элемент управления, добавив
атрибут runat="server".
Так мы сообщаем ASP.NET-процессору сервера, что код должен быть
обработан им перед отправкой страницы на
runat="server" или runat=server name использовать id Давайте создадим последовательный набор связанных ссылками
Web-страниц в формате ASP.NET, на каждой из которых будем размещать
по одному
Создайте
новый проект C# приложения ASP.NET в выбранном месте и задайте
ему имя HTMLControls
После нажатия кнопки OK мастер создаст заготовку ASP.NET-приложения.
В панели
На
открытой странице 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>
Выполните
проект и в строке состояния запущенного окна 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>
Через
меню оболочки 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";
}
}
Обратите внимание, что знак '~' в URL-адресе ссылки обозначает корневой узел проекта сайта.
Постройте
и выполните приложение. Должен получиться такой результат
Наведите
курсор на ссылку и убедитесь в строке состояния, что ссылка
показывает полный адрес URL. Причем, к элементу тега ссылки
мы обращаемся как к объекту по его идентификатору. Если щелкнуть
по ссылке, то Таким образом, стандартный тег ссылки, используемый в старых
HTML-документах, мы превратили в
Приступим к демонстрации управления кнопкой как объектом.
Чаще всего кнопки применяются в составе <form>...</form>
и предназначены для
Перейдите
в панель Add New Item/Web Form,
чтобы создать новую ASP.NET-страницу с именем HTMLButton.aspx
Обратите внимание на включенный флажок "Place code
in - разместить код в отдельном файле, который требует,
чтобы мастер оболочки создал наряду с интерфейсной страницей
еще и кодовый файл.
Отредактируйте
интерфейсную часть странице следующим образом<%@ 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">
nbsp;nbsp;nbsp;
<input id="Message2" runat="server" type="button" value="Текст2">
</form>
<a id="PrevLink" runat="server">Назад</a>
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;
<a id="NextLink" runat="server">Вперед</a>
</center>
</body>
</html>
Перейдите
в режим дизайна страницы 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";
}
}
Постройте
и выполните страницу, чтобы убедиться, что она работает.
Неразрешенная ссылка "Вперед" отправляет на еще не созданную
страницу, построением которой мы займемся сейчас. Выполненная
страница должна выглядеть так
Обратите внимание, что при первой загрузке каждой новой страницы
происходит задержка выполнения, но при повторных переходах
по ссылкам задержки нет. При загрузке новой страницы среда
выполнения
Обратите внимание еще вот на что. Если не щелкать по кнопкам
страницы HTMLButton.aspx,
а после ее открытия
В эту группу включены элементы общего характера, которые не
являются явно выраженными элементами управления как таковыми.
Они отсутствуют в свитке HTML панели
Технология такая: в объявление тега вставляют идентификатор,
а в коде поддержки обращаются к его свойствам через параметр
Добавьте
к проекту еще одну ASP.NET-страницу с именем HTMLGeneric.aspx так,
как мы это делали для создания предыдущей страницы HTMLButton.aspxОткройте
интерфейсный файл HTMLGeneric.aspx и
переведите его в режим редактирования SourceУдалите
весь автоматически сгенерированный текст и введите код,
приведенный ниже<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="HTMLGeneric.aspx.cs" Inherits="HTMLGeneric" %>
<html>
<head>
<title>Страница для испытания HTMLGenericControl</title>
</head>
<body id="BodyID" runat="server">
<h1 align="center">
Пример программирования элементов класса HTMLGenericControl</h1>
<center>
<form id="form1" runat="server">
<p>
Блок изменения цвета фона страницы</p>
<p>
<samp>
Цвет фона:
</samp>
<select id="PageColor" runat="server">
<option selected value="#FFFFFF">Белый</option>
<option value="#FF0000">Красный</option>
<option value="#00FF00">Зеленый</option>
<option value="#0000FF">Синий</option>
<option value="#9900FF">Фиолетовый</option>
<option value="#FFFF00">Желтый</option>
<option value="#CCCCCC">Серый</option>
</select>
</p>
<p>
<input id="ColorButton" runat="server" type="submit" value="Изменить цвет фона" />
</p>
<hr>
<font id="FontID" runat="server">Текстовая метка переменного размера</font>
<p>
<samp>
Размер текста:
</samp>
<select id="FontSize" runat="server" name="FontSize">
<option selected value="1">Small</option>
<option value="2">Medium</option>
<option value="4">Large</option>
<option value="5">Extra Large</option>
</select>
</p>
<p>
<input id="SizeButton" runat="server" type="submit" value="Изменить размер шрифта" />
</p>
<hr>
<p>
Программирование тега параграфа</p>
<p id="Text0" runat="server">
Нажмите на кнопку и сервер добавит две новых строки</p>
<p id="Text1" runat="server">
</p>
<p id="Text2" runat="server">
</p>
<p>
<input id="AddButton" runat="server" type="submit" value="Добавить строки" />
</p>
</form>
<hr>
<a id="PrevLink" runat="server">Назад</a>
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;
<a id="NextLink" runat="server">Вперед</a>
</center>
</body>
</html>
Переведите
страницу HTMLGeneric.aspx в режим Design и
последовательно двойным щелчком на кнопках пользовательского
интерфейса создайте для них обработчикиОткройте
файл HTMLGeneric.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 HTMLGeneric : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
NextLink.HRef = "~/HTMLImage.aspx";
PrevLink.HRef = "~/HTMLButton.aspx";
}
static private bool textFlag = false;
protected void ColorButton_ServerClick(object sender, EventArgs e)
{
BodyID.Attributes["bgcolor"] = PageColor.Value;
}
protected void SizeButton_ServerClick(object sender, EventArgs e)
{
FontID.Attributes["size"] = FontSize.Value;
}
protected void AddButton_ServerClick(object sender, EventArgs e)
{
if (!textFlag)
{
Text0.InnerHtml = "Нажмите на кнопку и сервер уберет две новых строки";
Text1.InnerHtml = "<h1><font color='red'>Привет студентам от Снеткова В.М.!!!</font></h1>";
Text2.InnerHtml = "<h1><font color='blue'>Идите! И Вы победите!!!</font></h1>";
AddButton.Value = "Убрать строки";
textFlag = true;
}
else
{
Text0.InnerHtml = "Нажмите на кнопку и сервер добавит две новых строки";
Text1.InnerHtml = "";
Text2.InnerHtml = "";
AddButton.Value = "Добавить строки";
textFlag = false;
}
}
}
Войдите
в панель Set As Start Page, чтобы эта страница запускалась при
компиляции первой (для удобства отладки)Постройте
проект и проверьте функциональность разработанной страницыДолжно получиться примерно следующее
Элемент управления HTMLImage позволяет программировать HTML-тег <img>. Этот тег используется для добавления изображений в документы
HTML. В качестве примера программирования этого тега разработаем
ASP.NET-страницу, при запуске которой будет выводиться базовое
изображение. Затем из раскрывающегося списка это изображение
можно будет сменить на другое, заранее нами заготовленное.
Логику управления рисунками страницы разместим в отделенном кодовом файле CodeBehind, в котором на основе предпочтений пользователя будем устанавливать атрибуты элемента управления рисунком. Одно из свойств будем задавать так, чтобы при наведении мыши на рисунок пользователю выдавался соответствующий заголовок.
Добавьте
к существующему проекту еще одну ASP.NET-страницу с именем
HTMLImage.aspx через
контекстное меню в панели Сделайте
ее стартовой для удобства отладки, как мы это делали
с предыдущей страницейДобавьте
к корневому узлу проекта каталог Image командой
контекстного меню New Создайте
три рисунка Рисунки можно взять в каталоге Source данной работы. Формат рисунков может быть и иным или они могут размещаться и в другом месте логического каталога, но тогда необходимо скорректировать соответствующий код страницы, изменив расширения файлов и прописав пути размещения.
Откорректируйте
страницу HTMLImage.aspx так, как
показано ниже<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="HTMLImage.aspx.cs" Inherits="HTMLImage" %>
<html>
<head>
<title>Программирование элемента HTMLImage</title>
</head>
<body>
<center>
<form id="Form1" runat="server" method="post">
<h2 align="center">
Управление элементом HTMLImage</h2>
<font color="red">
<p id="PictureTitle" runat="server" />
</font>
<img id="Image" runat="server" />
<p>
</p>
<samp>
Выберите рисунок:
</samp>
<select id="SelectPicture" runat="server" >
<option selected value="1">1. Я любимый!</option>
<option value="2">2. Петрович дорогой!</option>
<option value="3">3. Друг сердечный!</option>
</select>
<p>
<input id="PictureButton" runat="server" type="submit"
value="Загрузить рисунок" />
</p>
</form>
<hr>
<a id="PrevLink" runat="server">Назад</a>
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;
<a id="NextLink" runat="server">Вперед</a>
</center>
</body>
</html>
В режиме Design двойным щелчком на кнопке PictureButton создайте
для нее обработчик и откорректируйте файл отделенного кода HTMLImage.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 HTMLImage : System.Web.UI.Page
{
// Должно быть соотношение 3/2, но жалко резать рисунки!!!
const int WIDTH = 500, HEIGHT = 375;
string[] messages = {
"<h2>Это - Я любимый!!!</h2>",
"<h2>Это - Петрович дорогой!!!</h2>",
"<h2>А это - Друг сердечный!!!</h2>"
};
protected void Page_Load(object sender, EventArgs e)
{
PictureTitle.InnerHtml = messages[0];
Image.Width = WIDTH;
Image.Height = HEIGHT;
Image.Border = 1;
Image.Src = "Images/image1.png";
PrevLink.HRef = "HTMLGeneric.aspx";
NextLink.HRef = "~/HTMLInputButton.aspx";
}
protected void PictureButton_ServerClick(object sender, EventArgs e)
{
string pictureChoice = SelectPicture.Value;
switch (pictureChoice)
{
case "1":
PictureTitle.InnerHtml = messages[0];
Image.Src = "Images/image1.png";
break;
case "2":
PictureTitle.InnerHtml = messages[1];
Image.Src = "~/Images/image2.png";
break;
default:// За все отвечает мент
PictureTitle.InnerHtml = messages[2];
Image.Src = "~/Images/image3.png";
break;// Нужно, требует синтаксис
}
}
}
Постройте
проект и проверьте функциональность разработанной страницы.
Должно получиться примерно следующее
Элемент управления HTMLInputButton позволяет программировать
HTML-теги
Эти теги используются для отображения функциональных кнопок
в документах HTML. Они должны входить в состав GET, ) отсылаются
на сервер для обработки.
Разработаем активную ASP.NET-страницу, в которой подтверждаются права доступа пользователя на основании его имени и пароля (учетной записи). Страницу для разнообразия создадим на основе HTML-файла с совмещенным кодом, где код C# вставим прямо в саму страницу.
Через
контекстное меню в панели Add New Item новую HTML-страницу
с именем HTMLInputButton.aspx выбрав
шаблон HTML Page
Сделайте
новую страницу стартовой для удобства отладки
через контекстное меню панели 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" />
nbsp;nbsp;nbsp;
<input id="ResetButton" runat="server" type="button" value="Reset" />
</form>
<hr>
<a id="PrevLink" runat="server">Назад</a>
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;
<a id="NextLink" runat="server">Вперед</a>
</center>
</body>
</html>
Обратите внимание, что все HTML-элементы, которыми мы хотим
программно управлять, помечены атрибутом runat="server",
то есть будут активно обрабатываться средой исполнения ASP.NET.
@ Page как
для активной страницы, то редактор все равно будет воспринимать
ее статической и выдавать ошибки. Поэтому, после написания
директивы @ Page страницу нужно закрыть, а затем вновь
открыть, чтобы редактор настроился на код активной страницы.Визуальное представление страницы 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>
Запустите
приложение и проверьте его работоспособность. Попытайтесь
разобраться в кодеВ данном упражнении мы несколько обычных HTML-элементов интерфейсной
части страницы превратили в серверные, дополнив их атрибутом runat="server" и
уникальным идентификатором id. Такое действие
равносильно созданию экземпляров классов поддержки этих элементов
с именами, указанными в атрибутах id. Это
дало возможность управлять объектами через их обработчики событий,
которые выполняются перед генерацией HTML-отклика активной
страницы (рендерингом), и формировать нужный HTML- и JavaScript-код,
посылаемый клиенту.
Главный вывод здесь такой: когда в серверной странице имеется
чистый HTML-код элементов, то по запросу он не будет обрабатываться
средой исполнения, а в неизменном виде будет отправлен клиенту.
Но стоит вставить внутрь дескриптора HTML-элемента атрибут runat="server" и
идентификатор id, то это равносильно созданию
экземпляра поддерживающего этот элемент класса, и функциональностью
такого экземпляра уже можно управлять в обработчиках событий.
Нам, как программистам, для управления таким HTML-элементом,
превращенным в активный, не обязательно знать, какой поддерживающий
класс стоит за ним. Мы будем иметь дело только с id этого
элемента и при программировании подсказчик кода
Класс HTMLInputCheckBox позволяет программировать HTML-тег <input type=" Этот
тег используется в 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>
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;
<a id="NextLink" runat="server">Вперед</a>
</center>
</body>
</html>
Двойным
щелчком на кнопке 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>";
}
}
Сделайте
новую страницу стартовой и постройте проектРезультат внешне будет примерно таким
Класс HTMLInputFile позволяет программировать
HTML-тег <input type="file">. Этот тег используется для
работы с данными файла в пределах формы HTML. В теге <form> мы
будем использовать атрибут enctype="multipart/form-data",
без которого Web-страница выдаст ошибку. В нашем сценарии при
нажатии кнопки страница будет загружать файл на сервер
и выдаст сообщение при успешном завершении, в противном случае
она должна отображать сообщение об ошибках, указывающих на
причину сбоя.
Встретив тег <input type="file">,
Добавьте
к проекту новую страницу (шаблон Web Form)
с именем HTMLInputFile.aspx и
файлом отделенного кода, назначьте ее стартовой для удобства
отладкиПерейти
из режима Design визуального проектирования
в режим Source (то же самое можно сделать
через меню оболочки View/Code или контекстное
меню редактора страницы командой View Code )Отредактируйте
интерфейсную часть страницы HTMLInputFile.aspx так<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="HTMLInputFile.aspx.cs" Inherits="HTMLInputFile" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Элемент управления HTMLInputFile</title>
</head>
<body>
<center>
<h1>
Элемент управления HTMLInputFile</h1>
<font color="#ff0000">
<h2 id="State" runat="server" />
</font>
<form id="form1" runat="server"
enctype="multipart/form-data" method="post">
Имя отсылаемого файла:nbsp; nbsp;
<input id="FileName" runat="server"
maxlength="30" type="file">
<p />
Переслать под именем (без пути):nbsp; nbsp;
<input id="Text" runat="server" type="text">
<p />
<input id="TransferFile" runat="server"
type="button" value="Передать файл">
</form>
<hr>
<a id="PrevLink" runat="server">Назад</a>
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;
<a id="NextLink" runat="server">Вперед</a>
</center>
</body>
</html>
Перейдите
в режим дизайна страницы HTMLInputFile.aspx и
двойным щелчком на кнопке TransferFile создайте обработчик
в ассоциированном файле поддержки HTMLInputFile.aspx.csОтредактируйте
файл поддержки HTMLInputFile.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 HTMLInputFile : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
PrevLink.HRef = "HTMLInputCheckBox.aspx";
NextLink.HRef = "HTMLInputHidden.aspx";
}
protected void TransferFile_ServerClick(object sender, EventArgs e)
{
if (FileName.Value == "")
{
State.InnerHtml = "Выберите отсылаемый файл";
return;
}
else if (Text.Value == "")
{
State.InnerHtml = "Введите имя целевого файла";
return;
}
if (FileName.PostedFile != null)
{
try
{
FileName.PostedFile.SaveAs("c:\ emp\\" + Text.Value);
State.InnerHtml = "Файл c:\ emp\\" +
Text.Value + " передан успешно на Web server";
}
catch (Exception exc)
{
State.InnerHtml = "Ошибка записи файла c:\ emp\\" +
Text.Value + "<br>" + exc.ToString();
}
}
}
}
Постройте
проект. Результат внешне будет примерно таким
Проверьте,
действительно ли в целевом каталоге C:\Этот класс позволяет программировать HTML-тег <input
type=" который используется
для скрытой передачи данных на сервер. Разработаем страницу,
в которой сервер будет возвращать содержимое тега в открытом
виде. Код управления объектом на C# разместим на странице
вместе с интерфейсной частью.
Выполните
команду меню оболочки для вызова мастера добавления в
проект новой HTML-страницы с именем HTMLInputHidden.aspx
Расширение .aspx нужно для того, чтобы диспетчер
страниц на стороне сервера при поступлении запроса от
Установите
режим Source редактирования новой страницы
и заполните ее кодом, приведенным ниже (интерфейсная и
кодовая части на одной странице)<script runat="server" language="C#">
void ButtonShow_Click(object Source, EventArgs e)
{
State.InnerText = HiddenField.Value;
}
void ButtonHidden_Click(object Source, EventArgs e)
{
State.InnerText = "";
}
</script>
<html>
<head>
<title>Элемент управления HTMLInputHidden</title>
</head>
<body>
<center>
<h1>
Элемент управления HTMLInputHidden</h1>
<font color="#ff0000">
<h2 id="State" runat="server" />
</font>
<form id="form1" runat="server" method="post">
<p>
Нажмайте на кнопки для показа/сокрытия секретной информации</p>
<input id="ShowButton" runat="server"
onserverclick="ButtonShow_Click" type="button"
value="Показать секретную информацию">
<p>
</p>
<input id="HiddenButton" runat="server"
onserverclick="ButtonHidden_Click" type="button"
value="Скрыть секретную информацию">
<input id="HiddenField" runat="server" type="hidden"
value="Это скрытое значение поля Hidden">
</form>
<hr>
<a href="HTMLInputFile.aspx">Назад</a>
nbsp;nbsp;nbsp;nbsp;
<a href="HTMLInputImage.aspx">Вперед</a>
</center>
</body>
</html>
Сделайте
страницу стартовой и постройте приложение. Результат должен
быть таким
В этой странице мы не стали создавать ассоциированный файл CodeBehind для тренировки, хотя смешивать представление страницы и код управления ею не совсем удобно. Да и возможности по программированию в чисто кодовом файле C# привычнее. Мы, как программисты, внутри файла CodeBehind находимся в своей стихии и можем спокойно там расположить всю бизнес-логику управления представлением. Главное - чтобы были известны идентификаторы всех элементов управления, используемых на странице представления.
Дойдя до этого места, вам, возможно, уже надоело смотреть
на HTML-код. Но оболочка дает возможность применить привычный визуальный способ
проектирования дизайна Web-страницы - через панель
Мы по-прежнему будем добавлять к проекту страницы Web Form, но прежде, чем редактировать ассоциированный файл CodeBehind напрямую, нужно полностью определиться с дизайном страницы, именами и типами элементов. Манипуляции с интерфейсной частью страницы приводят к генерации кода в ассоциированном файле CodeBehind. Но код на C# вставляется в CodeBehind только при объявлении управляющих HTML-элементов серверными. Имена элементов нужно менять в режиме дизайна через панель Properties, в этом случае они автоматически сменятся в CodeBehind.
Элемент управления HTMLInputImage позволяет
программировать тег <input type="image">. Он
обеспечивает загруженный на страницу рисунок функциональными
возможностями кнопки типа submit. Для примера создадим страницу,
на которой разместим с помощью этого элемента два изображения
с функциональностью кнопок. При щелчке по одному из рисунков
будем сообщать, какая кнопка была нажата.
Добавьте
к проекту новую страницу типа Web Form с
отделенным кодом и именем HTMLInputImage.aspxВыполните
команду меню оболочки View/Other Windows/Document Панель Document
И наоборот, при вызове в режиме Source контекстного
меню для курсора, установленного на каком-либо дескрипторе,
и выполнении команды
Перейдите
в режим Source-редактирования и
подкорректируйте файл HTMLInputImage.aspx так<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="HTMLInputImage.aspx.cs"
Inherits="HTMLInputImage" %>
<html>
<head>
<title>Элемент управления HTMLInputImage</title>
</head>
<body>
<center>
<h1>
Программирование элемента HTMLInputImage</h1>
<form id="form1" runat="server" method="post">
<h2 id="Text" runat="server">
</h2>
</form>
<a href="HTMLInputHidden.aspx">Назад</a>
nbsp;nbsp;nbsp;nbsp;
<a href="HTMLInputRadioButton.aspx">Вперед</a>
</center>
</body>
</html>
Поместить компоненты на Web-форму можно двумя способами:
Оставаясь
в режиме Source, выберите в панели <form></form> (в
самом конце блока) два элемента Image,
раздвинув их жесткими пробелами nbsp;Блок приобретет примерно такой вид:
<form id="form1" runat="server" method="post">
<h2 id="Text" runat="server">
</h2>
<img src="" />
nbsp;nbsp;nbsp;nbsp;
<img src="" />
</form>
Щелкните
правой кнопкой мыши на свободном месте панели инструментов
(вверху, после меню) оболочки для вызова контекстного
меню (или выполните команду Tools/
Этой
панелью следует пользоваться для выравнивания компонентов
в режиме абсолютного
Поместите
на страницу ниже завершающего маркера формы </form> компонент Horizontal Rule Run As Server ControlОболочка
добавит к дескрипторам <img> атрибут runat="server".
Слева над изображением компонента появится зеленый
маркер, свидетельствующий, что компонент
является программируемым на стороне сервера.
После этих манипуляций Design должно выглядеть так
Заготовьте
два небольших рисунка одинакового размера для этих кнопок
(можно взять в каталоге Source данной
работы) и разместите их файлы под именами Button1.Через
панель Document Src (Source-источник)
соответствующие рисунки
>
После подключения рисунков к HTML-элементам <img> визуальное
представление страницы на
Перейдите
в режим Source и измените дескрипторы <img> на <input type="image"> Окончательно строки HTML-кода отображения рисунков-кнопок должны выглядеть так
<input type="image" id="IMG1" src="Images/Button1.png" runat="server" />
nbsp;nbsp;nbsp;nbsp;
<input type="image" id="IMG2" src="Images/Button2.png" runat="server" />
Будем считать, что с дизайном страницы мы закончили и построили ее интерфейсную часть. Теперь приступим к программированию этого дизайна на языке C#.
Через
меню View (команда Code)
или контекстное меню Web-формы (команда View Code )
откройте на редактирование ассоциированный файл (CodeBehind)
с именем HTMLInputImage.aspx.csПерейдите
на страницу HTMLInputImage.aspx в
режим Design и двойным щелчком на каждой
кнопке-рисунке создайте обработчики в ассоциированном файлеОтредактируйте
обработчики такprotected void IMG1_ServerClick(object sender, ImageClickEventArgs e)
{
Text.InnerHtml = "<font color=red>" +
"Вы щелкнули по левой кнопке! </font>";
}
protected void IMG2_ServerClick(object sender, ImageClickEventArgs e)
{
Text.InnerHtml = "<font color=#0000ff>" +
"Вы щелкнули по правой кнопке! </font>";
}
Назначьте
страницу HTMLInputImage.aspx стартовой,
постройте приложение и убедитесь в его работоспособностиСтраница внешне должна выглядет так
Элемент управления HTMLInputRadioButton -
переключатель позволяет программировать HTML-тег <input type=" Этот тег дает возможность
пользователю делать выбор в пределах документа HTML. В отличие
от флажков, которые можно установить во включенное состояние
сразу несколько, переключатель позволяет выбрать только один
элемент из группы.
Рассмотрим его программирование
на примере. Создадим страницу с двумя группами переключателей,
где все входящие в группу переключатели должны иметь одинаковое
имя id (или name). При нажатии управляющей кнопки Submit
Иногда интерфейсную часть страницы удобнее разработать в специализированном
Web-редакторе, чем средствами оболочки. Поэтому для тренировки
следующую
страницу создадим в Web-редакторе Macromedia
Dreamweaver
Запустите
редактор Dreamweaver и в его меню выполните
команду Edit/Preferences. Появится окно свойств, в котором
установите настройку 
>
Создайте
новый HTML-документ через меню File/New (можно
сразу его где-нибудь сохранить как временный)
>
Напишите
первую отображаемую строку и в панели свойств присвойте ей
значение Heading1 из
раскрывающегося списка Format 
>
Введите
следующую строку текста с надписьюВыберите нужный цвет:
Переведите
курсор на новую строку и выполните команду меню Insert /Tag ..
После
нажатия кнопки Name имя кнопки colorRadio (цвет)
и отметьте флажок Checked для этой первой кнопки, чтобы при
загрузке страницы эта кнопка была включена. Затем, не выходя
из окна ID введите значение radio1.
Повторите эту процедуру для создания еще двух кнопок с тем
же именем colorRadio,
но с ID: radio2 и radio3.
Флажок Checked не поднимайте.Продолжите
создание еще двух кнопок, но теперь полю Name присвойте значение fruitRadio (фрукт)
и для первой кнопки поднимите флажок Checked. Полю ID присвойте
значения radio4 и radio5.
По этим значениям мы будем управлять кнопками в коде C#Вставьте
пустую строку перед созданными радиокнопками и через меню
Перетащите
курсором в ячейки таблицы первые три радиокнопки, затем справа
от них введите три надписи
Red (красный), Green (зеленый), Blue (синий).Ниже
создайте еще одну строку и введите текстВыберите нужный фрукт:
Ниже
для Еще
ниже вставьте кнопку Submit прежним же способом
Поле Name оставьте
пустым, поле Value заполните значением Показать результат,
в поле ID введите SubmitButton Ниже
кнопки вставьте тег горизонтальной черты
Еще
ниже вставьте две гиперссылки с названиями Назад и Вперед и
относительными URL-адресами на предыдущую и следующую страницыHTMLInputImage.aspx
HTMLInputText.aspx
Вставьте
после ссылок таблицу из двух строк и двух столбцов. Выделите
первую строку и объедините ячейки через контекстное меню
Заполните
первую строку текстомРезультаты вычислений
а в ячейки нижней строки вставьте по тегу h2 со
значениями ID: colorText и fruitText соответственно
Вставьте
перед самой верхней строчкой страницы дескриптор <form> 
Перейдите
в режим редактирования кода и перенесите закрывающую часть </form> в конец кода перед дескриптором </body>.
При этом важно чтобы вложенность пар дескрипторов не нарушилась.
Перейдите в режим Design и убедитесь, что все окно обрамлено
красной пунктирной рамкой - Щелкните
мышью где-нибудь на основном тексте и через меню выполните
команду Edit/Select All. В панели Properties кнопкой
отцентрируйте все элементы HTML-страницы, щелкнув на кнопке
Align Center
Измените
<table>
Таблица выделится полностью и в образце Bg color можно задать
Сохраните
страницу на диске и нажатием клавиши F12 запустите
ее в Перейдите
в Добавьте
к проекту новую страницу с отделенным кодом и именем HTMLInputRadioButton.aspx,
перейдите в режим редактирования Source и
удалите весь автоматически сгенерированный мастером код,
кроме директивы @ Page, выделенной желтым фономВернитесь
в Dreamweaver, где мы разработали
интерфейсную часть страницы, и переведите редактор в режим Code 
HTML-код заготовки интерфейсной страницы
<html>
<head>
<title>Элемент HTMLInputRadioButton</title>
<meta content="text/html; charset=windows-1251" http-equiv="Content-Type">
</head>
<body>
<form method="post" name="form1">
<center>
<h1>
Элемент управления HTMLInputRadioButton</h1>
<p>
Выберите нужный цвет:</p>
<table bgcolor="#99ffff" border="0" width="100%">
<tr>
<td width="33%">
<input id="radio1" checked="" name="colorRadio" type="radio" value="">
Red
</td>
<td width="33%">
<input id="radio2" name="colorRadio" type="radio" value="">
Green
</td>
<td width="34%">
<input id="radio3" name="colorRadio" type="radio" value="">
Blue
</td>
</tr>
</table>
<p>
Выберите нужный фрукт:</p>
<table bgcolor="#99ff66" border="0" width="100%">
<tr>
<td width="50%">
<input id="radio4" checked="" name="fruitRadio" type="radio" value="">
Бананы
</td>
<td width="50%">
<input id="radio5" name="fruitRadio" type="radio" value="">
Апельсины
</td>
</tr>
</table>
<input id="SubmitButton" name="" type="submit" value="Показать результат">
<hr>
<a href="HTMLInputImage.aspx">Назад</a>
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;
<a href="HTMLInputText.aspx">Вперед</a>
<table bgcolor="#ffccff" border="0" width="100%">
<tr>
<th colspan="2" scope="col">
Результаты вычислений
</th>
</tr>
<tr>
<td>
<h2 id="colorText" >
</h2>
</td>
<td>
<h2 id="fruitText" >
</h2>
</td>
</tr>
</table>
</center>
</form>
</body>
</html>
Выделите
весь текст через меню Edit/Select All и
скопируйте его через буфер в aspx-страницу
ниже директивы @Page В режиме Design оболочки
выделите все радиокнопки и кнопку Submit,
удерживая клавишу Shift на клавиатуре, и
через контекстное меню на одном из выделенных элементов выполните
команду Run As Server Control, чтобы добавить к этим элементам
атрибут runat="server" и тем самым
сделать их обрабатываемыми на сервереНайдите
в режиме Source теги colorText и fruitText и
для каждого из них добавьте вручную атрибут runat="server",
чтобы мы могли ими управлять через код C#Найдите
в режиме Source дескриптор <form> и
добавьте для него вручную атрибут runat="server" (иначе
не будет работать!!!)Отметьте для себя, что управляемые на сервере элементы имеют
в верхнем левом углу зелененькие маркеры в виде треугольничков
(как на форме, так и в панели Document
Щелкните
в кнопке Submit, чтобы создать обработчик
в файле отделенного кодаВведите
в обработчик кнопки следующий кодprotected void SubmitButton_ServerClick(object sender, EventArgs e)
{
if (radio1.Checked)
colorText.InnerText = "Выбран цвет \"Красный\"";
else if (radio2.Checked)
colorText.InnerText = "Выбран цвет \"Зеленый\"";
else if (radio3.Checked)
colorText.InnerText = "Выбран цвет \"Синий\"";
if (radio4.Checked)
fruitText.InnerText = "Выбран фрукт \"Бананы\"";
else if (radio5.Checked)
fruitText.InnerText = "Выбран фрукт \"Апельсины\"";
}
Сделайте
страницу HTMLInputRadioButton.aspx стартовой, постройте
приложение и убедитесь, что все работаетРезультат будет примерно таким
Элемент управления HTMLInputText позволяет
программировать HTML-теги <input type="text> и <input type="password">. Эти теги позволяют
пользователю вводить данные в текстовое поле, содержащееся
в форме <form></form>. Программирование
этих тегов позволяет динамически изменять атрибуты MaxLength, Size, Value.
Поле пароля отличается от текстового поля тем, что когда пользователь вводит в него текст, вводимые символы скрываются и отображаются символом звездочка (*).
Добавьте
к проекту новую страницу с отделенным кодом и именем HTMLInputText.aspxВ
панели Input (Text) - 2 шт.Input (Password) Input (Submit) Horizontal Rule Table для Из
предыдущей страницы скопируйте ссылки и добавьте их
в HTML-код текущей страницы между закрывающим дескрипторами </form> и </body>.
Подправьте ссылки так<a href="HTMLInputRadioButton.aspx">Назад</a>
<a href="HTMLSelect.aspx">Вперед</a>
Выделите
по очереди двойным щелчком каждую ссылку и перенесите в ячейки
таблицы для Переведите
поля и кнопку в режим обработки на сервере, выполнив для
них команду контекстного меню Run As Server ControlУстановите
в панели Properties свойство ReadOnly readonly Окончательный вид Web-формы должен быть примерно таким
Задайте
для серверных элементов свойства id такие,
какие будут иметь соответствующие переменные в кодовом
файле C#, например: user, password, result, submit Щелкните
дважды по кнопке Submit, чтобы создать обработчикПосле таких действий код интерфейсного файла HTMLInputText.aspx.cs может быть примерно таким
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="HTMLInputText.aspx.cs" Inherits="HTMLInputText" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div style="text-align:center">
<h1>Элемент управления HTMLInputText</h1>
Пользователь: nbsp;<input id="user" style="width: 200px"
type="text" runat="server" />
<p>
nbsp; nbsp; nbsp; nbsp;nbsp; nbsp;
Пароль:nbsp;
<input id="password" style="width: 200px"
type="password" runat="server" /></p>
<p>Учетная запись:nbsp;
<input id="result" style="width: 400px"
type="text" readonly runat="server" /></p>
<p>Заполните поля и нажмите кнопку Submit</p>
<p></p>
<input id="submit" type="submit" value="Получить учетную запись"
onserverclick="Submit1_ServerClick" runat="server" />
<p></p>
<hr />
<br />
<table width="30%" style="text-align:center">
<tr>
<td style="width: 30%"><a href="HTMLInputRadioButton.aspx">Назад</a>
</td>
<td>
</td>
<td style="width: 30%"><a href="HTMLSelect.aspx">Вперед</a>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Внесите
в обработчик ассоциированного файла CodeBehind (файл HTMLInputText.aspx.cs)
следующий кодprotected void Submit1_ServerClick(object sender, EventArgs e)
{
if (user.Value == "")
{
result.Value = "Введите имя пользователя";
return;
}
else if (password.Value == "")
{
result.Value = "Введите пароль";
return;
}
else
result.Value = "User=" + user.Value +
" " + "Password=" + password.Value;
}
Сделайте
страницу HTMLInputText.aspx стартовой и
постройте проект. Убедитесь в исправной работе страницыЭлемент управления HTMLSelect позволяет программировать HTML-тег
выпадающего списка <select> и встроенные в него теги пунктов
списка <option>. Добавим страничку к нашему проекту, где продемонстрируем
этот элемент.
Добавьте
к проекту активную страницу Web Form с
отделенным кодом и именем HTMLSelect.aspx.
Сделайте
страницу стартовой для удобства отладкиНастройте
редактор Web-формы на абсолютное Design и
выполните команду Layout /Position /Auto-position Options."Change
positioning ..." и удостовертесь, чтобы выпадающий список имел значение "Absolutely positioned" 
В
панели Div с размещенным в нем текстом "Элемент управления HTMLSelect" заголовка страницыInput (Text) текстового поля с идентификатором id=optionTagDiv с размещенным в нем текстом "Новая
опция:"
для маркировки текстового поля optionTag Div с размещенным в нем текстом "Результат"
и идентификатором id=message для
программного управленияDiv с размещенным в нем текстом "Сообщения:" для
маркировки контейнера message Select с идентификатором id=selectTag для
программного управленияInput (Submit) с идентификатором id=AddOption для
программного управления и Value="Добавить новую опцию" Input (Submit) с идентификатором id=GetSelected для
программного управления и Value="Показать выбор"Horizontal Rule <a href="HTMLInputText.aspx">Назад</a>
<a href="HTMLTable.aspx">Вперед</a>
Разместите
компоненты так, как показано на рисунке. Задайте
для элементов управления, которые будут участвовать в программном
управлении ( optionTag, selectTag, message, AddOption, GetSelected),
атрибут runat="server" и
проследите
за появлением зеленых маркеров на элементах управления, превращенных
в серверные
Создайте
обработчики для кнопок AddOption, GetSelected и
заполните их такprotected void Page_Load(object sender, EventArgs e)
{
selectTag.Items[0].Text = "Первая опция";
}
protected void AddOption_ServerClick(object sender, EventArgs e)
{
selectTag.Items.Add(optionTag.Value);
int count = selectTag.Items.Count;
message.InnerText = "В список добавлена " +
count + " опция";
selectTag.SelectedIndex = count - 1;// Сделать текущей
}
protected void GetSelected_ServerClick(object sender, EventArgs e)
{
message.InnerHtml = "Вы выбрали: ";
for (int i = 0; i <= selectTag.Items.Count - 1; i++)
{
if (selectTag.Items[i].Selected)
message.InnerHtml += selectTag.Items[i].Text;
}
}
Постройте
приложение и проверьте его работоспособностьКак можно убедиться в ассоциированном файле по всплывающей
подсказке при System.Web.UI.HtmlControls.HtmlSelect. В
нашем случае экземпляром этого класса является объект с идентификатором selectTag. В этом объекте свойство Items,
представляющее собой ссылку на экземпляр класса System.Web.UI.
содержит элементы списка и члены для управления этими элементами.
Некоторые из этих членов приведены в таблице
| Метод | Описание |
|---|---|
Add() |
Добавляет новый пункт в конец списка |
|
Очищает список |
Contains() |
Возвращает true, если список содержит заданный пункт |
Count |
Свойство возвращает число пунктов в вписке |
|
Возвращает индекс пункта с заданным содержимым |
|
Вставляет содержимое в указанную позицию списка |
|
Удаляет заданный пункт из списка |
RemoveAt() |
Удаляет пункты из заданного индексного диапазона |
Эти классы управляют тегами, отображающими таблицу. Через
эти классы можно динамически изменять свойства тегов <table>
- таблица в целом, <tr> - строка таблицы, <th> -
<td> - простой
столбец. Можно, также, добавлять и уничтожать строки и ячейки.
Приведем пример, в котором будем программно управлять таблицей
с помощью выпадающих списков.
Добавьте
к проекту новую страницу типа Web Form с
отделенным кодом и именем HTMLTable.aspxНазначьте
ее стартовой для удобства отладкиИспользуя
компоненты вкладки HTML панели Гиперссылки
вместе с локализующей таблицей скопируйте из предыдущей страницы
и откорректируйте так<a href="HTMLSelect.aspx">Назад</a> <a href="HTMLTextArea.aspx">Вперед</a>
Через
меню свойств назначьте таблице идентификатор table,
спискам соответственно bgColor, border, cellPad, cellSpac, selectRow, rowColor, ExecuteВойдите
в Source -режим и вручную присвойте дескрипторам <tr> таблицы table атрибуты runat="server" и id=Tr1, id=Tr2, id=Tr3 Дерево интерфейсных элементов с присвоенными им идентификаторами
хорошо просматривается в панели
Document
Создайте
обработчик для кнопки Submit, по щелчку
на которой информация о текущем состоянии элементов управления
в 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 HTMLTable : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// Динамическое заполнение списков
// выполнить только при первом запросе
if (!this.IsPostBack)
{
// Заполнение списка bgColor
bgColor.Items[0].Text = "None";
bgColor.Items[0].Value = "";
bgColor.Items.Add("White");
bgColor.Items.Add("Red");
bgColor.Items.Add("Green");
bgColor.Items.Add("Blue");
bgColor.Items.Add("Yellow");
// Заполнение списка border
border.Items[0].Text = "0";
border.Items.Add("1");
border.Items.Add("2");
border.Items.Add("3");
border.Items.Add("4");
border.Items.Add("5");
border.SelectedIndex = 1;// Сделать текущей
// Заполнение списка cellPad
cellPad.Items[0].Text = "0";
cellPad.Items.Add("1");
cellPad.Items.Add("2");
cellPad.Items.Add("3");
cellPad.Items.Add("4");
cellPad.Items.Add("5");
// Заполнение списка cellSpace
cellSpac.Items[0].Text = "0";
cellSpac.Items.Add("1");
cellSpac.Items.Add("2");
cellSpac.Items.Add("3");
cellSpac.Items.Add("4");
cellSpac.Items.Add("5");
// Заполнение списка selectRow
selectRow.Items[0].Text = "1";
selectRow.Items.Add("2");
selectRow.Items.Add("3");
// Заполнение списка rowColor
rowColor.Items[0].Text = "None";
rowColor.Items[0].Value = "";
rowColor.Items.Add("White");
rowColor.Items.Add("Red");
rowColor.Items.Add("Green");
rowColor.Items.Add("Blue");
rowColor.Items.Add("Yellow");
}
}
protected void Execute_ServerClick(object sender, EventArgs e)
{
// Управление атрибутами всей таблицы
table.BgColor = bgColor.Value;
table.Border = Convert.ToInt32(border.Value);
table.CellPadding = Convert.ToInt32(cellPad.Value);
table.CellSpacing = Convert.ToInt32(cellSpac.Value);
// Управление атрибутами отдельных строк
if (selectRow.Value == "1")
Tr1.BgColor = rowColor.Value;
else if (selectRow.Value == "2")
Tr2.BgColor = rowColor.Value;
else if (selectRow.Value == "3")
Tr3.BgColor = rowColor.Value;
}
}
Постройте
приложение и убедитесь в его работоспособности. Результат
внешне должен выглядеть примерно так
Обратите внимание, что изменение фонового цвета всей таблицы
не может изменить фоновый цвет, определенный для конкретной
строки. Этим демонстрируется важное правило HTML и
Исходный
код интерфейсной части может быть таким (приводится из милости
к любимым студентам)<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="HTMLTable.aspx.cs" Inherits="HTMLTable" %>
<html>
<head>
<title>HTMLTable</title>
</head>
<body>
<div align="center">
<form id="form1" runat="server" method="post">
<h1>
Программное управление свойствами таблицы</h1>
<div>
Управляемая таблица
</div>
<table id="table" runat="server" border="1" width="550">
<tr id="Tr1" runat="server">
<td style="width: 77px">
Стих 1
</td>
<td>
Мы рубим ступени - ни шагу назад
</td>
</tr>
<tr id="Tr2" runat="server">
<td style="width: 77px">
Стих 2
</td>
<td>
И от напряжения колени дрожат
</td>
</tr>
<tr id="Tr3" runat="server">
<td style="width: 77px">
Стих 3
</td>
<td>
И сердце к вершине готово бежать из груди
</td>
</tr>
</table>
<br />
<table border="0" width="100%">
<tr align="center">
<td style="width: 17%">
Background Color</td>
<td style="width: 17%">
Border</td>
<td style="width: 17%">
Cellpadding</td>
<td style="width: 17%">
Cellspacing</td>
<td style="width: 17%">
Select a Row</td>
<td style="width: 17%">
Row Color</td>
</tr>
<tr align="center">
<td>
<select id="bgColor" runat="server" style="width: 138px;">
<option selected=""></option>
</select></td>
<td>
<select id="border" runat="server" style="width: 74px;">
<option selected=""></option>
</select></td>
<td>
<select id="cellPad" runat="server" style="width: 90px;">
<option selected=""></option>
</select></td>
<td>
<select id="cellSpac" runat="server" style="width: 84px;">
<option selected=""></option>
</select></td>
<td>
<select id="selectRow" runat="server" style="width: 102px;">
<option selected=""></option>
</select></td>
<td>
<select id="rowColor" runat="server" style="width: 82px;">
<option selected=""></option>
</select></td>
</tr>
</table>
<br />
<input id="Execute" runat="server" type="submit"
value="Submit" onserverclick="Execute_ServerClick">
<br />
<br />
<table id="Table2" border="0" cellpadding="1" cellspacing="1" width="160">
<tr>
<td align="right">
<a href="HTMLSelect.aspx">Назад</a></td>
<td style="width: 20px"></td>
<td>
<a href="HTMLTextArea.aspx">Вперед</a></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Этот тип позволяет программировать HTML-тег < Этот
тег подобен текстовому полю, только является многострочным
и позволяет управлять размерами в единицах строк и столбцов.
Разработаем страничку, на которой
клиент будем вводить текст в < и
отображать клиенту (но элемент < можно
использовать и для программирования ввода).
Добавьте
к проекту новую страницу Web Form с совмещенным кодом и именем HTMLTextArea.aspx.
Сделайте страницу стартовойИз
вкладки HTML панели Input (Text) (id=inText)
- текстовое полеTextarea (id=outText)Input (Submit) (id=Execute,
value=Отправить) - кнопка обратной отсылкиHorizontal Rule Div - контейнеры с размещенным текстом в нужном количестве
для маркировки компонентовПрисвойте
компонентам указанные значения id и преобразуйте
их в Интерфейсная
часть выполняемой страницы должна выглядеть примерно так
Код
гиперссылки сделайте таким<a href="HTMLTable.aspx">Назад</a> Создайте
обработчик кнопки Submit в блоке скриптов
страницы и запрограммируйте его вместе с обработчиком начальной
загрузки страницы так, чтобы общий код страницы стал примерно
таким<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
inText.MaxLength = (int)Math.Pow(2, 16);
outText.Cols = 30;
outText.Rows = 5;
outText.Value = "";
}
}
protected void Execute_ServerClick(object sender, EventArgs e)
{
outText.Value += inText.Value; // Добавляем
inText.Value = string.Empty; // Очищаем
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div align="center">
<h1>
Программирование элемента HTMLTextArea</h1>
<div>
Поле ввода текста:nbsp;
<input id="inText" style="width: 415px" type="text" runat="server" />
<br />
</div>
<div>
Поле вывода Textarea: nbsp;
<textarea id="outText" rows="2" cols="20" runat="server" />
<br />
<br />
<input id="Execute" type="submit" value="Отправить" runat="server"
onserverclick="Execute_ServerClick" />
<br />
<br />
<hr />
</div>
<a href="HTMLTable.aspx">Назад</a>
</div>
</form>
</body>
</html>
Постройте
страничку и убедитесь в ее работоспособностиСделайте
стартовой первую страничку приложения (файл HTMLAnchor.aspx)
и проверьте работоспособность всей цепочки построенных страничек
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.