Добавил:

Mymnan Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Белорусский государственный университет информатики и радиоэлектроники

Предмет:

Объектно-ориентированное проектирование и программирование

Файл:

Методичка по лабам по ООПиП.pdf

Скачиваний:

219

Добавлен:

15.09.2014

Размер:

1.77 Mб

Скачать

☆

<<< < Предыдущая 1 2 3 4 5 6 7 89 / 119 10 11 > Следующая >>>

Лабораторная работа №2

Тема: Создание Web-приложения Microsoft ASP.NET.

Задания:

Разработать web-приложение на ASP.NET, включающее форму для заполнения пользователем и вывод пару информационных web-страничек. Реализовать проверку вводимых данных:

2.1.Форма включает ввод логина и пароля, перенаправляет пользователя на его личную страннику, в которой находится доступная для редактирования информация о нем(к примеру, ФИО, ник, e-mail, ICQ, skype, фотография, место жительства, личные интересы и др.).

2.2.Форма включает данные для вакансии на работу(ФИО, фото, образование, специальность, возраст, знания языков, опыт работы и др.) Приложение должно содержать страничку просмотра всех поданных заявлений.

2.3.Страничка представляет собой новостной раздел сайта. Для добавления новости используется форма(дата, краткое и полное содержание новости). Должна быть страничка с кратким просмотром всех новостей (возможно создание архива новостей) и страничка с полным описанием новости.

Теоретический материал к ЛР №2

Microsoft .NET Framework — это платформа для создания, развертывания и запуска webсервисов и приложений. Она предоставляет высокопроизводительную, основанную на стандартах многоязыковую среду, которая позволяет интегрировать существующие приложения с приложениями и сервисами следующего поколения, а также решать задачи развертывания и использования интернет-приложений. .NET Framework состоит из трех основных частей — общеязыковой среды выполнения (common language runtime), иерархического множества унифицированных библиотек классов и компонентной версии ASP, называемую ASP .NET.

ASP .NET — это часть технологии .NET, используемая для написания мощных клиентсерверных интернет-приложений. Она позволяет создавать динамические страницы HTML. ASP .NET возникла в результате объединения более старой технологии ASP (активные серверные страницы) и .NET Framework. Она содержит множество готовых элементов управления, применяя которые, можно быстро создавать интерактивные webсайты. Вы также можете использовать сервисы, предоставляемые другими сайтами, прозрачно для пользователей вашего сайта.

Первый проект

В начале решите, в какой директории будете создавать страницы. Все файлы, находящиеся в одной директории, считаются единым проектом. Запустите выбранную вами среду разработки. Выберите пункт меню File-New-Website. Появится диалоговое окно. Назначьте в нем имя проекта и выберите язык программирования С#.

По умолчанию проект создается в файловой системе. По желанию его можно создать на HTTP или FTP-сервере. Из файловой системы проект всегда можно скопировать на сервер нажатием одной кнопки в заголовке Solution Explorer.

В проекте будет создана страница default.aspx. Выберите ее, и появится окно редактирования с закладками Design и Source. Не меняя ничего, щелкните на кнопке со стрелкой, чтобы просмотреть страницу в браузере. Появится окно, в котором спрашивается, нужно ли добавить в файл web.config возможность отладки. Нажмите "OK". На панели задач должен появиться значок web-сервера. Откроется браузер,

показывающий страницу по адресу http://localhost:номерпорта/Website1/default.aspx. "Localhost" обозначает сервер, работающий на вашем компьютере. Встроенный сервер Cassini сам назначает себе номер порта — для каждого проекта он разный. Сервер IIS обычно работает через порт 80 (или 8080, если тот занят), и для него номер порта указывать не нужно. При этом ваша страница будет скомпилирована.

Пока что страница в браузере пустая.

Но исходный код этой страницы не пустой. Программа сгенерировала код для вас.

<%@ Page Language="C#" AutoEventWireup="true"; CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"; "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Untitled Page</title> </head>

<body>

</div>

</form>

</body>

</html>

Разберем эту страницу.

<%@ Page Language="C#" %>. Тег <% всегда предназначается для интерпретации ASPкода. Директива Page всегда присутствует на странице aspx. Ее атрибут Language — это указание, что в скриптах данной страницы будет использоваться C#, а могли бы VB, C++ или J#. CodeFile — имя файла с отделенным кодом (code-behind). Inherits —

класс, определенный в том файле, от которого наследуется класс страницы.

Одновременно будет создан и файл Default.aspx.cs.

Это технология разделения кода, о которой мы уже говорили. Сама форма находится в файле Default.aspx, а файле Default.aspx.cs находится класс страницы на языке C#. Таким образом, дизайн страницы может быть изменен не затрагивая кода страницы, что позволяет разделить ответственность за внешний вид и работу страницы между дизайнером и программистом.

