Статья Автор: Деникина Н.В., Деникин А.В.

Форма отзывы

ASP.NET Web Forms · ПрактикаЗанятие 2.9
SilverTests.ru · УчебникФорма отзыва — задание
Форма отзыва

Практика: TextMode MultiLine, Panel, Visible, Bootstrap-карточки


🎯 Что нужно сделать

Создать страницу, где пользователь оставляет отзыв на игру: вводит имя, выбирает оценку от 1 до 5, пишет текст отзыва. После нажатия кнопки форма скрывается, а вместо неё появляется красивая карточка с отзывом. Всё оформлено через Bootstrap.

1Новое в этом задании
Что нового Элемент / свойство Зачем
Многострочное поле ввода TextBox с TextMode="MultiLine" Текст отзыва (несколько строк)
Скрытие/показ блоков asp:Panel + Visible Форма прячется, карточка появляется
Bootstrap-карточка Классы card, card-body Красивый вывод результата
Повтор символа new string('★', n) Нарисовать звёздочки по оценке
TextMode="MultiLine" — превращает обычный TextBox из однострочного <input> в многострочный <textarea>. Пользователь может писать несколько строк текста. Добавь Rows="4", чтобы задать высоту.
asp:Panel — контейнер для группы элементов. Главное свойство — Visible: если false, вся панель и всё внутри неё исчезает со страницы. Это не CSS display:none — ASP.NET вообще не отправляет HTML этого блока в браузер.

2Образец: два состояния страницы
Состояние 1: форма ввода
localhost:5000/Review.aspx

Оставь отзыв

Состояние 2: карточка с отзывом
localhost:5000/Review.aspx (после отправки)

Спасибо за отзыв!

★★★★★
Отличная игра! Прошёл три раза, каждый раз находил что-то новое.
— Миша

После нажатия «Отправить» форма пропадает, а вместо неё появляется карточка. Это делается через две Panel с разным Visible.


3Что должно работать
  • Поле «Имя» — обычный TextBox
  • Выпадающий список «Оценка» — DropDownList с вариантами 1, 2, 3, 4, 5
  • Поле «Отзыв» — многострочный TextBox (TextMode="MultiLine")
  • Если имя или отзыв пустые — показать ошибку, не отправлять
  • После отправки: форма скрывается, появляется карточка с данными
  • В карточке: звёздочки по оценке (★★★☆☆), текст отзыва, имя
  • Всё оформлено через Bootstrap (form-control, btn, card)

4Поиграй с готовой версией

Оставь отзыв

 

5Подсказки (раскрывай по одной)
Подсказка 1: структура — две Panel

Оберни форму в одну Panel, а карточку результата — в другую. При открытии страницы форма видна, карточка скрыта:

<asp:Panel ID="pnlForm" runat="server" Visible="true">
<!-- тут форма: TextBox, DropDownList, Button -->
</asp:Panel>
 
<asp:Panel ID="pnlResult" runat="server" Visible="false">
<!-- тут карточка с отзывом -->
</asp:Panel>

При отправке из C# переключаем: pnlForm.Visible = false; pnlResult.Visible = true;

Подсказка 2: многострочный TextBox
<asp:TextBox ID="txtReview" runat="server"
TextMode="MultiLine"
Rows="4"
CssClass="form-control"
Placeholder="Напиши, что понравилось..." />

TextMode="MultiLine" — ключевое. Браузер покажет большое текстовое поле вместо однострочного. Rows="4" — высота в строках. Чтение текста — как обычно: txtReview.Text.

Подсказка 3: валидация (проверка пустых полей)
string name = txtName.Text.Trim();
string review = txtReview.Text.Trim();
 
if (name == "" || review == "")
{
lblError.Text = "Заполни все поля!";
lblError.CssClass = "alert alert-danger mt-2";
return;
}

Trim() убирает пробелы по краям. Без него строка из одних пробелов прошла бы проверку.

