Web Matrix. Работа с Web Forms

Разбить на страницы

Показывать лекцию целиком

1.Создадим сайт на основе шаблона "Пустой сайт" и назовем его "Form":

(рис 8.1)

2.Перейдем в рабочее пространство ( workspace ) "Файлы", и создадим новый файл:

(рис 8.2)

3.Выберем из списка CSHTML и назовем файл Form.cshtml:

(рис 8.3)

4.Добавим в Form.cshtml - HTML код:

<!DOCTYPE html>
<html>
   <head>
       <title>Информация о сотрудниках</title>
   </head>
   <body>
     <form method="post" action="">
       <fieldset>
         <legend>Добавить сотрудника</legend>
         <table>
           <tr>
            <td><label for="FirstName">Имя:</label></td> 
            <td><input type="text" name="FirstName" 
               value="" /></td>
           </tr>
           <tr>
            <td><label for="LastName">Фамилия:</label></td>
            <td><input type="text" name=" LastName " 
               value="" /></td>
           </tr>
           <tr>
            <td><label for="Age">Возраст:</label></td>
            <td><input type="text" name="Age" 
               value="" /></td> 
           </tr>
           <tr>
            <td><label for="Telephone">Контактный номер:</label></td>
            <td><input type="text" name="Telephone" 
               value="" /></td>
           </tr>
           <tr>  
            <td>
             <input type="submit" value="Добавить" class="submit" />
            </td>
           </tr>
        </table>
       </fieldset>
     </form>
   </body>
</html>

5.Запустим приложение, в результате получим:

(рис 8.4)

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

6.Добавим в начало документа Form.cshtml код:

@{
    if (IsPost)
    {
        string firstname = Request["firstname"];
        string lastname = Request["lastname"];
        int age = Request["age"].AsInt(); 
        string telephone = Request["telephone"];
       <text>
          Вы ввели:<br />
          Имя сотрудника: @firstname<br />
          Фамилия сотрудника: @lastname<br />
          Возраст: @age<br />
          Контактный номер: @telephone<br/>
       </text>
    }
 }

В самом начале программы используется метод isPost, который проверяет, отправляется ли страница на сервер, т.е нажимал ли пользователь кнопку "Добавить". И если форма отправляется на сервер, то метод isPost возвращает значение true.

Следующие строчки кода, получают значения текстовых полей формы с помощью объекта Request. Объект Request содержит все значения, которые были отправлены со страницей, каждое значение которой идентифицируется по ключу. Ключ эквивалентен имени атрибута текстового поля формы, из которого вы хотите считать значения. К примеру, для того что бы считать из текстового поля ( text box ) FirstName, необходимо использовать Request["firstname"]. Необходимо так же помнить, что все значения в объекте Request – строковые, и для преобразования строковых переменных в целочисленные используется функция AsInt().

7.Запустим приложение, заполним поля формы и нажмем на кнопку "Добавить". В результате отобразиться страница, с введенными в текстовые поля значениями:

(рис 8.5)

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

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

1.В Form.cshtml заменим первый блок c кодом, следующим:

if (IsPost) 
     {
        var errors = false;
        var firstname = Request["firstname"];
        if (firstname.IsEmpty()) 
        {
            errors = true;
            @:Не заполненно поле с именем.<br />
        }
        var lastname = Request["lastname"];
        if (lastname.IsEmpty()) 
        {
            errors = true;
            @:Не заполненно поле с фамилией.<br />
        }
        var age = 0;
        if (Request["age"].IsInt()) 
        {
            age=Request["age"].AsInt();
        }
        else 
        {
            errors = true;
            @:Возраст должен быть числом.<br />
        }  
        var telephone = Request["telephone"];
        if (telephone.IsEmpty()) 
        {
            errors = true;
            @:Не заполненно поле с контактным номером.<br />
        }
        if (errors == false)
        {  
       <text>
          Вы ввели:<br />
          Имя сотрудника: @firstname<br />
          Фамилия сотрудника: @lastname<br />
          Возраст: @age<br />
          Контактный номер: @telephone<br/>
       </text>
        }
    }
}

Этот код, похож на замененный ранее код, но имеет ряд отличий. Первое отличие, это была введена переменная с именем errors и значением false, и в случае возникновения ошибки будет устанавливаться значение true. Второе отличие это использование функций IsEmpty(), которая возвращает значение true, если нужные поля не заполнены; и функция IsInt(),которая возвращает значение true, если возможно преобразовать строковое значение в целочисленное ( string в int ).

2.Результатом работы кода, при нажатии на кнопку "Добавить" с не заполненными полями:

(рис 8.6)

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

1.Для сохранения данных формы, после отправки её на сервер, изменим код в теге <html></html> файла Form.cshtml, на код:

<!DOCTYPE html>
<html>
   <head>
       <title>Информация о сотрудниках</title>
   </head>
   <body>
     <form method="post" action="">
       <fieldset>
         <legend>Добавить сотрудника</legend>
         <table>
           <tr>
            <td><label for="FirstName">Имя:</label></td> 
            <td><input type="text" name="FirstName" 
               value="@Request["firstname"]" /></td>
           </tr>
           <tr>
            <td><label for="LastName">Фамилия:</label></td>
            <td><input type="text" name="LastName" 
               value="@Request["lastname"]" /></td>
           </tr>
           <tr>
            <td><label for="Age">Возраст:</label></td>
            <td><input type="text" name="Age" 
               value="@Request["age"]" /></td> 
           </tr>
           <tr>
            <td><label for="Telephone">Контактный номер:</label></td>
            <td><input type="text" name="Telephone"
               value="@Request["telephone"]"/></td>
           </tr>
           <tr>  
            <td>
             <input type="submit" value="Добавить" class="submit"/>
            </td>
           </tr>
        </table>
       </fieldset>
     </form>
   </body>
