Работа с HTML-формами на сайтах ASP.NET Web Pages (Razor)

Tom FitzMacken

В этой статье описывается, как обрабатывать HTML-форму (с текстовыми полями и кнопками) при работе на веб-сайте ASP.NET Web Pages (Razor).

Что вы узнаете:

Создание HTML-формы.

Как считывать входные данные пользователя из формы.

Как проверить входные данные пользователя.

Как восстановить значения формы после отправки страницы.

Это основные понятия программирования ASP.NET, представленные в статье:

Объект Request.

Проверка входных данных.

Кодировка HTML.

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

веб-страницы ASP.NET (Razor) 3

Это руководство также подходит для ASP.NET Web Pages второй версии.

Создание простой HTML-формы

Создайте новый веб-сайт.

В корневой папке создайте веб-страницу с именем Form.cshtml и введите следующую разметку:

<!DOCTYPE html>
<html>
    <head>
        <title>Customer Form</title>
    </head>
    <body>
      <form method="post" >
        <fieldset>
          <legend>Add Customer</legend>
          <div>
            <label for="CompanyName">Company Name:</label>
            <input type="text" name="CompanyName" value="" />
          </div>
          <div>
            <label for="ContactName">Contact Name:</label>
            <input type="text" name="ContactName" value="" />
          </div>
          <div>
            <label for="Employees">Employee Count:</label>
            <input type="text" name="Employees" value="" />
          </div>
          <div>
            <label>&nbsp;</label>
            <input type="submit" value="Submit" class="submit" />
          </div>
        </fieldset>
      </form>
    </body>
</html>

Запустите страницу в браузере. (В WebMatrix в рабочей области "Файлы " щелкните правой кнопкой мыши файл и выберите "Запустить в браузере".) Отображается простая форма с тремя полями ввода и кнопкой "Отправить ".

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

Чтение входных данных пользователей из формы

Чтобы обработать форму, добавьте код, который считывает отправленные значения поля и выполняет с ними что-то. В этой процедуре показано, как считывать поля и отображать входные данные пользователя на странице. (В производственном приложении обычно вы делаете более интересные вещи с пользовательским вводом. Вы будете делать это в статье о работе с базами данных.)

В верхней части файла Form.cshtml введите следующий код:
```
@{
    if (IsPost) {
        string companyname = Request.Form["companyname"];
        string contactname = Request.Form["contactname"];
        int employeecount = Request.Form["employees"].AsInt();

        <text>
          You entered: <br />
          Company Name: @companyname <br />
          Contact Name: @contactname <br />
          Employee Count: @employeecount <br />
        </text>
    }
}
```
Когда пользователь сначала запрашивает страницу, отображается только пустая форма. Пользователь (который будет вами) заполняет форму, а затем нажимает кнопку "Отправить". Пользователь отправляет (опубликовывает) входные данные на сервер. По умолчанию запрос переходит на ту же страницу (а именно , Form.cshtml).

При отправке страницы на этот раз введенные значения отображаются непосредственно над формой:

