Использование Visual Studio 2013 для создания страницы веб-формы Basic ASP.NET 4.5

Эрик Рейтан

Для разработки новых веб-приложений рекомендуется Razor Pages. Дополнительные сведения см. в статье Начало работы с Razor Pages.

В этом пошаговом руководстве представлены общие сведения о среде веб-разработки в Microsoft Visual Studio 2013 и в Microsoft Visual Studio Express 2013 г. для Web. В этом пошаговом руководстве описывается создание простой страницы ASP.NET Web Forms и демонстрируются основные методы создания новой страницы, добавления элементов управления и написания кода.

В данном пошаговом руководстве представлены следующие задачи.

• Создание файловой системы веб-формы проекта приложения.
• Знакомство с Visual Studio.
• Создание страницы ASP.NET.
• Добавление элементов управления.
• Добавление обработчиков событий.
• Запуск и тестирование страницы из Visual Studio.

Предварительные требования

Для выполнения данного пошагового руководства требуется:

• Microsoft Visual Studio 2013 или Microsoft Visual Studio Express 2013 для Интернета. Платформа .NET Framework устанавливается автоматически.

  Примечание

  Microsoft Visual Studio 2013 и Microsoft Visual Studio Express 2013 для Интернета часто называютСя Visual Studio в этой серии учебников.

  Если вы используете Visual Studio, в этом пошаговом руководстве предполагается, что вы выбрали коллекцию параметров Веб-разработка при первом запуске Visual Studio. Дополнительные сведения см. в разделе Практическое руководство. Выбор параметров среды веб-разработки.

Создание проекта веб-приложения и страницы

В этой части пошагового руководства вы создадите проект веб-приложения и добавите в него новую страницу. Вы также добавите html-текст и запустите страницу в браузере.

Создание проекта веб-приложения

1. Откройте среду Microsoft Visual Studio.

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

   Откроется диалоговое окно Новый проект .

3. Выберите группу Шаблоны ->Visual C# ->Веб-шаблоны слева.

4. Выберите шаблон Веб-приложения ASP.NET в центральном столбце.

5. Назовите проект BasicWebApp и нажмите кнопку ОК .
   

6. Затем выберите шаблон веб-формы и нажмите кнопку ОК, чтобы создать проект.
   

   Visual Studio создает новый проект, включающий предварительно созданные функции на основе шаблона веб-формы. Он не только предоставляет страницу Home.aspx , страницу About.aspx , страницу Contact.aspx , но также включает функции членства, которые регистрируют пользователей и сохраняют их учетные данные, чтобы они могли войти на ваш веб-сайт. При создании новой страницы Visual Studio по умолчанию отображает ее в исходном представлении, где можно просмотреть html-элементы страницы. На следующем рисунке показано, что вы увидите в представлении "Источник ", если вы создали новую веб-страницу с именем BasicWebApp.aspx.
   

Обзор среды веб-разработки Visual Studio

Прежде чем продолжить изменение страницы, полезно ознакомиться со средой разработки Visual Studio. На следующем рисунке показаны окна и средства, доступные в Visual Studio и Visual Studio Express для Интернета.

Примечание

На этой схеме показаны окна и расположения окон по умолчанию. Меню Вид позволяет отображать дополнительные окна, а также изменять их размер в соответствии с вашими предпочтениями. Если в расположение окна уже внесены изменения, то то, что вы видите, не будет соответствовать рисунку.

Среда Visual Studio

Знакомство с веб-конструктором

Изучите приведенный выше рисунок и совпадите текст со следующим списком, в котором описаны наиболее часто используемые окна и инструменты. (Здесь перечислены не все окна и инструменты, которые вы видите, а только те, которые отмечены на предыдущем рисунке.)

