| Украина, Киев |
Инспектор
Вы можете этот курс.
Опубликован: 13.07.2010 | Уровень: специалист | Доступ: платный
Самостоятельная работа 3:
Управление HTML-элементами в ASP.NET
Программирование функциональности страницы ASP.NET
-
Перейдите
в Visual Studio .NET 2005 и откройте наш проект HTMLControls -
Добавьте
к проекту новую страницу с отделенным кодом и именем HTMLInputRadioButton.aspx,
перейдите в режим редактирования Source и
удалите весь автоматически сгенерированный мастером код,
кроме директивы @ Page, выделенной желтым фоном
-
Вернитесь
в Dreamweaver, где мы разработали
интерфейсную часть страницы, и переведите редактор в режим Code
HTML-код заготовки интерфейсной страницы tmp.htm будет иметь следующий вид
<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>
<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>
Листинг
3.21.
Код заготовки интерфейсной части страницы tmp.htm
-
Выделите
весь текст через меню 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 Outline).
-
Щелкните
в кнопке 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 = "Выбран фрукт \"Апельсины\"";
}
Листинг
3.22.
Код обработчика кнопки Submit
-
Сделайте
страницу HTMLInputRadioButton.aspx стартовой, постройте
приложение и убедитесь, что все работает
Результат будет примерно таким
Упражнение 11. Элемент управления HTMLInputText
Элемент управления HTMLInputText позволяет программировать HTML-теги <input type="text> и <input type="password">. Эти теги позволяют пользователю вводить данные в текстовое поле, содержащееся в форме <form></form>. Программирование этих тегов позволяет динамически изменять атрибуты MaxLength, Size, Value.
Поле пароля отличается от текстового поля тем, что когда пользователь вводит в него текст, вводимые символы скрываются и отображаются символом звездочка (*).
-
Добавьте
к проекту новую страницу с отделенным кодом и именем HTMLInputText.aspx
-
В
панели Toolbox откройте вкладку HTML и
поместите на форму следующие компоненты:
-
Из
предыдущей страницы скопируйте ссылки и добавьте их
в HTML-код текущей страницы между закрывающим дескрипторами </form> и </body>.
Подправьте ссылки так
<a href="HTMLInputRadioButton.aspx">Назад</a>
<a href="HTMLSelect.aspx">Вперед</a>-
Выделите
по очереди двойным щелчком каждую ссылку и перенесите в ячейки
таблицы для позиционирования на Web-форме
-
Переведите
поля и кнопку в режим обработки на сервере, выполнив для
них команду контекстного меню 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>
Пользователь: <input id="user" style="width: 200px"
type="text" runat="server" />
<p>
Пароль:
<input id="password" style="width: 200px"
type="password" runat="server" /></p>
<p>Учетная запись:
<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>
Листинг
3.23.
Интерфейсный код страницы HTMLInputText.aspx
-
Внесите
в обработчик ассоциированного файла 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;
}
Листинг
3.24.
Код обработчика файла HTMLInputText.aspx.cs
-
Сделайте
страницу HTMLInputText.aspx стартовой и
постройте проект. Убедитесь в исправной работе страницы