Просмотрите код страницы. Сначала используйте IsPost метод, чтобы определить, публикуется ли страница, то есть, нажимает ли пользователь кнопку "Отправить ". Если это запись, IsPost возвращает значение true. Это стандартный способ ASP.NET веб-страниц, чтобы определить, работаете ли вы с первоначальным запросом (запрос GET) или обратной отправкой (запрос POST). (Дополнительные сведения о GET и POST см. на боковой панели "HTTP GET и POST и свойство IsPost" в статье "Введение в ASP.NET программирование веб-страниц с помощью синтаксиса Razor".

Затем вы получаете значения, которые пользователь ввел в объект Request.Form, и помещаете их в переменные для последующего использования. Объект Request.Form содержит все значения, отправленные на страницу, каждый из которых определяется ключом. Ключ эквивалентен name атрибуту поля формы, который требуется прочитать. Например, для чтения поля companyname используется Request.Form["companyname"].

Значения формы хранятся в объекте Request.Form в виде строк. Поэтому при работе со значением в виде числа или даты или другого типа необходимо преобразовать его из строки в этот тип. В примере метод AsIntRequest.Form используется для преобразования значения поля "employees", которое содержит количество сотрудников, в целое число.
Запустите страницу в браузере, заполните поля формы и нажмите кнопку "Отправить". На странице отображаются введенные значения.

Подсказка

Кодировка HTML для внешнего вида и безопасности

HTML имеет специальное использование для символов, таких как <, >и &. Если эти специальные символы отображаются, где они не ожидаются, они могут разрушить внешний вид и функциональные возможности веб-страницы. Например, браузер интерпретирует < символ (если за ним не следует пробел) в качестве начала HTML-элемента, например <b> или <input ...>. Если браузер не распознает элемент, он просто удаляет строку, которая начинается с < , пока она не достигнет того, что она снова распознает. Очевидно, это может привести к некоторому странному отображению на странице.

Кодирование HTML заменяет эти зарезервированные символы кодом, который браузеры интерпретируют как правильный символ. Например, символ < заменяется на <, а символ > заменяется на >. Браузер отображает эти строки замены в виде символов, которые вы хотите просмотреть.

Рекомендуется использовать кодировку HTML при отображении строк (входных данных), полученных от пользователя. Если вы этого не сделали, пользователь может попытаться получить веб-страницу для запуска вредоносного скрипта или сделать что-то другое, что компрометирует безопасность сайта или это просто не то, что вы планируете. (Это особенно важно, если вы принимаете входные данные пользователя, храните его где-то, а затем отображаете его позже , например, как комментарий блога, обзор пользователя или что-то подобное.)

Чтобы предотвратить эти проблемы, ASP.NET Web Pages автоматически HTML-кодирует любое текстовое содержимое, которое вы выводите из своего кода. Например, при отображении содержимого переменной или выражения с помощью кода, например @MyVar, ASP.NET веб-страниц автоматически кодирует выходные данные.

Проверка входных данных пользователей

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

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

В файле Form.cshtml замените первый блок кода следующим кодом:
```
@{
    Validation.RequireField("companyname", "Company name is required.");
    Validation.RequireField("contactname", "Contact name is required.");
    Validation.RequireField("employees", "Employee count is required.");
    Validation.Add("employees", Validator.Integer());

    if (IsPost)  {
        var companyname = Request.Form["companyname"];
        var contactname = Request.Form["contactname"];
        var employeecount = Request.Form["employees"];
        if(Validation.IsValid()){
            <text>
              You entered: <br />
              Company Name: @companyname <br />
              Contact Name: @contactname <br />
              Employee Count: @employeecount <br />
            </text>
        }
    }
}
```
Чтобы проверить входные данные пользователя, вы используете помощник Validation. Необходимо зарегистрировать необходимые поля путем вызова Validation.RequireField. Вы регистрируете другие типы проверки путем вызова Validation.Add и указания поля для проверки и типа проверки.

При запуске страницы ASP.NET выполняет проверку. Вы можете проверить результаты, вызвав Validation.IsValid, который возвращает true, если все поля прошли проверку, и false, если хотя бы одно поле завершилось ошибкой валидации. Как правило, перед выполнением любой обработки входных данных пользователя вызывается Validation.IsValid .

Обновите элемент <body>, добавив три вызова метода Html.ValidationMessage.

<body>
  <form method="post">
    <fieldset>
      <legend>Add Customer</legend>
      <div>
         <label for="CompanyName">Company Name:</label>
         <input type="text" name="CompanyName" value="" />
         @Html.ValidationMessage("companyname")
      </div>
      <div>
         <label for="ContactName">Contact Name:</label>
         <input type="text" name="ContactName" value="" />
         @Html.ValidationMessage("contactname")
      </div>
      <div>
         <label for="Employees">Employee Count:</label>
         <input type="text" name="Employees" value="" />
         @Html.ValidationMessage("employees")
      </div>
      <div>
         <label>&nbsp;</label>
         <input type="submit" value="Submit" class="submit" />
      </div>
    </fieldset>
  </form>
</body>

Чтобы отобразить сообщения об ошибках проверки, можно вызвать Html. ValidationMessage и передайте имя поля, для которого требуется сообщение.

Запустите страницу. Оставьте поля пустыми и нажмите кнопку "Отправить". Вы видите сообщения об ошибках.
Добавьте строку (например, ABC) в поле "Число сотрудников " и нажмите кнопку "Отправить еще раз". На этот раз появится сообщение об ошибке, указывающее, что строка не имеет правильного формата, а именно целое число.

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

Восстановление значений форм после постбэка

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

Вы можете исправить это легко, однако. У вас есть доступ к значениям, отправленным в объект Request.Form, чтобы снова заполнить ими поля формы при отрисовке страницы.

В файле Form.cshtml замените атрибуты элементов <input> на атрибут value.

<!DOCTYPE html>
<html>
  <head>
    <title>Customer Form</title>
  </head>
  <body>
    <form method="post">
      <fieldset>
        <legend>Add Customer</legend>
        <div>
          <label for="CompanyName">Company Name:</label>
          <input type="text" name="CompanyName"
                 value="@Request.Form["companyname"]"  />
          @Html.ValidationMessage("companyname")
        </div>
        <div>
         <label for="ContactName">Contact Name:</label>
         <input type="text" name="ContactName"
                value="@Request.Form["contactname"]" />
         @Html.ValidationMessage("contactname")
        </div>
        <div>
         <label for="Employees">Employee Count:</label>
         <input type="text" name="Employees"
                value="@Request.Form["employees"]" />
         @Html.ValidationMessage("employees")
        </div>
        <div>
          <label>&nbsp;</label>
          <input type="submit" value="Submit" class="submit" />
        </div>
    </fieldset>
  </form>
</body>

value Атрибут <input> элементов был задан для динамического чтения значения поля из Request.Form объекта. При первом запросе страницы значения в объекте Request.Form пусты. Это хорошо, потому что таким образом форма пуста.

Запустите страницу в браузере, заполните поля формы или оставьте их пустыми и нажмите кнопку "Отправить". Отображается страница, показывающая отправленные значения.

Дополнительные ресурсы

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2026-03-27