Создание веб-формы с валидацией на C# для контрольной работы: пошаговая инструкция.

Что нужно знать перед началом работы

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

Конечный результат нашей работы — это интерактивная форма заявки на конференцию. Мы последовательно пройдем через несколько ключевых этапов:

• Создадим удобный и понятный пользовательский интерфейс.
• Настроим «умную» проверку вводимых данных, которая будет работать и в браузере, и на сервере.
• Реализуем базовое сохранение результата в базу данных.

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

Этап 1. Создаем фундамент для нашего веб-приложения

Любой проект начинается с подготовки рабочей среды. Мы будем использовать один из самых популярных фреймворков для C# — ASP.NET Core MVC. Он идеально подходит для нашей задачи, так как изначально разделяет приложение на три логические части, что делает код более чистым и организованным.

Чтобы создать проект, выполните следующие шаги в Visual Studio:

1. Откройте Visual Studio и выберите «Создание нового проекта».
2. В поиске шаблонов введите «ASP.NET Core Web App (Model-View-Controller)».
3. Назовите проект (например, «ConferenceForm») и выберите место его сохранения.
4. В дополнительных параметрах выберите актуальную версию .NET и нажмите «Создать».

После создания проекта вы увидите его структуру в «Обозревателе решений». Вот ключевые папки, с которыми мы будем работать:

• Models: Здесь будут храниться классы, описывающие наши данные (например, данные участника конференции).
• Views: В этой папке лежат файлы представлений (с расширением .cshtml), которые отвечают за HTML-разметку и то, что пользователь видит в браузере.
• Controllers: Контроллеры — это «мозг» приложения. Они обрабатывают запросы от пользователя, работают с моделями и решают, какое представление показать.

Наш цифровой «холст» готов. Следующий шаг — нарисовать на нем саму форму, разместив все необходимые элементы управления.

Этап 2. Проектируем пользовательский интерфейс формы

Теперь создадим визуальную часть нашей формы. В ASP.NET Core MVC за это отвечают файлы представлений (.cshtml). Нам нужно сверстать все поля, указанные в задании: текстовые поля для ФИО, переключатели (radio buttons) для выбора города, выпадающие списки для места работы и должности, а также поле для email и кнопки. Мы будем использовать стандартные HTML-теги.

Ниже приведен полный код разметки для файла представления (например, Views/Home/Index.cshtml). Он включает все требуемые поля, метки для них и кнопки «Отправить» и «Очистить». Обратите внимание, что кнопка отправки изначально неактивна (disabled) — мы «оживим» ее на следующем этапе с помощью JavaScript.

Код разметки формы (HTML)

<form id="conferenceForm">
    <!-- Фамилия -->
    <div>
        <label for="lastName">Фамилия:</label>
        <input type="text" id="lastName" name="lastName">
        <span class="error-message" style="color: green;"></span>
    </div>

    <!-- Имя и Отчество -->
    <div>
        <label for="firstNamePatronymic">Имя Отчество:</label>
        <input type="text" id="firstNamePatronymic" name="firstNamePatronymic">
        <span class="error-message" style="color: green;"></span>
    </div>

    <!-- Город (Radio Buttons) -->
    <div>
        <label>Город:</label>
        <input type="radio" id="city1" name="city" value="Москва"> <label for="city1">Москва</label>
        <input type="radio" id="city2" name="city" value="Санкт-Петербург"> <label for="city2">Санкт-Петербург</label>
        <input type="radio" id="city3" name="city" value="Казань"> <label for="city3">Казань</label>
        <input type="radio" id="city4" name="city" value="Новосибирск"> <label for="city4">Новосибирск</label>
        <input type="radio" id="city5" name="city" value="Екатеринбург"> <label for="city5">Екатеринбург</label>
    </div>

    <!-- Место работы (Select) -->
    <div>
        <label for="workplace">Место работы:</label>
        <select id="workplace" name="workplace">
            <option value="">--Выберите место работы--</option>
            <option value="Компания 1">Компания 1</option>
            <option value="Компания 2">Компания 2</option>
            <option value="Компания 3">Компания 3</option>
            <option value="Компания 4">Компания 4</option>
            <option value="Компания 5">Компания 5</option>
        </select>
    </div>

    <!-- Должность (Select) -->
    <div>
        <label for="position">Должность:</label>
        <select id="position" name="position">
            <option value="Ассистент">Ассистент</option>
            <option value="Старший преподаватель">Старший преподаватель</option>
            <option value="Доцент">Доцент</option>
            <option value="Профессор">Профессор</option>
        </select>
    </div>
    
    <!-- Email -->
    <div>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
        <span class="error-message" style="color: green;"></span>
    </div>

    <!-- Кнопки -->
    <div>
        <button type="submit" id="submitButton" disabled>Отправить</button>
        <button type="reset">Очистить</button>
    </div>

    <!-- Суммарный валидатор -->
    <div id="summaryValidator" style="color: red; margin-top: 15px;"></div>