Этот тег дает указание компилятору обрабатывать элементы управления страницы. Обратите внимание на то, что данный тег имеет свойство runat, для которого установлено значение "server" (других значений не бывает). При использовании этого свойства элемент управления обрабатывается компилятором, а не передается браузеру "как есть".

Вставьте в Default.aspx между тегами <form> и </form> тег, задающий элемент управления.

<asp:Label id="Time" runat="server"

Text="Сервер находится в Москве. Московское время: " />

Серверный элемент управления Label является средством размещения на странице текста, который может содержать теги HTML. Изменяя значения свойств этого элемента управления в коде, вы можете динамически изменять текст на странице. В asp:Label компилятору сообщается, с каким объектом ведется работа (в рассматриваемом случае

— с элементом управления Label).

Далее задаются различные свойства элемента управления. В первую очередь определяется его имя id="time" и атрибут "runat", а также текст.

В файле Default.aspx.cs должен содержаться такой текст:

using System;

......

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

Ключевое слово partial появилось в C# 2.0, и позволяет разбить текст определения класса между разными файлами.

System.Web.UI.Page — класс, базовый для всех страниц ASP .NET.

Если вы работаете с WebMatrix, вставьте его самостоятельно между тегами <script> и </script> файла default.aspx.

Вставьте в эту функцию строчку

Time.Text= DateTime.Now.ToString();

Возможно, вы уже знакомы с классом System.DateTime библиотеки классов FCL — составной части .NET Framework. Здесь мы используем этот класс, как в любой программе на C#. Следовательно, любой класс .NET доступен и в локальных, и в распределенных приложениях.

Полученное значение присваивается свойству Text объекта time. Это элемент управления типа Label (метка), который мы вставили. Время на часах клиента и сервера может не совпадать, если они находятся в разных точках земного шара.

Page_Load похож на обычный обработчик события формы. Как можно легко догадаться, эта функция вызывается каждый раз, когда загружается форма.

Запустите страницу на просмотр кнопкой F5 или нажав на кнопку со стрелкой на панели инструментов. В браузере должна открыться страница, на которой будет написано текущее время. Откройте исходный текст страницы. Никакого кода на С# или элементов управления ASP.NET там не будет:

<!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><title>Время, вперед</title>

</head>

<body>

<div>

</div>

<div>

<span id="Time">Сервер находится в Москве. Московское время: 08.06.2006 4:56:47</span>

</div>

</form>

</body>

</html>

Обновите страницу. Вы увидите новое значение времени.

Вы можете просмотреть страницу с помощью любого другого браузера.

Если вы находитесь в сети и выход в Интернет осуществляется через прокси-сервер,

поставьте галочку на странице Connections (для IE) Bypass proxy server for local addresses.

Серверные элементы управления

Одна из самых важных задач web-разработчика — получение и обработка данных, введенных пользователем. Информация посылается серверу через форму. Форма содержит элементы управления, которые позволяют различными способами вводить информацию.

Формы применяются в большинстве сайтов. Например, если вы пишете письмо в webинтерфейсе, появляется форма с текстовыми полями, соответствующими адресату, теме и тексту письма. Нажатием на кнопку можно добавить прилагаемый файл и окончательно послать письмо кнопкой Send.

Форма HTML содержит теги, такие как текстовое поле, выпадающий список, переключатели (radiobuttons) и флажки (checkbox), кнопки.

Формы ASP .NET отличаются от обычных форм наличием свойства runat="server". Они обрабатываются ASP .NET на сервере. Формы являются одним из полей страницы. На странице находятся элементы управления. Многие из них должны быть расположены внутри формы. ASP.NET позволяет запоминать состояние элементов управления, то есть текст, который был введен в текстовое поле, или выбранный переключатель, передавать его на сервер и обратно на страницу после ее обновления:

Все формы обрабатываются методом POST. Атрибут Action можно задавать, но не обязательно. По умолчанию это текущая страница.

У элементов управления ASP .NET. тоже имеется свойство runat="server". Второй обязательный атрибут — это его идентификатор, или ID. Он нужен, чтобы обращаться к элементу в программе, то есть это имя члена страницы, по которому мы можем его идентифицировать. Примеры мы уже видели в предыдущих лекциях.

Перечислим группы элементов управления:

•Элементы управления HTML.

Элементы управления HTML являются наследниками класса

System.Web.UI.HtmlControls.HtmlControl. Они непосредственно отображаются в виде элементов разметки HTML. Их отображение не зависит от типа браузера. Свойства таких элементов полностью соответствуют атрибутам тегов HTML.

Сравните обычный тег

с элементом управления HTML

