ASP.NET Web Forms · ВведениеЗанятие 1
SilverTests.ru · УчебникСоздание веб-страниц на C#
Создаём сайт на ASP.NET
Как работают веб-приложения и как написать первую страницу
0Как работает интернет
Когда ты открываешь сайт, между браузером и сервером происходит разговор. Браузер отправляет запрос (HTTP Request), сервер обрабатывает его и возвращает ответ (HTTP Response) — готовую HTML-страницу.
Аналогия. Браузер — ты в ресторане. Сервер — кухня. Ты делаешь заказ (запрос), кухня готовит блюдо (обрабатывает) и выносит тарелку (ответ — HTML).
Браузервводишь URL
→
СерверIIS + ASP.NET
→
C# кодлогика
→
HTMLрезультат
→
Браузеротображает
Ключевой момент: сервер генерирует HTML при каждом запросе. Страница не лежит готовая — она собирается «на лету» с помощью C#-кода.
1Что такое ASP.NET
ASP.NET — фреймворк от Microsoft для создания веб-приложений. ASP = Active Server Pages — «активные серверные страницы». Слово «серверные» — ключевое: вся работа происходит на сервере, а не в браузере.
Обычный HTML-сайт
Файлы лежат на сервере. Сервер просто отдаёт их как есть. Содержимое всегда одинаковое.
Как книга — текст один для всех.
ASP.NET сайт
На сервере лежит код. Сервер выполняет его и генерирует HTML динамически.
Как ресторан — каждый заказ индивидуальный.
2Структура проекта
Минимальный проект ASP.NET WebForms — папка с несколькими файлами:
MyFirstSite/
├── Default.aspx // разметка (HTML + серверные теги)
├── Default.aspx.cs // код на C# (логика)
├── Web.config // настройки сайта
└── MyFirstSite.sln // файл проекта Visual Studio
Два файла — одна страница. Файл .aspx содержит HTML-разметку с «дырками» для данных. Файл .aspx.cs — C#-код, который эти дырки заполняет. Подход называется code-behind (код «за кулисами»).
3Первая страница: приветствие
Создадим страницу, которая здоровается с пользователем по имени.
Default.aspx — разметка
1<%@ Page Language="C#" CodeBehind="Default.aspx.cs"
2 Inherits="MyFirstSite.DefaultPage" %>
3
4<!DOCTYPE html>
5<html>
6<head>
7 <title>Моя первая страница</title>
8</head>
9<body>
10 <form id="form1" runat="server">
11
12 <h1>Привет!</h1>
13 <p>Как тебя зовут?</p>
14
15 <asp:TextBox ID="txtName" runat="server" />
16 <asp:Button ID="btnHello" runat="server"
17 Text="Поздороваться"
18 OnClick="BtnHello_Click" />
19
20 <asp:Label ID="lblResult" runat="server" />
21
22 </form>
23</body>
24</html>
стр 1–2 — директива <%@ Page %> связывает разметку с файлом C#-кода.
стр 10 — runat="server" превращает форму в серверную. Без этого атрибута C# не сможет работать с элементами.
стр 15–18 — серверные элементы: TextBox (поле ввода), Button (кнопка). Они выглядят как HTML-теги, но начинаются с asp:.
стр 18 — OnClick="BtnHello_Click" указывает, какой C#-метод вызвать при нажатии.
Default.aspx.cs — логика
1using System;
2
3namespace MyFirstSite
4{
5 public partial class DefaultPage : System.Web.UI.Page
6 {
7 protected void BtnHello_Click(object sender, EventArgs e)
8 {
9 string name = txtName.Text;
10 lblResult.Text = "Привет, " + name + "!";
11 }
12 }
13}
стр 5 — класс страницы наследуется от Page. Это даёт доступ ко всем элементам разметки.
стр 7 — обработчик события кнопки. Подробно разберём эту строку на следующем занятии.
стр 9–10 — берём текст из поля ввода и записываем приветствие в Label.
Симуляция: localhost:5000/Default.aspx
Привет!
Как тебя зовут?
4Жизненный цикл страницы
Когда пользователь нажимает кнопку, ASP.NET выполняет цепочку шагов. Это Page Life Cycle:
Запрос — браузер отправляет POST с данными формы (текст из txtName).
Init и Load — ASP.NET создаёт объекты всех элементов и загружает их состояние.
Обработка события — вызывается BtnHello_Click, C#-код меняет lblResult.Text.
Render — серверные элементы превращаются обратно в обычный HTML.
Ответ — готовый HTML отправляется в браузер, страница обновляется.
PostBack — при каждом нажатии кнопки страница перезагружается полностью. Данные формы отправляются на сервер, там обрабатываются, и браузер получает новую версию страницы.
5Серверные элементы управления
В ASP.NET обычный HTML расширяется тегами с префиксом asp:. Основные элементы:
| Элемент |
Что делает |
HTML-аналог |
Доступ из C# |
asp:TextBox |
Поле ввода |
<input type="text"> |
txtName.Text |
asp:Button |
Кнопка (PostBack) |
<input type="submit"> |
OnClick="..." |
asp:Label |
Текстовая метка |
<span> |
lblResult.Text |
asp:DropDownList |
Выпадающий список |
<select> |
ddl.SelectedValue |
asp:CheckBox |
Флажок |
<input type="checkbox"> |
chk.Checked |
Все серверные элементы обязательно должны иметь атрибут runat="server" и находиться внутри тега <form runat="server">.
6Что видит браузер
Браузер никогда не видит C# и теги asp:. Он получает только обычный HTML:
1<form method="post" action="./Default.aspx">
2
3 <!-- Скрытое поле ViewState -->
4 <input type="hidden" name="__VIEWSTATE"
5 value="dDw3NjA3..." />
6
7 <h1>Привет!</h1>
8 <input type="text" name="txtName" />
9 <input type="submit" value="Поздороваться" />
10 <span id="lblResult">Привет, Миша!</span>
11
12</form>
стр 4–5 — __VIEWSTATE — зашифрованная строка, в которой ASP.NET хранит состояние элементов между PostBack'ами. Благодаря ей сервер «помнит», что было на странице.
стр 8–10 — серверные теги asp:TextBox и asp:Label превратились в обычные <input> и <span>.
7Пример посложнее: калькулятор
Простой калькулятор, складывающий два числа. Покажет работу с типами данных и обработку ошибок.
Calc.aspx.cs
1protected void BtnCalc_Click(object sender, EventArgs e)
2{
3 bool okA = int.TryParse(txtA.Text, out int a);
4 bool okB = int.TryParse(txtB.Text, out int b);
5
6 if (okA && okB)
7 {
8 lblAnswer.Text = (a + b).ToString();
9 lblError.Text = "";
10 }
11 else
12 {
13 lblError.Text = "Введи целые числа!";
14 }
15}
стр 3–4 — TryParse безопасно превращает строку в число. Если пользователь введёт «котик», программа не упадёт.
стр 6 — проверяем, что оба числа распознались успешно.
Симуляция: localhost:5000/Calc.aspx
Итоги занятия
Браузер отправляет запрос, сервер возвращает HTML. ASP.NET генерирует страницы динамически с помощью C#. Страница состоит из .aspx (разметка) и .aspx.cs (логика). Серверные элементы (asp:TextBox, asp:Button) управляются из C# через атрибут runat="server". PostBack — отправка формы на сервер с перезагрузкой. ViewState сохраняет состояние между запросами.
На следующем занятии: разберём по частям строку protected void BtnHello_Click(object sender, EventArgs e) — что значит каждое слово.