Подсказка 4: звёздочки по оценке

В C# можно создать строку из повторяющегося символа:

int rating = int.Parse(ddlRating.SelectedValue);
 
string stars = new string('★', rating) // ★★★★
+ new string('☆', 5 - rating); // ☆
// Для оценки 4: "★★★★☆"

new string('★', 4) создаёт строку "★★★★". Первый аргумент — символ, второй — сколько раз повторить.

Подсказка 5: Bootstrap-карточка в разметке

Карточка (card) — Bootstrap-компонент для красивого отображения блока информации:

<div class="card mt-3">
<div class="card-body">
<asp:Label ID="lblStars" runat="server"
style="font-size:24px;color:#c9962c" />
<p class="card-text">
<asp:Label ID="lblReviewText" runat="server" />
</p>
<p class="card-text text-muted">
— <asp:Label ID="lblReviewName" runat="server" />
</p>
</div>
</div>

card — рамка с закруглёнными углами. card-body — внутренний отступ. card-text — текст. text-muted — серый цвет.

Подсказка 6: обработчик целиком
protected void BtnSubmit_Click(object sender, EventArgs e)
{
string name = txtName.Text.Trim();
string review = txtReview.Text.Trim();
 
if (name == "" || review == "")
{
lblError.Text = "Заполни все поля!";
return;
}
 
int rating = int.Parse(ddlRating.SelectedValue);
string stars = new string('★', rating)
+ new string('☆', 5 - rating);
 
lblStars.Text = stars;
lblReviewText.Text = review;
lblReviewName.Text = name;
 
pnlForm.Visible = false; // прячем форму
pnlResult.Visible = true; // показываем карточку
}

6Полное решение
Показать решение целиком
Review.aspx
1<%@ Page Language="C#" CodeBehind="Review.aspx.cs"
2 Inherits="MyFirstSite.Review" %>
3
4<!DOCTYPE html>
5<html>
6<head>
7 <title>Отзыв</title>
8 <link rel="stylesheet"
9 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
10</head>
11<body>
12 <div class="container mt-4" style="max-width:500px">
13 <form id="form1" runat="server">
14
15 <!-- ═══ ФОРМА ═══ -->
16 <asp:Panel ID="pnlForm" runat="server" Visible="true">
17
18 <h2 class="mb-4">Оставь отзыв</h2>
19
20 <div class="mb-3">
21 <label class="form-label">Твоё имя:</label>
22 <asp:TextBox ID="txtName" runat="server"
23 CssClass="form-control"
24 Placeholder="Как тебя зовут?" />
25 </div>
26
27 <div class="mb-3">
28 <label class="form-label">Оценка:</label>
29 <asp:DropDownList ID="ddlRating" runat="server"
30 CssClass="form-select">
31 <asp:ListItem Value="1">1 — ужасно</asp:ListItem>
32 <asp:ListItem Value="2">2 — плохо</asp:ListItem>
33 <asp:ListItem Value="3">3 — нормально</asp:ListItem>
34 <asp:ListItem Value="4">4 — хорошо</asp:ListItem>
35 <asp:ListItem Value="5" Selected="True">5 — отлично</asp:ListItem>
36 </asp:DropDownList>
37 </div>
38
39 <div class="mb-3">
40 <label class="form-label">Отзыв:</label>
41 <asp:TextBox ID="txtReview" runat="server"
42 TextMode="MultiLine"
43 Rows="4"
44 CssClass="form-control"
45 Placeholder="Напиши, что понравилось..." />
46 </div>
47
48 <asp:Button ID="btnSubmit" runat="server"
49 Text="Отправить"
50 CssClass="btn btn-primary"
51 OnClick="BtnSubmit_Click" />
52
53 <asp:Label ID="lblError" runat="server"
54 CssClass="alert alert-danger mt-2"
55 style="display:block" Visible="false" />
56
57 </asp:Panel>
58
59 <!-- ═══ РЕЗУЛЬТАТ ═══ -->
60 <asp:Panel ID="pnlResult" runat="server" Visible="false">
61
62 <h2 class="mb-3">Спасибо за отзыв!</h2>
63
64 <div class="card">
65 <div class="card-body">
66 <asp:Label ID="lblStars" runat="server"
67 style="font-size:22px;color:#c9962c" />
68 <p class="card-text mt-2">
69 <asp:Label ID="lblReviewText" runat="server" />
70 </p>
71 <p class="card-text text-muted">
72 — <asp:Label ID="lblReviewName" runat="server" />
73 </p>
74 </div>
75 </div>
76
77 </asp:Panel>
78
79 </form>
80 </div>
81</body></html>