• Панели инструментов. Предоставляйте команды для форматирования текста, поиска текста и т. д. Некоторые панели инструментов доступны только при работе в режиме конструктора .
• окно Обозреватель решений. Отображает файлы и папки в веб-приложении.
• Окно документа. Отображает документы, над которыми вы работаете, в окнах с вкладками. Вы можете переключаться между документами, щелкнув вкладки.
• Окно свойств. Позволяет изменять параметры страницы, HTML-элементов, элементов управления и других объектов.
• Вкладки представления. Представление различных представлений одного и того же документа. Представление конструктора — это поверхность редактирования, близка к WYSIWYG. Представление исходного кода — это редактор HTML для страницы. В разделенных представлениях отображаются представления конструктора и исходного представления для документа. Вы будете работать с представлениями Конструктор и Источник далее в этом пошаговом руководстве. Если вы предпочитаете открывать веб-страницы в режиме конструктора, в меню Сервис выберите пункт Параметры, выберите узел HTML-Designer и измените параметр Начальные страницы в.
• ToolBox. Предоставляет элементы управления и элементы HTML, которые можно перетаскивать на страницу. Элементы панели элементов группируются по общей функции.
• S erver Обозреватель. Отображает подключения к базе данных. Если Обозреватель сервера не отображается, в меню Вид выберите сервер Обозреватель.

Создание новой страницы ASP.NET Web Forms

При создании нового приложения веб-формы с помощью шаблона проекта веб-приложения ASP.NET Visual Studio добавляет ASP.NET страницу (веб-формы страницу) с именем Default.aspx, а также несколько других файлов и папок. Страницу Default.aspx можно использовать в качестве домашней страницы веб-приложения. Однако в этом пошаговом руководстве вы создадите новую страницу и будете работать с ней.

Добавление страницы в веб-приложение

1. Закройте страницу Default.aspx . Для этого перейдите на вкладку с именем файла, а затем нажмите кнопку закрыть.
2. В Обозреватель решений щелкните правой кнопкой мыши имя веб-приложения (в этом руководстве имя приложения — BasicWebSite) и выберите команду Добавить ->Новый элемент.
   Откроется диалоговое окно Добавление нового элемента.
3. Выберите группу Visual C# ->Web templates слева. Затем выберите Веб-форма в среднем списке и назовите ее FirstWebPage.aspx.
   
4. Нажмите кнопку Добавить , чтобы добавить веб-страницу в проект.
   Visual Studio создает новую страницу и открывает ее.

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

В этой части пошагового руководства вы добавите статический текст на страницу.

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

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

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

2. Щелкните внутри прямоугольника, который выделен пунктирной линией.

3. Введите Добро пожаловать в Visual Web Developer и дважды нажмите клавишу ВВОД .

   На следующем рисунке показан текст, введенный в режиме конструктора .

   

4. Переключитесь в представление источника .

   Html-код отображается в представлении "Исходный код ", созданном при вводе в конструкторе.
   

Запуск страницы

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

Запуск страницы

1. В Обозреватель решений щелкните правой кнопкой мыши Файл FirstWebPage.aspx и выберите пункт Задать как начальную страницу.

2. Нажмите клавиши CTRL+F5 , чтобы запустить страницу.

   Страница отображается в браузере. Хотя созданная страница имеет расширение ASPX-файла, в настоящее время она выполняется как любая HTML-страница.

   Чтобы отобразить страницу в браузере, можно также щелкнуть правой кнопкой мыши страницу в Обозреватель решений и выбрать команду Просмотреть в браузере.

3. Закройте браузер, чтобы остановить веб-приложение.

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

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

Вы добавите на страницу элементы управления Button , TextBox и Label и напишете код для обработки события Click для элемента управления Кнопка .

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

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

2. Поместите точку вставки в конец текста Добро пожаловать в Visual Web Developer и нажмите клавишу ВВОД пять или более раз, чтобы освободить место в поле элемента div .

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

4. Перетащите элемент управления TextBox на страницу и в середине поля элемента div , в первой строке которого есть добро пожаловать в Visual Web Developer .

