Створення веб-сайту та сторінки

У першій частині даного покрокового керівництва створюється веб-сайт ASP.NET з сторінкою за замовчуванням. Цей веб-сайт буде веб-вузлом на базі файлової системи, для роботи якого не потрібні служби Microsoft Internet Information Services (IIS). Це дозволяє запустити створену сторінку на локальній файловій системі комп'ютера.

Веб-узел на базе файловой системы хранит страницы и другие файлы в какой-либо папке локального компьютера. Другой тип веб-узла — веб-узел на базе локальных служб IIS, который хранит файлы во вложенной папке корневой папки локальных служб IIS (обычно \Inetpub\wwwroot\). Веб-узел на базе FTP хранит файлы на удаленном сервере, доступ к которому осуществляется по протоколу передачи файлов FTP. Удаленный веб-узел хранит файлы на удаленном сервере, доступном через локальную сеть. Дополнительные сведения см. в разделе Пошаговое руководство. Редактирование веб-узлов с FTP в Visual Web Developer.

Создание веб-узла на базе файловой системы

1. Откройте Visual Web Developer.

2. В меню Файл выберите пункт Создать веб-узел.

Откроется диалоговое окно Новый веб-узел, как показано на следующем рисунке.

3. В группе Установленные шаблоны Visual Studio выберите Веб-узел ASP.NET.

4. В списке Расположение выберите Файловая система и введите имя папки, в которой будут храниться страницы веб-узла.

Например, введите имя папки D:\MN_41\IT_labs

5. В списке Язык выберите язык программирования, который будет использоваться в веб-проекте: Visual Basic.

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

7. Нажмите кнопку OК.

Visual Web Developer создаст папку и новую страницу с именем Default.aspx.

Добавление к веб-узлу страницы с разделением кода

1. Закройте страницу Default.aspx. Для этого щелкните правой кнопкой мыши вкладку с именем файла и выберите команду Закрыть.

2. В обозревателе решений щелкните правой кнопкой мыши веб-узел (например C:\BasicWebSite) и выберите команду Добавить новый элемент.

3. В разделе Установленные шаблоны Visual Studio выберите Форма Web Forms.

4. В поле Имя введите WebPageSeparated.