Разница заключается только в наличии атрибута ="server". Но он дает колоссальную разницу. Теги сервер отображает как есть, а элементом управления можно манипулировать в коде. Только во втором случае в функции-методе страницы можно написать

Reset1.Value = "АСП";

что равносильно

this.Reset1.Value = "АСП";

Следовательно, Reset1 становится одним из членов класса страницы.

Эти классы используют, если необходимо получить определенные теги HTML или если нужно конвертировать старые страницы asp. Элементы управления HTML можно размещать на одной странице вперемежку с серверными элементами.

•Стандартные или серверные элементы управления.

Серверные элементы мощнее, потому что они привязаны не к разметке, а к функциональности, которую нужно обеспечить. Многие элементы не имеют аналогов в HTML, например, календарь. Их отрисовка полностью контролируется ASP .NET. Перехватывая события PreRender, Init, Load, можно вмешаться в этот процесс.

Объявления серверного элемента управления начинаются с блока <asp:тип> и

заканчиваются </asp:тип>

Например:

<asp:Label ID="Label1" runat="server" Text="Hello World"></asp:Label>

Возможно также закрыть объявление тегом />, если внутри блока нет текста:

<asp:Label ID="Label1" Runat="server" Text="Hello World" />

Свойства этих элементов строго типизированы, в отличие от HTML-элементов.

В этой таблице приведены элементы управления, которые имеют пару среди тегов HTML. Вообще их гораздо больше. Некоторые элементы генерируют не только HTMLкод, но и JavaScript. В ASP .NET 2.0 было добавлено множество новых сложных элементов управления, например, MultiView, TreeView, Wizard, GridView. О

возможностях одного только GridView можно написать целую статью.

Таблица соответствия некоторых серверных элементов управления тегам HTML

Элемент управления	Соответствующий тег HTML	Назначение
Элемент управления
ASP .NET
ASP .NET

<asp:Label>	<Span>	Отобразить текст

<asp:ListBox>	<Select>	Список выбора

<asp:DropDownList>	<Select>	Выпадающий список

<asp:TextBox>	<Input Type="Text"> <Input	Строка редактирования
	Type="Password"> <Textarea>	Поле редактирования

<asp:HiddenField>	<Input Type="Hidden">	Невидимое поле

<asp:RadioButton>,

<asp:RadioButtonList>	<Input Type="Radio">	Переключатель, список
		переключателей

<asp:CheckBox>,

<asp:CheckBoxList>	<Input Type="CheckBox">	Флажок, список флажков

<asp:Button>	<Input Type="button"> <Input	Командная кнопка
	Type="submit">

<asp:Image>	<img>	Изображение

<asp:ImageButton>	<input type="image">	Кнопка-изображение

<asp:Table>	<Table>	Таблица

<asp:Panel>	<Div>	Контейнер

<asp:BulletedList>	<ul>,<ol>	Маркированный список

<asp:HyperLink>	<A Href>	Гиперссылка

Сервер не обязательно генерирует те же самые теги HTML для серверных элементов управления. Все зависит от типа браузера, который использует клиент.

Все серверные элементы управления находятся в пространстве имен

System.Web.UI.Control и наследуются от класса System.Web.UI.Web Controls.WebControl.

Все существующие классы вы можете просмотреть с помощью Class Browser.

Во всех интегрированных средах разработки есть возможность добавлять элементы управления с помощью простого перетаскивания мышью.

Создайте новую форму и нажмите на вкладку Design — переход в режим проектирования. Из выпадающего меню View выберите пункт ToolBox. Элементов так много, что пришлось организовать их в виде дерева. Все нужные в этой лекции элементы управления находятся во вкладке Standard (Web Controls, если у вас WebMatrix). Кнопка F4 открывает окно "Свойство выделенного объекта", а двойной щелчок мышью автоматически создает обработчик наиболее типичного для данного элемента события.

Рассмотрим некоторые простейшие элементы.

Label

Этот элемент управления позволяет выводить отформатированный текст, аналогично обобщенному строчному элементу разметки <SPAN>. Всеми свойствами этого объекта можно управлять из вашей программы ASP .NET.

Большинство методов и свойств унаследовано от WebControl. Главное собственное свойство — это, конечно, его содержание — Text.

Нижеперечисленные свойства управляют внешним видом элемента, присутствуют в классе WebControl и, следовательно, применимы ко всем элементам-наследникам

WebControl, а не только к Label.

BackColor Цвет фона

BorderColor Цвет границы элемента управления

BorderStyle Стиль границы — сплошной, пунктир, точечный, двойной и другие