5. Перетащите элемент управления Кнопка на страницу и справа от элемента управления TextBox .

6. Перетащите элемент управления Метка на страницу и на отдельной строке под элементом управления Кнопка .

7. Поместите точку вставки над элементом управления TextBox и введите введите свое имя: .

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

   

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

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

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

1. Сначала откройте окна Свойства , выбрав в меню Вид ->Другие окна ->Окно свойств. Кроме того, можно выбрать F4 , чтобы открыть окно Свойства .

2. Выберите элемент управления Кнопка , а затем в окне Свойства задайте для параметра Текст значение Отображаемое имя. Введенный текст отображается на кнопке в конструкторе, как показано на следующем рисунке.

   

3. Переключитесь в представление источника .

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

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

   Примечание

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

4. Затем вы добавите дополнительное свойство в элемент управления Метка . Поместите точку вставки непосредственно после asp:Label в <тег asp:Label> , а затем нажмите клавишу ПРОБЕЛ.

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

   

5. Выберите ForeColor и введите знак равенства.

   IntelliSense отображает список цветов.

   Примечание

   Вы можете в любой момент отобразить раскрывающийся список IntelliSense , нажав клавиши CTRL+J при просмотре кода.

6. Выберите цвет для текста элемента управления Метка . Убедитесь, что выбран достаточно темный цвет для чтения на белом фоне.

   Атрибут ForeColor завершается выбранным цветом, включая закрывающие кавычки.

Программирование элемента управления "Кнопка"

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

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