5. В списке «Язык» выберите язык программирования, с которым вы предпочитаете работать (Visual Basic или C#).

6. Убедитесь, что установлен флажок Размещать код в отдельном файле.

По умолчанию этот флажок установлен.

7. Нажмите кнопку Добавить.

В Visual Web Developer создаются два файла. В файле WebPageSeparated.aspx, открытом в редакторе, содержатся элементы управления и текст страницы. В файле WebPageSeparated.aspx.vb или WebPageSeparated.aspx.cs (в зависимости от выбранного языка программирования) содержится код страницы. Чтобы просмотреть оба файла в обозревателе решений, щелкните знак плюса (+), расположенный рядом с файлом WebPageSeparated.aspx. Создаваемый файл кода изначально не открывается. Этот файл будет открыт позднее для написания кода.

Добавление на страницу HTML-кода

В этом разделе пошагового руководства на страницу WebPageSeparated.aspx добавляется статический текст HTML.

Добавление текста на страницу

1. Выберите расположенную в нижней части окна документа вкладку Конструктор, чтобы переключиться в представление конструирования.

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

2. Установите точку вставки на элемент div, расположенный на странице.

Введите текст Вас вітає Visual Web Developer. Створення сторінки з розділенням коду.

3. Перейдите в представление исходного кода.

В этом режиме отображается HTML-код, созданный в представлении конструирования. На этом этапе страница выглядит, как обычная страница HTML. Единственное отличие заключается в наличии директивы <%@ Page %> в верхней части страницы.

Добавление и программирование элементов управления

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

Добавление на страницу элементов управления

1. Выберите вкладку Конструктор, чтобы перейти в представление конструирования.

2. Установите точку вставки после ранее добавленного текста.

3. Несколько раз нажмите клавишу ВВОД, чтобы создать пустую область страницы.

4. С вкладки Стандартные в панели элементов перетащите на страницу элементы управления Label, TextBox, Button і ще раз Label.

5. Установите точку вставки перед текстовым полем и введите текст Введите ваше имя:.

Этот статический текст HTML используется в качестве заголовка элемента управления TextBox. На одной странице могут использоваться статические элементы управления HTML и серверные элементы.

Виділіть елемент Label1. У вікні Властивості (правий нижній куток вікна) у властивість Text введіть слово Реєстрація.

Установка свойств элемента управления

1. Выберите элемент управления Button, затем в окне Свойства присвойте его свойству Text значение Ввести.

2. Виділіть елемент Label2. У вікні Властивості (правий нижній куток вікна) у властивість Text введіть слово Привіт, незнайомець!

3. Перейдите в представление исходного кода.

В представлении исходного кода отображается HTML-код страницы, включая элементы, автоматически создаваемые в Visual Web Developer для серверных элементов управления. Для объявления элементов управления используется схожий с HTML синтаксис. Отличие заключается в использовании префикса asp: и атрибута runat="server".

Свойства элемента управления объявляются как атрибуты. Например, при установке свойства Text кнопки на шаге 1 фактически устанавливается атрибут Text разметки элемента управления.

Обратите внимание, что все элементы управления размещаются внутри элемента form, который также обладает атрибутом runat="server". Атрибут runat="server" и префикс asp: определяют обработку элементов управления средствами ASP.NET при выполнении страницы.

Добавление используемого по умолчанию обработчика событий кнопки

1. Перейдите в представление конструирования.

2. Дважды щелкните элемент управления Button.

В отдельном окне редактора Visual Web Developer открывается файл WebPageSeparated.aspx.vb или WebPageSeparated.aspx.cs. В этом файле содержится общая схема обработчика событий Click кнопки.

3. Добавьте выделенный ниже код в обработчик событий Click.

   Язык Visual Basic	Копировать код
   Protected Sub Button1_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Button1.Click Label2.Text = " Привіт, " & TextBox1.Text End Sub

4. Обратите внимание, что благодаря применению функции IntelliSense в процессе ввода предлагаются контекстные варианты выбора. Процесс написания кода однофайловой страницы выглядит аналогичным образом.

Просмотр страницы и файла кода

На данный момент созданы оба файла, составляющие полную страницу WebPageSeparated: WebPageSeparated.aspx и WebPageSeparated.aspx.vb или WebPageSeparated.aspx.cs. В этом разделе пошагового руководства показан порядок просмотра структуры и взаимосвязи этих файлов.

Просмотр страницы и файла кода

1. Выберите расположенную в верхней части окна редактора вкладку WebPageSeparated.aspx, чтобы перейти к файлу страницы.

2. Перейдите в представление исходного кода.

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

Язык Visual Basic	Скопіювати код
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="WebPageSeparated.aspx.vb" Inherits="WebPageSeparated" %>

(Перенос строк в редакторе не выполняется. Атрибут языка и расширение файла соответствуют выбранному языку программирования.)

При выполнении страницы средствами ASP.NET автоматически создается экземпляр класса, представляющего эту страницу. Атрибут Inherits задает класс, определенный в файле кода программной части, от которого наследуется страница ASPX. По умолчанию имя класса, создаваемого в файле кода программной части, соответствует имени страницы.

Атрибут CodeFile определяет файл кода для этой страницы. Другими словами, файл кода программной части содержит код обработки событий страницы.

3. Выберите вкладку WebPageSeparated.aspx.vb или WebPageSeparated.aspx.cs, чтобы перейти к файлу кода.

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

Выполнение страницы

Щоб перевірити, як працює сторінка, натисніть на палітрі інструментів клавішу Перегляд в оглядачі.

Одержимо щось назразок