</html>

Атрибут value, элемента <input>, теперь устанавливается динамически из значений объекта Request.

2.Запустим приложение, введем данные, и нажмем кнопку "Добавить". Результатом будет страница со всеми введенными ранее значениями:

(рис 8.7)

Страницы:

1.Создадим сайт на основе шаблона "Пустой сайт" и назовем его "Form":

(рис 8.1)

2.Перейдем в рабочее пространство ( workspace ) "Файлы", и создадим новый файл:

(рис 8.2)

3.Выберем из списка CSHTML и назовем файл Form.cshtml:

(рис 8.3)

4.Добавим в Form.cshtml - HTML код:

<!DOCTYPE html>
<html>
   <head>
       <title>Информация о сотрудниках</title>
   </head>
   <body>
     <form method="post" action="">
       <fieldset>
         <legend>Добавить сотрудника</legend>
         <table>
           <tr>
            <td><label for="FirstName">Имя:</label></td> 
            <td><input type="text" name="FirstName" 
               value="" /></td>
           </tr>
           <tr>
            <td><label for="LastName">Фамилия:</label></td>
            <td><input type="text" name=" LastName " 
               value="" /></td>
           </tr>
           <tr>
            <td><label for="Age">Возраст:</label></td>
            <td><input type="text" name="Age" 
               value="" /></td> 
           </tr>
           <tr>
            <td><label for="Telephone">Контактный номер:</label></td>
            <td><input type="text" name="Telephone" 
               value="" /></td>
           </tr>
           <tr>  
            <td>
             <input type="submit" value="Добавить" class="submit" />
            </td>
           </tr>
        </table>
       </fieldset>
     </form>
   </body>
</html>

5.Запустим приложение, в результате получим:

(рис 8.4)

6.Добавим в начало документа Form.cshtml код:

@{
    if (IsPost)
    {
        string firstname = Request["firstname"];
        string lastname = Request["lastname"];
        int age = Request["age"].AsInt(); 
        string telephone = Request["telephone"];
       <text>
          Вы ввели:<br />
          Имя сотрудника: @firstname<br />
          Фамилия сотрудника: @lastname<br />
          Возраст: @age<br />
          Контактный номер: @telephone<br/>
       </text>
    }
 }

(рис 8.5)

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

1.В Form.cshtml заменим первый блок c кодом, следующим:

if (IsPost) 
     {
        var errors = false;
        var firstname = Request["firstname"];
        if (firstname.IsEmpty()) 
        {
            errors = true;
            @:Не заполненно поле с именем.<br />
        }
        var lastname = Request["lastname"];
        if (lastname.IsEmpty()) 
        {
            errors = true;
            @:Не заполненно поле с фамилией.<br />
        }
        var age = 0;
        if (Request["age"].IsInt()) 
        {
            age=Request["age"].AsInt();
        }
        else 
        {
            errors = true;
            @:Возраст должен быть числом.<br />
        }  
        var telephone = Request["telephone"];
        if (telephone.IsEmpty()) 
        {
            errors = true;
            @:Не заполненно поле с контактным номером.<br />
        }
        if (errors == false)
        {  
       <text>
          Вы ввели:<br />
          Имя сотрудника: @firstname<br />
          Фамилия сотрудника: @lastname<br />
          Возраст: @age<br />
          Контактный номер: @telephone<br/>
       </text>
        }
    }
}

2.Результатом работы кода, при нажатии на кнопку "Добавить" с не заполненными полями:

(рис 8.6)

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

1.Для сохранения данных формы, после отправки её на сервер, изменим код в теге <html></html> файла Form.cshtml, на код:

<!DOCTYPE html>
<html>
   <head>
       <title>Информация о сотрудниках</title>
   </head>
   <body>
     <form method="post" action="">
       <fieldset>
         <legend>Добавить сотрудника</legend>
         <table>
           <tr>
            <td><label for="FirstName">Имя:</label></td> 
            <td><input type="text" name="FirstName" 
               value="@Request["firstname"]" /></td>
           </tr>
           <tr>
            <td><label for="LastName">Фамилия:</label></td>
            <td><input type="text" name="LastName" 
               value="@Request["lastname"]" /></td>
           </tr>
           <tr>
            <td><label for="Age">Возраст:</label></td>
            <td><input type="text" name="Age" 
               value="@Request["age"]" /></td> 
           </tr>
           <tr>
            <td><label for="Telephone">Контактный номер:</label></td>
            <td><input type="text" name="Telephone"
               value="@Request["telephone"]"/></td>
           </tr>
           <tr>  
            <td>
             <input type="submit" value="Добавить" class="submit"/>
            </td>
           </tr>
        </table>
       </fieldset>
     </form>
   </body>
</html>

Атрибут value, элемента <input>, теперь устанавливается динамически из значений объекта Request.

(рис 8.7)

Занятие пройдено

Предыдущее занятие Занятие пройдено Следующее занятие

Вернуться к учебному плану

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

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

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

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

Купить дополнительную попытку

Вы действительно хотите купить ещё одну попытку для прохождения тестирования?

Успешно!

Напишите нам, если у вас есть вопросы

Уважаемые пользователи ИНТУИТ!

Уважаемые пользователи ИНТУИТ!

Добро пожаловать на обновлённый сайт НОУ «ИНТУИТ»!