Работа с HTML-формами на сайтах веб-страницы ASP.NET (Razor)

Статья
07/13/2023

; автор — Том ФитцМакен (Tom FitzMacken)

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

Из этого руководства вы узнаете, как выполнять такие задачи:

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

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

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

Восстановление значений формы после отправки страницы.

Ниже приведены ASP.NET концепции программирования, представленные в этой статье:

Объект Request.

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

Кодирование HTML.

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

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

Это руководство также работает с веб-страницы ASP.NET 2.

Создание простой 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 виде строк. Поэтому при работе со значением в виде числа, даты или другого типа необходимо преобразовать его из строки в этот тип. В этом примере AsInt метод Request.Form используется для преобразования значения поля employees (которое содержит число сотрудников) в целое число.
Запустите страницу в браузере, заполните поля формы и нажмите кнопку Отправить. На странице отображаются введенные значения.

Совет

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

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

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

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

Чтобы избежать этих проблем, веб-страницы ASP.NET автоматически кодирует 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 замените value атрибуты <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 пусты. Это нормально, так как таким образом форма пуста.

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

Share via