</form>

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

Этап 3. Реализуем клиентскую валидацию как первую линию обороны

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

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

Ниже представлен пример скрипта, который реализует эту логику. Его можно разместить в секции <script> в конце вашего .cshtml файла или в отдельном .js файле.

Пример кода для клиентской валидации (JavaScript)

document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('conferenceForm');
    const submitButton = document.getElementById('submitButton');
    const inputs = form.querySelectorAll('input[type="text"], input[type="email"]');

    function validateField(field) {
        const errorSpan = field.nextElementSibling;
        let isValid = true;
        let errorMessage = '';

        switch (field.id) {
            case 'lastName':
                const lastName = field.value;
                if (lastName.length < 3 || lastName.length > 20) {
                    errorMessage = 'Фамилия должна содержать от 3 до 20 символов.';
                } else if (/\d/.test(lastName)) {
                    errorMessage = 'Фамилия не должна содержать цифр.';
                } else if (lastName.charAt(0) !== lastName.charAt(0).toUpperCase()) {
                    errorMessage = 'Первая буква фамилии должна быть заглавной.';
                }
                break;
            case 'firstNamePatronymic':
                const name = field.value;
                if (name.length < 3 || name.length > 30) {
                    errorMessage = 'Имя и отчество должны содержать от 3 до 30 символов.';
                } else if (/\d/.test(name)) {
                    errorMessage = 'Имя и отчество не должны содержать цифр.';
                } else if (!/^[А-ЯЁ][а-яё]+(\s[А-ЯЁ][а-яё]+)*$/.test(name)) {
                    errorMessage = 'Первая буква каждого слова должна быть заглавной.';
                }
                break;
        }

        if (errorMessage) {
            errorSpan.textContent = errorMessage;
            isValid = false;
        } else {
            errorSpan.textContent = '';
        }
        return isValid;
    }

    function checkFormValidity() {
        let isFormValid = true;
        inputs.forEach(input => {
            if (!validateField(input)) {
                isFormValid = false;
            }
        });
        
        // Добавьте сюда проверки для radio и select, если они обязательны
        // ...

        submitButton.disabled = !isFormValid;
    }

    form.addEventListener('input', checkFormValidity);
});

Мы обезопасили ввод на стороне пользователя. Но что, если у него отключен JavaScript? Настоящий профессионал всегда дублирует проверки на сервере.

Этап 4. Внедряем серверную валидацию для гарантированной защиты данных

Серверная валидация — это главный механизм защиты вашего приложения. В отличие от клиентской, ее невозможно обойти, что гарантирует целостность и безопасность данных, поступающих на сервер. В ASP.NET Core для этого используется элегантный механизм атрибутов валидации (Data Annotations), которые добавляются прямо в класс модели.

Сначала создадим класс модели, который будет представлять участника конференции. В папке Models создайте файл Participant.cs и добавьте в него свойства для каждого поля формы. К этим свойствам мы применим атрибуты, которые точно повторяют наши правила валидации: [Required], [StringLength] и [RegularExpression].

Класс модели с атрибутами валидации (Participant.cs)

using System.ComponentModel.DataAnnotations;

public class Participant
{
    [Required(ErrorMessage = "Поле 'Фамилия' обязательно для заполнения.")]
    [StringLength(20, MinimumLength = 3, ErrorMessage = "Длина фамилии от 3 до 20 символов.")]
    [RegularExpression("^[А-ЯЁ][а-яё]+$", ErrorMessage = "Фамилия должна начинаться с заглавной буквы и не содержать цифр.")]
    public string LastName { get; set; }

    [Required(ErrorMessage = "Поле 'Имя Отчество' обязательно.")]
    [StringLength(30, MinimumLength = 3, ErrorMessage = "Длина от 3 до 30 символов.")]
    [RegularExpression(@"^[А-ЯЁ][а-яё]+(\s[А-ЯЁ][а-яё]+)*$", ErrorMessage = "Первая буква каждого слова должна быть заглавной, цифры запрещены.")]
    public string FirstNamePatronymic { get; set; }

    [Required(ErrorMessage = "Необходимо выбрать город.")]
    public string City { get; set; }

    [Required(ErrorMessage = "Необходимо выбрать место работы.")]
    public string Workplace { get; set; }

    [Required(ErrorMessage = "Необходимо выбрать должность.")]
    public string Position { get; set; }

    [Required(ErrorMessage = "Email обязателен.")]
    [EmailAddress(ErrorMessage = "Некорректный формат email.")]
    public string Email { get; set; }
}