стр 16, 60 — две Panel: форма (Visible="true") и результат (Visible="false"). При отправке меняются местами.

стр 30form-select — Bootstrap-класс для <select>. Для DropDownList используется он, а не form-control.

стр 42TextMode="MultiLine" + Rows="4" — многострочное поле.

стр 53–55 — Label для ошибки. Visible="false" — изначально скрыт, появится только если пользователь оставил пустое поле.

стр 64–75 — Bootstrap-карточка: cardcard-body → содержимое.

Review.aspx.cs
1using System;
2
3namespace MyFirstSite
4{
5 public partial class Review : System.Web.UI.Page
6 {
7 protected void BtnSubmit_Click(object sender, EventArgs e)
8 {
9 string name = txtName.Text.Trim();
10 string review = txtReview.Text.Trim();
11
12 // Валидация
13 if (name == "" || review == "")
14 {
15 lblError.Text = "Заполни все поля!";
16 lblError.Visible = true;
17 return;
18 }
19
20 // Звёздочки
21 int rating = int.Parse(ddlRating.SelectedValue);
22 string stars = new string('★', rating)
23 + new string('☆', 5 - rating);
24
25 // Заполняем карточку
26 lblStars.Text = stars;
27 lblReviewText.Text = review;
28 lblReviewName.Text = name;
29
30 // Переключаем панели
31 pnlForm.Visible = false;
32 pnlResult.Visible = true;
33 }
34 }
35}

стр 9–10Trim() обрезает пробелы. Без него строка " " прошла бы проверку.

стр 16lblError.Visible = true показывает Label с ошибкой. В отличие от CSS, Visible в ASP.NET контролирует, вообще рендерится ли элемент в HTML.

стр 22–23new string('★', 3)"★★★". Заполненные + пустые = всегда 5.

стр 31–32 — главный трюк: форма пропадает, карточка появляется. Одна страница, два состояния.


7Если получилось — попробуй улучшить
  • Добавить кнопку «Оставить ещё один отзыв» в панели результата — она вернёт форму обратно
  • Менять цвет карточки по оценке: 1–2 красная (border-danger), 3 жёлтая (border-warning), 4–5 зелёная (border-success)
  • Добавить CheckBox «Рекомендую друзьям» и показывать его статус в карточке
  • Показывать дату и время отзыва: DateTime.Now.ToString("dd.MM.yyyy HH:mm")
  • Добавить DropDownList с выбором игры (Minecraft, Fortnite, Roblox) и показывать название в карточке

Что мы потренировали

TextMode="MultiLine" — многострочное поле ввода (<textarea>). asp:Panel + Visible — скрытие и показ целых блоков страницы из C#. Bootstrap-карточка — card, card-body, card-text, text-muted. Bootstrap-класс для выпадающих списков — form-select (а не form-control). Конструктор new string(символ, количество) — повтор символа. Валидация: проверка пустых полей + Trim() + return для прерывания обработчика. Управление видимостью Label через Visible для показа ошибок.

На следующем занятии: подключаем базу данных — чтобы отзывы не пропадали при перезагрузке, а копились в таблице.

© SilverTests.ru · ASP.NET Web Forms · Практика · Форма отзыва
Печать