BorderWidth Ширина границы


	Enabled	Активность. Если false, нельзя вводить данные, не получает фокус

	Font	Шрифт, состоит из нескольких атрибутов

	ForeColor	Цвет, которым отображается текст

	Height	Высота элемента

	Width	Ширина элемента

	Visible	Виден ли элемент управления
		Индекс табуляции, в порядке номеров которых в форме перемещается фокус
	TabIndex
		при нажатии на клавишу Tab

	ToolTip	Текст окна подсказки

В версии 2.0 появилась возможность задавать для элементов управления "горячие" клавиши, или клавиши быстрого доступа. Свойство AccessKey определяет последовательность нажатых клавиш, которые приводят к установке фокуса на данном элементе. Например, AccessKey="N" значит, что для вызова функциональности надо нажать на Alt+N. Установить фокус в Label невозможно, поэтому устанавливаем свойство AssociatedControlId, которое указывает на другой элемент. Если это TextBox, то фокус устанавливается в него.

Пример описания элемента Label:

<asp:Label id="ShopNews" runat="server" Font-Size =20 ForeColor="red"

BackColor ="lightgray" BorderWidth=4 BorderStyle=groove Height=50 width=500>

Новости торговой площадки </asp:Label>

Префикс asp: означает, что данный элемент стандартный. Можно создавать собственные контролы со своими префиксами.

Текст между открывающим и закрывающим тегами будет показан на странице. Это содержание его свойства Text.

Так как Text — это такой же атрибут, как и другие, мы можем написать иначе:

<asp:Label id="ShopNews" runat="server" Font-Size =20 ForeColor="red"

BackColor ="lightgray" BorderWidth=4 BorderStyle=groove Height=50 width=500

Text= "Новости торговой площадки" />

Вставим это описание в страницу aspx

<title>Торговая площадка</title> </head>

<body>

<h2>

Демонстрация метки</h2> <br />

<asp:Label ID="ShopNews" runat="server" Font-Size="20" ForeColor="red" BackColor="lightgray"

BorderWidth="4" BorderStyle="groove" Height="50" Width="500" Text="Новости торговой площадки" />

</form>

</center>

</body>

</html>

и наслаждаемся эффектом. Надпись красного цвета на сером фоне. Стиль границы делает метку приподнятой над фоном.

Рис. 2.1.

У Label, как и у всех остальных классов, есть конструктор. Это значит, что создать его можно прямо в программе, а не прописывать на форме.

<%@ Page Language="C#" %>

<%@ Import Namespace= "System.Drawing" %> <script runat="server">

void Page_Load()

{

Label ShopNews = new Label();

ShopNews.Text = "Новости торговой площадки"; ShopNews.Font.Size=20; ShopNews.ForeColor=Color.Red; ShopNews.BackColor=Color.LightGray; ShopNews.BorderWidth=4; ShopNews.BorderStyle=BorderStyle.Groove; ShopNews.Height=50;

ShopNews.Width=500;

frmDemo.Controls.Add(ShopNews);

}

</script>

<title>Торговая площадка</title> </head>

<body>

<h2>Демонстрация метки</h2><br /> <form id="frmDemo" runat="server">

</form>

</center>

</body>

</html>

Обратите внимание на директиву <%@ Import Namespace= "System.Drawing" %>.

Директива импорта нужна, чтобы обращаться к перечислению Color названий цветов, определенному в System.Drawing.

Посмотрим, что выдал ASP .NET браузеру. Вот код HTML, относящийся к нашей метке:

<div>

<span id="ShopNews" style="display:inline-block;color:Red;back- ground-color:LightGrey;border-width:4px;border-style:Groove;font- size:20pt;height:50px;width:500px;">Новости торговой площадки</span> </form>

Как видим, ASP .NET превратил метку в элемент разметки <span>, задав ему стили CSS. В форме появился еще один невидимый элемент по имени =__VIEWSTATE, который мы скоро обсудим.

TextBox

Он заменяет элементы разметки <textbox> и <textarea>. Они оба вводят текст, только <textbox> — однострочный, а <textarea> — многострочный. Соответственно, при свойстве textmode, равном MultiLine, получится многострочное поле ввода, а при SingleLine — однострочное. Если textmode равен Password, введенные данные заменяются звездочками, как при <Input Type="Password">. Естественно, это нужно в основном для ввода пароля.

Свойство rows задается при textmode, установленном в MultiLine, и задает количество строк для ввода. Аналогично функционирует свойство columns — количество символов в строке.

Если свойство Wrap установлено, то текст переходит на новую строчку, чтобы полностью помещаться в окне. Эта возможность должна быть хорошо известна по текстовым редакторам:

