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

Эрик Рейтан

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

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

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

• Создание проекта приложения веб-форм с файловой системой.
• Знакомство с 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# ->Web templates в левой части экрана.

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-дизайнера и измените параметр Начинать страницы в.
• ToolBox. Предоставляет элементы управления и ЭЛЕМЕНТЫ HTML, которые можно перетащить на страницу. Элементы панели элементов группируются по общей функции.
• Обозреватель erver. Отображает подключения к базе данных. Если обозреватель серверов не отображается, в меню "Вид" щелкните обозреватель серверов.

Создание страницы ASP.NET веб-форм

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

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

1. Закройте страницу Default.aspx . Для этого щелкните вкладку, отображающую имя файла, и выберите параметр закрытия.
2. В Обозреватель решений щелкните правой кнопкой мыши имя веб-приложения (в этом руководстве имя приложения — BasicWebSite), а затем нажмите кнопку "Добавить ->Новый элемент".
   Откроется диалоговое окно Добавление нового элемента .
3. Выберите группу шаблонов Visual C# ->Web слева. Затем выберите веб-форму из среднего списка и назовите ее 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 для элемента управления Button.

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

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

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

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

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

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

6. Перетащите контрол Label на страницу и бросьте его на отдельной строке под контролом Button.

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

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

   

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

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

   Примечание.

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

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

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

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

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

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

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

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

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

   Примечание.

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

3. В обработчике событий Button1_Click введите Label1 , за которым следует период (.).

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

   

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. Введите имя в текстовое поле и нажмите кнопку "Отображаемое имя ".

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

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

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

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

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

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

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

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

1. В Visual Studio перейдите в режим конструктора .

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

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

   

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

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

   

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

5. Переключите в режим исходного кода.

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

   

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

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

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

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. В браузере просмотрите исходный код страницы.

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

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

Дальнейшие шаги

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

• Узнайте больше о веб-формах ASP.NET, следуя пошаговому циклу руководств Начало работы с ASP.NET 4.5 веб-формами и Visual Studio 2013.
• Дополнительные сведения о каскадных таблицах стилей (CSS). Дополнительные сведения см. в статье "Работа с CSS".