Теперь, когда данные с формы придут на сервер, фреймворк автоматически проверит их на соответствие этим правилам. В контроллере нам останется лишь проверить специальное свойство ModelState.IsValid, чтобы узнать результат этой проверки. Теперь у нас есть и клиентская, и серверная логика проверки. Нужно связать их воедино — обработать отправку формы и правильно показать пользователю результаты серверной проверки.

Этап 5. Организуем обработку отправки формы и вывод ошибок

Полный цикл обработки данных завершается в контроллере. Нам нужно создать метод, который будет принимать данные, отправленные формой (HTTP POST-запрос). Этот метод будет работать с нашей моделью Participant, и именно в нем мы проверим результаты серверной валидации.

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

• Если ModelState.IsValid возвращает true, это значит, что все проверки пройдены успешно. Мы можем выполнять дальнейшие действия, например, сохранять данные в базу и перенаправлять пользователя на страницу с сообщением об успехе.
• Если возвращается false, значит, есть ошибки валидации. В этом случае мы должны вернуть пользователя на ту же страницу с формой, но уже с отображением сообщений об ошибках от сервера. Важно вернуть ту же модель, которую мы получили, чтобы введенные пользователем данные не стерлись.

Метод контроллера для обработки POST-запроса (HomeController.cs)

[HttpPost]
public IActionResult Index(Participant model)
{
    if (ModelState.IsValid)
    {
        // Все данные корректны.
        // Здесь будет логика сохранения данных в БД (Этап 6).
        return RedirectToAction("Success"); // Перенаправляем на страницу успеха.
    }

    // Если есть ошибки, возвращаем ту же вьюшку с той же моделью.
    // ASP.NET Core автоматически подставит сообщения об ошибках в тег-хелперы валидации.
    // Также можно собрать все ошибки для суммарного валидатора.
    var errors = ModelState.Values.SelectMany(v => v.Errors);
    ViewBag.SummaryErrors = errors; // Передаем ошибки для суммарного валидатора

    return View(model);
}

public IActionResult Success()
{
    return View(); // Простая страница с сообщением "Заявка успешно отправлена!"
}

Чтобы внизу формы появился суммарный валидатор, достаточно добавить в .cshtml-файл специальный тег-хелпер, который отобразит все ошибки модели.

Этап 6. Делаем финальный шаг и сохраняем данные в базу

После того как данные успешно прошли двухуровневую валидацию, логичным завершением является их сохранение. Для взаимодействия с базой данных в .NET существует множество технологий, но мы рассмотрим базовый и надежный подход с использованием ADO.NET. Он позволяет выполнять прямые SQL-команды.

Ключевой аспект безопасности при работе с базами данных — это защита от SQL-инъекций. Для этого категорически необходимо использовать параметризованные запросы. Это означает, что мы не вставляем значения переменных напрямую в строку SQL-запроса, а используем специальные «заглушки» (например, @Name), которые затем безопасно заменяются значениями.

Ниже приведен пример кода, который можно вставить в блок if (ModelState.IsValid) нашего контроллера. Он демонстрирует, как установить соединение с базой данных и выполнить команду INSERT с использованием параметров.

Пример сохранения данных с помощью ADO.NET (внутри метода контроллера)

// Строка подключения к вашей базе данных (лучше хранить ее в appsettings.json)
string connectionString = "Your_Connection_String_Here"; 

using (SqlConnection connection = new SqlConnection(connectionString))
{
    string sql = "INSERT INTO Participants (LastName, FirstNamePatronymic, City, Workplace, Position, Email) VALUES (@LastName, @FirstName, @City, @Workplace, @Position, @Email)";
    
    using (SqlCommand command = new SqlCommand(sql, connection))
    {
        // Добавляем параметры для защиты от SQL-инъекций
        command.Parameters.AddWithValue("@LastName", model.LastName);
        command.Parameters.AddWithValue("@FirstName", model.FirstNamePatronymic);
        command.Parameters.AddWithValue("@City", model.City);
        command.Parameters.AddWithValue("@Workplace", model.Workplace);
        command.Parameters.AddWithValue("@Position", model.Position);
        command.Parameters.AddWithValue("@Email", model.Email);

        connection.Open();
        command.ExecuteNonQuery();
        connection.Close();
    }
}

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

Вместо заключения подводим итоги нашей работы

Поздравляем! Вы прошли полный цикл разработки веб-формы на C# и ASP.NET Core. Мы начали с нуля, спроектировали пользовательский интерфейс, а затем внедрили надежную двухуровневую систему валидации — быструю клиентскую для удобства пользователя и обязательную серверную для безопасности данных. Финальным аккордом стало сохранение корректных данных в базу.

Навыки, которые вы приобрели, — это не просто решение для контрольной работы. Это основа для создания любых серьезных и профессиональных веб-приложений, где взаимодействие с пользователем и целостность данных стоят на первом месте. Теперь вы готовы к новым, более сложным задачам!