Опубликован: 13.07.2010 | Уровень: специалист | Доступ: платный
Самостоятельная работа 3:

Управление HTML-элементами в ASP.NET

Упражнение 7. Элемент управления HTMLInputFile

Класс HTMLInputFile позволяет программировать HTML-тег <input type="file">. Этот тег используется для работы с данными файла в пределах формы HTML. В теге <form> мы будем использовать атрибут enctype="multipart/form-data", без которого Web-страница выдаст ошибку. В нашем сценарии при нажатии кнопки страница будет загружать файл на сервер и выдаст сообщение при успешном завершении, в противном случае она должна отображать сообщение об ошибках, указывающих на причину сбоя.

Встретив тег <input type="file">, броузер автоматически размещает кнопку Browse рядом с текстовым полем, чтобы дать возможность пользователю через диалоговое окно выбрать выгружаемый на сервер файл. Нажатие кнопки Open размещает имя выбранного файла и путь к нему в текстовом поле страницы.

  • Добавьте к проекту новую страницу (шаблон Web Form) с именем HTMLInputFile.aspx и файлом отделенного кода, назначьте ее стартовой для удобства отладки
  • Перейти из режима Design визуального проектирования в режим Source (то же самое можно сделать через меню оболочки View/Code или контекстное меню редактора страницы командой View Code )
  • Отредактируйте интерфейсную часть страницы HTMLInputFile.aspx так
<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="HTMLInputFile.aspx.cs" Inherits="HTMLInputFile" %>
    
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Элемент управления HTMLInputFile</title>
</head>
<body>
    <center>
        <h1>
            Элемент управления HTMLInputFile</h1>
        <font color="#ff0000">
            <h2 id="State" runat="server" />
        </font>
        <form id="form1" runat="server" 
              enctype="multipart/form-data" method="post">
            Имя отсылаемого файла:&nbsp; &nbsp;
            <input id="FileName" runat="server" 
                   maxlength="30" type="file">
            <p />
            Переслать под именем (без пути):&nbsp; &nbsp;
            <input id="Text" runat="server" type="text">
            <p />
            <input id="TransferFile" runat="server" 
                   type="button" value="Передать файл">
        </form>
        <hr>
        <a id="PrevLink" runat="server">Назад</a> 
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        <a id="NextLink" runat="server">Вперед</a>
    </center>
</body>
</html>
Листинг 3.14. Интерфейсная часть страницы HTMLInputFile.aspx
  • Перейдите в режим дизайна страницы HTMLInputFile.aspx и двойным щелчком на кнопке TransferFile создайте обработчик в ассоциированном файле поддержки HTMLInputFile.aspx.cs
  • Отредактируйте файл поддержки HTMLInputFile.aspx.cs так
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
    
public partial class HTMLInputFile : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        PrevLink.HRef = "HTMLInputCheckBox.aspx";
        NextLink.HRef = "HTMLInputHidden.aspx";
    }
    
    protected void TransferFile_ServerClick(object sender, EventArgs e)
    {
        if (FileName.Value == "")
        {
            State.InnerHtml = "Выберите отсылаемый файл";
            return;
        }
        else if (Text.Value == "")
        {
            State.InnerHtml = "Введите имя целевого файла";
            return;
        }
    
        if (FileName.PostedFile != null)
        {
            try
            {
                FileName.PostedFile.SaveAs("c:\  emp\\" + Text.Value);
                State.InnerHtml = "Файл c:\  emp\\" +
                    Text.Value + " передан успешно на Web server";
            }
            catch (Exception exc)
            {
                State.InnerHtml = "Ошибка записи файла c:\  emp\\" +
                    Text.Value + "<br>" + exc.ToString();
            }
        }
    }
}
Листинг 3.15. Кодовый файл HTMLInputFile.aspx.cs
  • Постройте проект. Результат внешне будет примерно таким

  • Проверьте, действительно ли в целевом каталоге C:\TEMP появляется копия пересылаемого файла

Упражнение 8. Элемент управления HTMLInputHidden

Этот класс позволяет программировать HTML-тег <input type="hidden">, который используется для скрытой передачи данных на сервер. Разработаем страницу, в которой сервер будет возвращать содержимое тега в открытом виде. Код управления объектом на C# разместим на странице вместе с интерфейсной частью.

  • Выполните команду меню оболочки для вызова мастера добавления в проект новой HTML-страницы с именем HTMLInputHidden.aspx

Расширение .aspx нужно для того, чтобы диспетчер страниц на стороне сервера при поступлении запроса от броузера на ее поставку, вначале передал страницу на обработку IIS-серверу.

  • Установите режим Source редактирования новой страницы и заполните ее кодом, приведенным ниже (интерфейсная и кодовая части на одной странице)
<script runat="server" language="C#">
       void ButtonShow_Click(object Source, EventArgs e) 
       {
			State.InnerText = HiddenField.Value;
       }
 	
       void ButtonHidden_Click(object Source, EventArgs e) 
       {
			State.InnerText = "";
       }
</script>
    
<html>
<head>
    <title>Элемент управления HTMLInputHidden</title>
</head>
<body>
    <center>
        <h1>
            Элемент управления HTMLInputHidden</h1>
        <font color="#ff0000">
            <h2 id="State" runat="server" />
        </font>
        <form id="form1" runat="server" method="post">
            <p>
                Нажмайте на кнопки для показа/сокрытия секретной информации</p>
            <input id="ShowButton" runat="server" 
                onserverclick="ButtonShow_Click" type="button"
                value="Показать секретную информацию">
            <p>
            </p>
            <input id="HiddenButton" runat="server" 
                onserverclick="ButtonHidden_Click" type="button"
                value="Скрыть секретную информацию">
            <input id="HiddenField" runat="server" type="hidden" 
                value="Это скрытое значение поля Hidden">
        </form>
        <hr>
        <a href="HTMLInputFile.aspx">Назад</a> 
            &nbsp;&nbsp;&nbsp;&nbsp;
        <a href="HTMLInputImage.aspx">Вперед</a>
    </center>
</body>
</html>
Листинг 3.16. Код страницы HTMLInputHidden.aspx
  • Сделайте страницу стартовой и постройте приложение. Результат должен быть таким


В этой странице мы не стали создавать ассоциированный файл CodeBehind для тренировки, хотя смешивать представление страницы и код управления ею не совсем удобно. Да и возможности по программированию в чисто кодовом файле C# привычнее. Мы, как программисты, внутри файла CodeBehind находимся в своей стихии и можем спокойно там расположить всю бизнес-логику управления представлением. Главное - чтобы были известны идентификаторы всех элементов управления, используемых на странице представления.

Александр Очеретяный
Александр Очеретяный
Украина, Киев
Анастасия Балыбердина
Анастасия Балыбердина
Украина, Киев, НТУУ КПИ