1. Перейдите в режим конструктора .

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

   По умолчанию Visual Studio переключается на файл кода программной части и создает обработчик событий скелета для события по умолчанию элемента управления Button , события Click . Файл кода программной части отделяет разметку пользовательского интерфейса (например, HTML) от кода сервера (например, C#).
   Курсор размещается на добавленный код для этого обработчика событий.

   Примечание

   Двойной щелчок элемента управления в режиме конструктора — это лишь один из нескольких способов создания обработчиков событий.

3. Внутри обработчика событий Button1_Click введите Label1 и точку (.).

   При вводе периода после идентификатора метки (Label1) Visual Studio отображает список доступных элементов для элемента управления Метка , как показано на следующем рисунке. Элемент обычно является свойством, методом или событием.

   

4. Завершите работу обработчика событий Click для кнопки, чтобы она считывала данные, как показано в следующем примере кода.

   protected void Button1_Click(object sender, System.EventArgs e)
   {    
       Label1.Text = TextBox1.Text + ", welcome to Visual Studio!";
   }
   

   Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
       Label1.Text = Textbox1.Text & ", welcome to Visual Studio!"
   End Sub
   

5. Вернитесь к просмотру исходного представления html-разметки, щелкнув правой кнопкой мыши FirstWebPage.aspx в Обозреватель решений и выбрав Просмотреть разметку.

6. Прокрутите страницу <до элемента asp:Button> . Обратите внимание, что <элемент asp:Button> теперь имеет атрибут onclick="Button1_Click".

   Этот атрибут привязывает событие Click кнопки к методу обработчика, закодированному на предыдущем шаге.

   Методы обработчика событий могут иметь любое имя; Отображаемое имя является именем по умолчанию, созданным Visual Studio. Важно то, что имя атрибута OnClick в HTML-коде должно совпадать с именем метода, определенного в коде программной части.

Запуск страницы

Теперь можно протестировать серверные элементы управления на странице.

Запуск страницы

1. Нажмите клавиши CTRL+F5 , чтобы запустить страницу в браузере. При возникновении ошибки повторно проверьте описанные выше действия.

2. Введите имя в текстовое поле и нажмите кнопку Отображаемое имя .

   Введенное имя отображается в элементе управления Метка . Обратите внимание, что при нажатии кнопки страница публикуется на веб-сервере. ASP.NET затем повторно создает страницу, запускает код (в данном случае запускается обработчик событий Click элемента управления Кнопка), а затем отправляет новую страницу в браузер. Если вы watch строке состояния в браузере, вы увидите, что при каждом нажатии кнопки страница выполняет круговой путь к веб-серверу.

3. В браузере просмотрите источник запущенной страницы, щелкнув правой кнопкой мыши страницу и выбрав Просмотреть источник.

   В исходном коде страницы отображается HTML без серверного кода. В частности, элементы asp:>, с которыми вы работали, в представлении источника не отображаются<. При запуске страницы ASP.NET обрабатывает серверные элементы управления и отображает элементы HTML на странице, выполняющие функции, представляющие элемент управления. Например, <элемент управления asp:Button> отображается как элемент ввода HTML <type="submit".>

4. Закройте браузер.

Работа с дополнительными элементами управления

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

В этом разделе вы добавите элемент управления System.Web.UI.WebControls.Calendar на страницу и отформатируете его.

Добавление элемента управления "Календарь"

1. В Visual Studio переключитесь в режим конструктора .

2. Из раздела Стандартныйпанели элементов перетащите элемент управления Calendar на страницу и перетащите его под элементом div , который содержит другие элементы управления.

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

   

3. На панели смарт-тегов выберите Автоформат.

   Откроется диалоговое окно Автоформат , которое позволяет выбрать схему форматирования для календаря. На следующем рисунке показано диалоговое окно Автоформат для элемента управления Календарь .

   

4. В списке Выберите схему выберите Простая и нажмите кнопку ОК.

5. Переключитесь в представление источника .

   Вы увидите <элемент asp:Calendar> . Этот элемент гораздо длиннее, чем элементы для простых элементов управления, созданных ранее. Он также включает вложенные элементы, такие как <WeekEndDayStyle>, которые представляют различные параметры форматирования. На следующем рисунке показан элемент управления "Календарь" в исходном представлении . (Точная разметка, которая отображается в представлении источника , может немного отличаться от иллюстрации.)

   

Программирование элемента управления "Календарь"

В этом разделе вы запрограммировать элемент управления Календарь для отображения выбранной даты.

Программирование элемента управления "Календарь"

1. В конструкторе дважды щелкните элемент управления Календарь.

   Новый обработчик событий создается и отображается в файле кода программной части с именем FirstWebPage.aspx.cs.

2. Завершите работу обработчика событий SelectionChanged с помощью следующего кода.

   protected void Calendar1_SelectionChanged(object sender, System.EventArgs e)
   {    
       Label1.Text = Calendar1.SelectedDate.ToLongDateString();
   }
   

   Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
       Label1.Text = Calendar1.SelectedDate.ToLongDateString()
   End Sub
   

   Приведенный выше код задает для текста элемента управления "Метка" выбранную дату элемента управления "Календарь".

Запуск страницы

Теперь можно протестировать календарь.

Запуск страницы

1. Нажмите клавиши CTRL+F5 , чтобы запустить страницу в браузере.

2. Щелкните дату в календаре.

   Дата щелчка отображается в элементе управления Метка .

3. В браузере просмотрите исходный код страницы.

   Обратите внимание, что элемент управления "Календарь " отображается на странице в виде таблицы, а каждый день — в виде элемента td .

4. Закройте браузер.

Next Steps

В этом пошаговом руководстве показаны основные функции конструктора страниц Visual Studio. Теперь, когда вы знаете, как создать и изменить страницу веб-формы в Visual Studio, вам может потребоваться изучить другие функции. Например, может потребоваться сделать следующее:

• Дополнительные сведения о ASP.NET Web Forms см. в серии пошаговые руководства начало работы с ASP.NET 4.5 веб-формы и Visual Studio 2013.
• Дополнительные сведения о каскадных таблицах стилей (CSS). Дополнительные сведения см. в статье Общие сведения о работе с CSS.