{

if (Page.IsPostBack)

{

if (txtName.Text != "")

lblName.Text = "Вы ввели имя:" + txtName.Text;

if (txtAddress.Text != "") lblAddress.Text = "Вы ввели адрес:" +

txtAddress.Text;

if (txtPassword.Text != "") lblPassword.Text = "Вы ввели пароль:" +

txtPassword.Text + "<br>Спасибо за регистрацию!"; input.Visible = false;

}

</script>

<title>Регистрация нового пользователя</title> </head>

<body>

<table>

<tr>

Введите имя: </td>

<asp:TextBox ID="txtName" runat="server" /></td> </tr>

<tr>

Введите адрес:</td> <td style="width: 100px">

<asp:TextBox ID="txtAddress" runat="server" TextMode="multiline" Rows="5" Wrap="true" /></td>

</tr>

<tr>

Введите пароль:</td> <td style="width: 100px">

<asp:TextBox ID="txtPassword" runat="server" TextMode="password" /></td>

</tr>

</table>

</div> <br />

<br />

<asp:Label ID="lblName" runat="server" /><br /> <asp:Label ID="lblAddress" runat="server" /><br /> <asp:Label ID="lblPassword" runat="server" /><br />

</body>

</html>

За счет манипулирования свойством видимости формы одна и та же страница выглядит совершенно по-разному до и после постбэка. На входе видна форма, а на выходе — результат, и так как форма скрыта, никакого кода для нее не генерируется.

Сохраните эту форму в файле Registration.aspx, мы к ней еще вернемся.

У всех классов, унаследованных от WebControl, в ASP .NET 2.0 появился метод Focus(). Он устанавливает фокус в элемент управления. Чаще всего применяется именно к

TextBox. Добавьте txtName. Focus() в событие Page_Load(), и курсор при загрузке страницы уже будет установлен в нужной строке ввода.

RadioButton

Переключатели не ходят в одиночку. Один переключатель на странице не имеет смысла. Нужны хотя бы два. Типичный набор переключателей определяется так:

<asp:RadioButton ID="RadioButton1" Runat="server" Text="Yes" GroupName="Set1" />

<asp:RadioButton ID="RadioButton2" Runat="server" Text="No" GroupName="Set1"/>

Атрибут Text выводится справа от переключателя. В этом примере важно, что у обоих переключателей совпадает свойство GroupName. Это позволяет им работать как одно целое. Преимущество отдельных переключателей над RadioButtonList в том, что между переключателями можно поместить любой текст, картинки и другие элементы.

У RadioButton есть событие CheckedChanged, которое вызывается, когда пользователь выбирает один из переключателей группы. Чтобы обработчик этого события вызывался, необходимо установить свойство AutoPostBack:

<%@ Page Language="C#" %> <script runat="server">

protected void option1_CheckedChanged(object sender, EventArgs e)

{

if(option1.Checked)

Message.Text = "Вы выбрали " + option1.Text; if (option2.Checked)

Message.Text = "Вы выбрали " + option2.Text; if (option3.Checked)

Message.Text = "Вы выбрали " + option3.Text;

}

</script>

<title>Шуточное голосование</title> </head>

<body>

У кого самые мохнатые лапы в мире?<br /><br /> <form runat="server" id="voting">

<asp:RadioButton id="option1" runat="server" Text="медведя" OnCheckedChanged="option1_CheckedChanged" AutoPostBack = true GroupName="Choice" /><br />

<asp:RadioButton id="option2" runat="server" Text="мохноногого тушканчика" OnCheckedChanged="option1_CheckedChanged" GroupName="Choice" AutoPostBack = true /> <br /> <asp:RadioButton id="option3" runat="server" Text="хоббитов" OnCheckedChanged="option1_CheckedChanged" AutoPostBack = true GroupName="Choice"/><br />

<asp:Label id="Message" runat="server" /> </body>

</html>

RadioButtonList

Группа переключателей работает так, что выбор одного элемента из группы снимает выбор с других. Этот элемент управления подходит для выбора одного правильного ответа из нескольких:

<asp:RadioButtonList id="radSample" runat="server"> <asp:ListItem id="option1" runat="server" value="Option A" /> <asp:ListItem id="option2" runat="server" value="Option B" /> <asp:ListItem id="option3" runat="server" value="Option C" /> </asp:RadioButtonList>

Свойство radSample.SelectedItem.Value показывает выбранный элемент.

На форуме RSDN каждый участник может открыть голосование по интересующему его вопросу. Вот одно из этих голосований:

<%@ Page Language="C#" %> <script runat="server"> void Page_Load()

{

if (Page.IsPostBack)

{

if( radVoting.SelectedItem==null) Message.Text = "Надо выбрать вариант"; else

{

Message.Text = "Спасибо за участие. Вы выбрали: " + radVoting.SelectedItem.Value;

voting.Visible=false;

}

</script>

<title> Что вы думаете о сайте intuit.ru? </title> </head>

<body>

<br /><br /> <asp:label runat="server" ID="Question" FontBold="True" Font-Size="Large" ForeColor="#0000C0">Что вы думаете об онлайн-университете intuit.ru? </asp:label>

<asp:ListItem value="Есть интересные курсы, причем в открытом доступе" />

<asp:ListItem value="Не бывал(а), пойду посмотрю" /> <asp:ListItem value="Посмотрел(а), записался на курсы" /> </asp:RadioButtonList>

</form>

<asp:Label id="Message" runat="server" /> </body>

</html>

Ну конечно, в случае настоящего голосования нужно еще и запомнить где-то результаты. Попробуем это освоить в следующих лекциях.

CheckBoxList

Некоторые голосования предполагают возможность выбора больше одного варианта. Так же реализованы и тесты, которые вы проходите в конце лекций.

<asp:Label ID="Label1" runat="server" Text="Как реализуется связывание с данными в ваших ASP.NET 2.0

приложениях?"></asp:Label>

<asp:CheckBoxList ID="CheckBoxList1" runat="server"> <asp:ListItem>На каждой страничке создаётся

SqlDataSource, с ним идёт декларативное связывание.</asp:ListItem> <asp:ListItem>В проекте есть DataSet, на страничках

ObjectDataSourcе'ы, и с ними декларативное связывание.</asp:ListItem>

<asp:ListItem>Недекларативное связывание, запрос прописан на каждой страничке.</asp:ListItem>

<asp:ListItem>Недекларативное связывание с использованием одного большого DataSet'а</asp:ListItem>

</asp:CheckBoxList>

Если в CheckBoxList множество вариантов, то можно их расположить в несколько столбцов. При этом можно двигаться сверху вниз — справа налево, или наоборот. Это зависит от RepeatDirection — Horizontal или Vertical. Текст может быть расположен справа или слева от флажка.

DropDownList

Аналог этого элемента в HTML — выпадающие меню. Они задаются с помощью тегов <SELECT> и </SELECT>, между которыми находятся один или несколько тегов:

<OPTION>. <BR>Каталог

<SELECT NAME="Выбор"> <OPTION>Компьютеры

<OPTION>Принтеры

<OPTION VALUE="Комплектующие"> Комплектующие

<OPTION SELECTED>Мониторы

<OPTION>Компакт-диски

</SELECT>

DropDownList выдаст тот же самый код, если будет определен так:

<asp:DropDownList id="Выбор" runat="server"> <asp:ListItem> Компьютеры </asp:ListItem > <asp:ListItem >Принтеры</asp:ListItem > <asp:ListItem > Комплектующие </asp:ListItem >

<asp:ListItem Selected="true"> Мониторы </asp:ListItem > <asp:ListItem > Компакт-диски</asp:ListItem > </asp:DropDownList >

Итак, если мы хотим перейти с написания страниц HTML к написанию кода ASP:

<asp:DropDownList> пишется вместо <SELECT> <asp:ListItem > вместо <OPTION>

Вместо атрибута NAME пишем атрибут id.

Вместо атрибута SELECTED пишем атрибут Selected и присваиваем ему true.

Атрибут VALUE можно задать и в HTML. Если его нет, ASP .NET генерирует его из текста

ListItem:

<option value=" Компьютеры "> Компьютеры </option> <option value="Принтеры">Принтеры</option>

<option value=" Комплектующие "> Комплектующие </option>

<option selected="selected" value=" Мониторы "> Мониторы </option> <option value=" Компакт-диски"> Компакт-диски</option>

</select>

Отличие серверных элементов управления в том, что их можно программировать на сервере и получать информацию от них тоже на сервере.

Попробуем написать такую страницу:

<%@ Page Language="C#" %>

{

if (Page.IsPostBack)

lblMessage.Text = "Вы выбрали " + Category.SelectedItem.Value;

}

</script>

<title>Выбор категории товаров</title> </head>

Выберите категорию товаров<br /> <asp:DropDownList ID="Category" runat="server">

<asp:ListItem> Компьютеры </asp:ListItem> <asp:ListItem>Принтеры</asp:ListItem> <asp:ListItem> Комплектующие </asp:ListItem>

<asp:ListItem Selected="true"> Мониторы </asp:ListItem> <asp:ListItem> Компакт-диски</asp:ListItem>

</asp:DropDownList> <input type="Submit"> <br />

<asp:Label ID="lblMessage" runat="server" /> </form>

</body>

</html>

Запустите ее на выполнение, выберите "Компакт-диски" и нажмите на кнопку. На форме появится надпись "Вы выбрали Компакт-диски".

Вот код этой страницы в браузере:

<title>Выбор категории товаров</title> </head>

<body>

<br/>

<div>

</div>

Выберите категорию товаров<br /> <select name="Category" id="Category">

<option value=" Компьютеры "> Компьютеры </option> <option value="Принтеры">Принтеры</option>

<option value=" Комплектующие "> Комплектующие </option> <option value=" Мониторы "> Мониторы </option>

<option selected="selected" value=" Компакт-диски"> Компактдиски</option>

</select>

<span id="lblMessage">Вы выбрали Компакт-диски</span>

<div>

<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDA-

TION" value="/wEWBgKTtKPTDgLc5pLAAgLxxYKuBALL14rfCALaoI/9AgLP6q/dC9yI/KG 10xK67UImbEUJkicDdslR" />

</div></form>

</body>

</html>

Итак, браузеру посылается простая страница, на которой нет скриптов. То же поведение можно было бы запрограммировать с помощью JavaScript. Разница в том, что пользователь смог бы увидеть код на JavaScript, скопировать и использовать его на своих страницах. В этом нет ничего плохого, но иногда люди хотят сохранить свой код в тайне в целях защиты интеллектуальной собственности.

Посмотрим, как ASP .NET интерпретировал заголовок формы:

Атрибуты name и id он сгенерировал самостоятельно. Их значение одинаково, разные браузеры позволяют обращаться к элементам формы по-разному: IE — через id, а Netscape Navigator — через name. Атрибуты method и action тоже не были указаны нами, он сгенерировал их по умолчанию как post и текущая страница.

А что значит скрытый элемент разметки, который мы видим на каждой сгенерированной ASP .NET странице? Это поле, сохраняющее состояние формы. Раньше форма была отдельной страницей, и когда она отправляла серверу данные, он генерировал совершенно другую страницу. В ASP .NET форма подает себя сама, она работает на входе и на выходе.

Поэтому через специальное скрытое поле передаются значения данных формы. Если бы этого не было, в выпадающем списке всегда были бы выбраны мониторы. Информация в этом поле хранится в закодированном виде, но сервер может ее раскодировать.

Свойство Items элемента управления DropDownList имеет несколько методов для добавления и удаления строк. Используя методы Add и Insert, можно добавить элемент или вставить его в указанную позицию в DropDownList; AddRange позволяет добавить массив элементов в DropDownList; метод Clear удаляет все элементы; методы Remove и

RemoveAt удаляют указанный элемент или элемент, находящийся в указанной позиции соответственно. Например, так можно программно создать DropDownList в функции

Page_Load:

Category = new DropDownList();

Category.Items.Add("Компьютеры");

Category.Items.Add("Принтеры");

Category.Items.Add("Комплектующие");

ListItem selItem = new ListItem("Мониторы", "мониторы");

Category.Items.Add(selItem);

Category.Items.Add(new ListItem("Компакт-диски"));

Category.SelectedIndex = 3;

Чтобы очистить выбор в элементе DropDownList, установите SelectedIndex в - 1.

Если установить у ListItem свойство Enable в false, то он будет не виден в списке, однако с ним можно работать из программы. Событие SelectedIndexChanged запускается, когда пользователь выбирает другой элемент.

ListBox

Если у тега <select> указать атрибут SIZE, больший 1 (значение по умолчанию), то получим простой невыпадающий список. Ему соответствует <asp:ListBox>.

Элемент управления позволяет выбрать несколько пунктов списка одновременно. Для этого надо установить его свойство SelectionMode:

SelectionMode="multiple"

Свойство Rows устанавливает количество элементов, которые видны в листе. Если элементов больше, то появляется полоса прокрутки.

Свойство Items возвращает коллекцию элементов ListItem, которые находятся в списке. Оно позволяет определить выбранные пункты.

Представьте, что мы разрабатываем сайт туристического агентства. Посетителю предоставляется возможность выбрать несколько городов для своего маршрута из имеющегося списка. Смотрим код:

<%@ Page Language="C#" %>

void Page_Load()

{

string msgCitiesList = ""; if (Page.IsPostBack)

foreach (ListItem it in cities.Items) if (it.Selected)

{

msgCitiesList = msgCitiesList + it.Text + "<br />";

}

if (msgCitiesList != "")

{

Message.Text = "Вы выбрали следующие города: <br />" +

msgCitiesList;

}

else

{

Message.Text = "";

}

</script>

<title>Пример ListBox</title> </head>

<body>

Какие города вы хотите включить в свой маршрут?<br /> <form id="Form1" runat="server">

<asp:ListBox ID="cities" runat="server" SelectionMode="multiple"> <asp:ListItem>Лондон</asp:ListItem> <asp:ListItem>Мадрид</asp:ListItem> <asp:ListItem>Париж</asp:ListItem> <asp:ListItem>Рига</asp:ListItem>

</asp:ListBox><br /> <input type="Submit"> <p>

<asp:Label ID="Message" runat="server" /><br /> </form>

</body>

</html>

Событие SelectedIndexChanged имеется и тут, как и у всех классов-наследников от абстрактного класса ListControl.

Panel

Часто бывает нужно вставить элемент управления в точно определенное место страницы. Например, объединим два предыдущих примера:

<%@ Page Language="C#" %>

<%@ import Namespace="System.Drawing" %> <script runat="server">

void Page_Load()

{

Label ShopNews = new Label();

ShopNews.Text = "Новости торговой площадки";

ShopNews.Font.Size=20;

ShopNews.ForeColor=Color.Red;

ShopNews.BackColor=Color.LightGray;

ShopNews.BorderWidth=4;

ShopNews.BorderStyle=BorderStyle.Groove;

ShopNews.Height=50;

ShopNews.Width=500;

frmDemo.Controls.Add(ShopNews);

if (Page.IsPostBack)

lblMessage.Text = "Вы выбрали " + Category.SelectedItem.Value;

}

</script>

<title>Выбор категории товаров</title> </head>

<body>

<br/>

Выберите категорию товаров<br /> <asp:DropDownList id="Category" runat="server"> <asp:ListItem> Компьютеры </asp:ListItem > <asp:ListItem >Принтеры</asp:ListItem > <asp:ListItem > Комплектующие </asp:ListItem >

<asp:ListItem Selected="true"> Мониторы </asp:ListItem > <asp:ListItem > Компакт-диски</asp:ListItem > </asp:DropDownList >

<br/>

<asp:Label id="lblMessage" runat="server"/> </form>

</body>

</html>

Рис. 2.2.

Эта страница работает не так, как нам хотелось. Текст оказался после выпадающего списка, хотя логичней было бы, чтобы текст шел в начале. В Javascript для этого используют элемент разметки <DIV> — стандартный контейнер. Его аналог в ASP .NET:

—

<asp:Panel>.

Чтобы заставить метку отображаться перед списком, необходимо поместить перед

DropDownList объект Panel:

<asp:Panel ID="Panel1" runat="server"></asp:Panel><br />

после чего вызывать метод Controls.Add(...) от этого объекта:

Panel1.Controls.Add(ShopNews);

Рис. 2.3.

Свойство HorizontalAlign элемента Panel полезно, если нужно установить выравнивание содержащихся в нем элементов управления. Поменяем код в предыдущем примере:

<asp:Panel ID="Panel1" runat="server" HorizontalAlign="Center" width=500 />

Текст теперь размещается в центре метки.

Булевское свойство Wrap элемента Panel заставляет переносить текст на новую строку, если оно установлено, или расширять раздел, когда текст не помещается в одну строку, если оно не установлено.

Если в программе установить свойство Visible панели в False, можно сделать невидимыми все элементы, которые в нем находятся. Стили, установленные в панели, наследуются всеми вложенными элементами.

Новая возможность в ASP .NET 2.0 — задавать для Panel полосы прокрутки, как бы имитируя встроенное в страницу окно. Это делается с помощью свойства ScrollBars. Он может принимать следующие значения: None, Both, Vertical, Horizontal, Auto. Если вы установите его в Auto, полосы прокрутки появятся, когда содержимое панели не умещается в ее видимые размеры:

<asp:Panel ID="Panel1" runat="server" Height="140px" Width="494px" ScrollBars="Auto" HorizontalAlign="Left">

</asp:Panel>

protected void Page_Load(object sender, EventArgs e)

{

for(int i=0;i<100;i++)

{

Literal l=new Literal();

l.Text = "Мой дядя самых честных правил,<br>Когда не в шутку занемог<br><br>";

this.Panel1.Controls.Add(l);

}

Реализуется такая возможность с помощью атрибута css overflow:

так что подобного поведения можно было добиться, просто изменив стиль. Но ведь не все из нас знают так хорошо css, чтобы иметь понятие об overflow.

Ставить свойство ScrollBars в Vertical или Horizontal я вам не рекомендую. Генерируется overflow-x, а это не работает в браузере Opera 9.0. overflow не поддерживается Opera 6.

Вертикальную полосу прокрутки можно установить и слева. Для этого поменяйте свойство Direction в RightToLeft.

Для Panel можно задать фоновую картинку с помощью свойства BackImageUrl.

<<< < Предыдущая 1 2 3 4 5 6 7 89 / 119 10 11 > Следующая >>>

Соседние файлы в предмете Объектно-ориентированное проектирование и программирование

#
15.09.201435.84 Кб22Вопросы по ООПиП.doc
#
15.09.20141.77 Mб219Методичка по лабам по ООПиП.pdf