Основы технологии ASP.NET (методичка)
.pdfФедеральное агентство по образованию Российской Федерации Пермский государственный технический университет Кафедра ИТАС
Методическое пособие по основам технологии ASP.NET
Выполнил: студент группы АСУ-06-1 Полевщиков Иван Сергеевич Руководитель: студент группы АСУ-05-1 Поляков Максим Владимирович
Проверил преподаватель:
доцент Ноткин Аркадий Михайлович
Пермь 2009
2
Содержание
1. Краткие теоретические сведения...................................................................... |
3 |
1.1. Архитектура Web-приложений ASP.NET........................................................................... |
3 |
1.2. Пример создания Web-приложения “Hello, World!”.......................................................... |
3 |
1.3. HTML-дизайн......................................................................................................................... |
8 |
1.4. Серверные элементы управления........................................................................................ |
11 |
1.5. Пример взаимодействия с базой данных............................................................................ |
13 |
1.6. Некоторые встроенные объекты......................................................................................... |
19 |
1.7. Пример создания приложения из двух страниц................................................................ |
19 |
1.8. Аутентификация и авторизация пользователей................................................................. |
22 |
2. Журнал Преподавателя..................................................................................... |
25 |
2.1. Постановка задачи................................................................................................................ |
25 |
2.2. Разработка.............................................................................................................................. |
25 |
2.3. Запуск приложения............................................................................................................... |
41 |
3. Список использованной литературы............................................................... |
44 |
3
Краткие теоретические сведения
Архитектура Web-приложений ASP.NET
ASP.NET — технология создания веб-приложений и веб-сервисов от компании Майкрософт. Она является составной частью платформы Microsoft .NET и развитием более старой технологии Microsoft ASP.
Active Server Page (ASP) является Web-страницей, которая содержит программный код для динамического конструирования содержимого Web-страницы в соответствии с действиями пользователя и вводимыми им данными.
Основным компонентом в ASP.NET является Web-форма, которая, по сути, является документом HTML (Hypertext Markup Language). Этот документ содержит HTML-теги и серверные элементы управления. Серверные элементы управления ASP.NET включают в себя динамические версии стандартных HTML-компонентов, в том числе текстовые окна, таблицы, маркерные списки, переключатели и раскрывающиеся списки, а также уникальные элементы управления, обеспечивающие дополнительные возможности по сравнению с теми, которые доступны с помощью простых HTML-тегов. Эти серверные элементы управляют такими процессами, как контроль данных, доступ к данным, процесс входа в систему и навигация.
В ASP.NET Web-форма отправляется на сервер, когда происходят определенные события, например, щелчок клавиши мыши на кнопке. После этого сервер обрабатывает произошедшее событие, реорганизует страницу и отправляет ее обратно в обозреватель. Таким образом, страница совершает полный цикл – обозреватель отправляет страницу на сервер, а сервер обрабатывает ее отправляет обратно в обозреватель. Когда Web-форма отправляется из обозревателя на сервер, перед пересылкой на сервер всей информации вначале отправляется информация о произошедших на Web-странице событиях. Эти данные могут включать в себя информацию о нажатых пользователем кнопках, заполненных текстовых полях или элементах, выбранных их раскрывающихся меню, установленных флажках или маркерах. Когда страница попадает на сервер, эти события анализируются и страница обновляется в соответствии со всеми необходимыми изменениями на основе произошедших событий.
Web-форма делится на два отдельных компонента: визуальный компонент, который определяет пользовательский интерфейс, и логику программирования, используемую для управления поведением страницы и расположенных на ней элементов управления. Каждый из этих компонентов хранится в отдельном файле на сервере. Эти компоненты работают совместно для создания страницы, которая затем немедленно возвращается в обозреватель пользователя.
Пример создания Web-приложения «Hello, World!»
Приложения ASP.NET могут быть созданы множеством различных способов, но наиболее мощным инструментом для создания этих приложений является Visual Studio. Эта среда разработки от Microsoft может быть использована для создания как Web-сайтов ASP.NET, так и множества других типов приложений.
Microsoft Web Developer Express – это сложная среда разработки, которая включает множество мощных средств, призванных помочь в процессе разработки. Это сокращенная версия среды разработки Visual Studio.
Web Developer содержит все компоненты, необходимые для создания и тестирования приложений на вашем компьютере. Помимо того что он позволяет создавать и редактировать приложения на вашем компьютере, вы также можете использовать базу
4
данных на вашем локальном компьютере, а тестировать все приложения с помощью обозревателя. Таким образом, вы можете создавать приложение автономно, а позже разместить его на Web-сервере.
Рассмотрим процесс создания простой Web-страницы, в которой по нажатию на кнопку
втекстовом поле выводится “Hello, World!”:
1.Запускаем Web Developer. На экране будет отображена среда разработки, похожая на ту, что изображена на рисунке:
Интерфейс Web Developer содержит множество знакомых компонентов, типичных для приложений Windows. Вверху расположены меню и ярлыки, а внизу – панель статуса. В данный момент не открыто никаких проектов. Панель справа называется Обозреватель решений, которая отображает файлы, используемые в текущем проекте.
Все приложения ASP.NET создаются внутри контейнера, называемого Web-сайтом. Web-сайт, по сути, является директорией, в которой хранятся все файлы, связанные с Web-приложением. Группировка этих файлов внутри этой директории облегчает при необходимости перенос приложений на другой носитель. Эта возможность особенно важна, когда вы разрабатываете приложение на локальном компьютере, а позже хотите перенести его на Web-сервер. Таким образом, при начале создания нового Webприложения вам обычно нужно создать новый Web-сайт, а затем начать разрабатывать страницы, которые будут в нем использоваться.
2.Чтобы создать новый Web-сайт ASP.NET, выберите пункт Файл -> Создать проект. Появится диалоговое окно Создать проект:
5
В этом диалоговом окне выберите тип проекта Visual C# -> Web и шаблон Вебприложение ASP.NET. Также необходимо указать имя и расположение директории, которая будет создана для хранения этого Web-сайта.
3.Нажмите кнопку ОК, и Web Developer создаст директорию и добавит в нее основные файлы, необходимые для работы приложения ASP.NET.
После того, как приложение было создано, вы увидите в интерфейсе Web Developer несколько новых элементов. В главном окне находится исходный HTML-код приложения. Этот код уже содержит информацию о заголовке, а также блок формы, в котором будет основа приложения.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Hello_._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></title> </head>
<body>
<form id="form1" runat="server"> <div>
</div> </form>
</body>
6
</html>
Обозреватель решений справа показывает, что директория Hello! была создана и уже содержит файл Default.aspx – это компонент пользовательского интерфейса приложения. Нажав на плюс рядом с Default.aspx, можно увидеть соответствующий файл Default.aspx.cs для программного кода Visual C# . NET, который вы напишете для приложения.
В нижней части главного окна расположены вкладки для просмотра главной страницы в режиме конструктора (Конструктор) или в режиме кода (Иходный код). В данный момент отображается исходный код страницы. Обратим внимание на первую строку документа, заключенную в брекеты <% и %>. Эта строка является опознавательным знаком, что страница является частью ASP.NET-приложения. Режим конструктора предоставляет интерфейс, который намного упрощает процесс разработки, особенно что касается добавления серверных элементов управления и форматирования Web-страницы.
4.Теперь необходимо добавить на страницу нашего Web-приложения кнопку и текстовое поле. При добавлении элементов управления на страницу очень полезна панель инструментов. Её можно отобразить, используя пункт Панель элементов меню Вид, либо вкладку Панель элементов, находящуюся слева. Это приведет к отображению панели инструментов в левой части экрана, как показано на рисунке:
На панели инструментов щелкните по элементу Button (кнопка) и перетащите его на страницу. Затем перенесите элемент TextBox (текстовое поле) с панели инструментов на страницу. Для размещения кнопки или текстового поля на странице, используйте параметры меню Формат->Задать положение->Абсолютное. В окне Свойства измените значение свойства Text элемента управления Button на «ОК». Страница должна выглядеть примерно так, как показано на рисунке:
7
5.После завершения создания макета страницы, последнее, что нужно сделать – создать код для кнопки, который по щелчку будет выводить в текстовом поле надпись “Hello, World!”. Для этого дважды щелкните по кнопке, и на экране появится страница Default.aspx.cs. В методе Button1_Click разместите следующий
код:
TextBox1.Text = "Hello, World!";
Содержимое файла Default.aspx.cs должно выглядеть так:
using System;
using System.Collections.Generic; using System.Linq;
using System.Web; using System.Web.UI;
using System.Web.UI.WebControls;
namespace Hello__World_
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
TextBox1.Text = "Hello, World!";
}
}
}
6.Используйте пункт Сохранить все из меню Файл, чтобы сохранить пользовательский интерфейс (Default.aspx) и код (Default.aspx.cs).
7.Чтобы протестировать приложение, отобразите файл Default.aspx и используйте пункт Просмотр в обозревателе меню Файл. В браузере после нажатия на кнопку «ОК» должно быть отображено следующее:
8
HTML-дизайн
Естественно, нет смысла использовать только серверные элементы управления для создания Web-страниц. Если нет нужды обрабатывать некие элементы в сценариях ASP.NET, всегда можно воспользоваться обычными элементами HTML, размещенными на одноименной вкладке панели инструментов.
Все элементы оформления Web-страниц в терминологии Microsoft Web Developer Express являются объектами со своими свойствами и методами. При помощи свойств задаются параметры тэгов, реализующих тот или иной элемент Web-страницы и их значения.
Рассмотрим объект DOCUMENT. Часть свойств этого объекта отображена в окне Свойства. В этом окне собраны свойства, управляющие параметрами некоторых тэгов, например, <BODY>. Некоторые свойства объекта DOCUMENT:
∙aLink – позволяет устанавливать цвет, которым будут отображаться активные гиперссылки на Web-странице
∙background – значение данного свойства содержит URL графического изображения, которое будет использоваться в качестве фона для Web-страницы.
∙bgcolor. Свойство задает цвет фона страницы. По умолчанию цвет вводится как комбинация трех двузначных шестнадцатеричных чисел.
∙debug. Логическое свойство. Его значение указывает, надлежит ли среде разработки внедрять в разрабатываемую Wеb-страницу специальные символьные последовательности, позволяющие производить отладку ASP.NETприложения.
∙enableSessionState. Логическое свойство, указывающее, будет ли данная Webстраница поддерживать механизм сеансов работы пользователей.
∙language. Значение этого свойства указывает компилятору, какой язык использовался программистом при разработке приложения ASP.NET, связанного с данной Wеb-страницей.
∙link. Свойство задает цвет, которым будут отображаться не посещенные еще пользователем гиперссылки.
∙text. Свойство задает цвет, которым по умолчанию будет отображаться текст на разрабатываемой Wеb-странице.
∙title. Свойство содержит в качестве значения текстовую строку, которая будет использована как наименование Wеb-страницы, отображаемое в строке заголовка программы-браузера.
∙vlink. Свойство задает цвет, которым будут отображаться пройденные
пользователем гиперссылки.
Теперь перейдем к некоторым элементам, расположенным на вкладке HTML панели инструментов. Они, естественно, имеют несколько меньше свойств, нежели
9
только что рассмотренный нами объект DOCUMENT, причем некоторыe свойства присущи всем элементам, поэтому мы будем рассматривать только уникальные свойства для каждого компонента.
Элемент Input (Button) создает обычную кнопку на разрабатываемой Web-странице. При переносе данного компонента на Web-страницу в режиме дизайна, автоматически добавляется фрагмент HTML-кода следующего вида:
<input id="Button1" type="button" value="Button">
Таким образом, используется тег <input> с типом button. Чаще всего данный элемент оформления Web-страниц используется разработчиками для запуска пользователями каких-либо скриптов, выполняющихся на стороне пользователя. Но какими-либо особыми свойствами этот объект не обладает, поэтому его можно не рассматривать детально.
Также Microsoft Web Developer Express предоставляет возможность использовать кнопки Input (Reset) и Input (Submit), которые реализуются при помощи все того же тега <input>. но лри этом используются иные значения параметра type: reset и submit, соответственно. Надписи на всех трех видах кнопок задаются при помощи свойства value, а стиль отображения регулируется свойством style, в качестве значения которого используется набор инструкций CSS. Кнопка типа Reset, как мы знаем, обновляет содержимое всех органов управления, входяцzих в состав той же формы, что и сама кнопка, устанавливая для них те значения, которые были заданы разработчиком по умолчанию. Кнопка типа Submit позволяет пользователю отправить введенные в орrаны управления формы данные на сервер для их обработки.
Компонент с наименованием Input (Text) позволяет создавать однострочное поле символьного ввода. В НТМL-коде оно реализуется уже знакомым нам тегом <input>, но теперь значение параметра type устанавливается в text. Компонент обладает некоторыми специфическими свойствами.
∙maxlength. Свойство устанавливает максимальное количество символов, которые пользователь может ввести в поле.
∙readonly. Свойство логического типа указьгвает, есть ли у полъзователя возможность изменять информацию, находящуюся в этом поле. Если разработчик установил значение True для этого свойства, то текст, находящийся в поле, изменить будет нельзя.
∙size. Свойство устанавливает видимый раsмер поля ввода в символах.
Поле текстового ввода имеет и две дополнительные модификации. Так, компонент Input (File) совмещает в себе поле текстового ввода и кнопку Обзор…, при нажатии на которую пользователем активизируется стандартное диалоговое окно операционной системы для выбора файла. Файл, который выбрал пользователь, обычно пересылается на сервер для обработки. А компонент Input (Password) фактически является функционапьным двойником обычного поля текстового ввода, за искпючением того, что символы, вводимые пользователем, отображаются в виде звездочек, чтобы никто не смоr увидеть вводимых данных. Естественно, подобная модификация поля текстового ввода чаще всего применяется для запроса различных паролей.
Для того чтобы предоставить полъзователю возможность вводить достаточно большие объемьт текста, разработчик может воспользоваться компонентом Text Area, который позволяет вводить несколько текстовых строк. Внешний вид этого элемента регулируется следующим набором свойств:
∙cols. Свойство задает ширину поля ввода в символах,
∙disabled. Свойство логического типа указывает, будет ли доступен данный орган управления пользователю. Проще говоря, сможет ли он получить фокус
10
ввода;
∙rows. Свойство задает высоту поля ввода в символах, т. е. количество одновременно отображаемых строк в поле;
Элемент Input (Checkboх) является реализацией независимого переключателя.
Представляет собой всего лишь позицию для установки или снятия флажка в виде галочки.
∙checked. Свойство устанавливает начальное состояние переключателя, будет ли установлен в нем флажок или нет. Свойство логическое, поэтому разработчик может использовать только два значения - True или False.
∙name. Свойство устанавливает наименование органа управления, которое будет передано на сервер для обработки. Именно по этим именам обрабатывающая программа и будет различать органы управления.
∙value. Значение этого свойства будет передано на сервер в том случае, если пользователь установит флажок в данном независимом переключателе.
Для того чтобы создать группу зависимых друг от друга переключателей, или, как их еще называют - кнопок выбора, следует воспользоваться соответствующим компонентом с наименованием Input (Radio). Для того чтобы вы могли объединить эти компоненты в одну группу, необходимо установить для всех кнопок переключателей одно и то же значение свойства name. Естественно, встает вопрос, а как программа, обрабатывающая данные, переданные пользователем, будет различать, какая именно кнопка была выбрана пользователем. Для этого используется свойство value. В этом случае обрабатывающей программе будет передано наименование группы кнопок переключателей и значение свойства value той кнопки, которую выбрал лользователь.
С помощью компонента Select можно создать выпадающий и обычный списки. При установки для свойства Multipe значения multiple, выпадающий список превращается в обычный и появляется возможность выбора нескольких элементов списка. С помощью тегов <option>…</option> можно добавить новый элемент в список.
Вставка таблицы на проектируемую Web-страницу производится при помощи компонента Table. По умолчанию создается таблица из трех строк и трех колонок. Однако всегда есть возможность настроить внешний вид настолько тонко, насколько это позволяет технология HTML. Естественно, все параметры отображения таблицы задаются при помощи ее свойств, которые нам предстоит рассмотреть.
∙align. Свойство устанавливает горизонтальное выравнивание содержимого ячеек таблицы. В качестве значения свойства разработчик может использовать одно из трех ключевых слов: left, center и right, которые прижимают содержимое ячеек к левому краю ячеек, центрируют его или прижимают к правому краю, соответственно.
∙bgcolor. Свойство задает цвет фона таблицы.
∙cellpadding. Свойство задает отбивку ячейки, т. е. расстояние между содержимым ячейки и ее границами. В качестве значения свойства используется целое число, обозначающее количество пикселов.
∙cellspacing. Свойство предназначено для установки отступа ячеек, т. е. расстояния между самими ячейками.
∙width. Свойство задает ширину таблицы. Ширина может указываться как в пикселах, так и в процентах.
Все параметры отображения, установленные ддя таблицы, распространяются на ее отдельные строки и ячейки. Однако если разработчик установит другие