Опубликован: 07.05.2010 | Доступ: свободный | Студентов: 1678 / 62 | Оценка: 4.56 / 4.06 | Длительность: 34:11:00
Лекция 3:

Web-формы

Обработчик переключения экземпляра CheckBox1 элемента CheckBox

  • Вызовите панель Document Outline командой меню View/Other Windows/Document Outline и в режиме Design выделите в дереве объект CheckBox1
  • Перейдите в панель Properties, переведите ее в режим Events (значек молнии), найдите событие CheckedChanged и двойным щелчком на поле события создайте для него обработчик

Центрирование интерфейса

Отцентрируем наши элементы на странице. Для этого

  • Перейдите на вкладку Source страницы. Установите курсор внутри контейнера <div></div>. В нижней части окна редактора щелкните на кнопке <div>, чтобы выделить блок HTML-кода

    Обратите внимание, что в меню оболочки для вкладки Source нет пункта Format, который появится только на вкладке Design.

  • Не снимая выделения текста перейдите на вкладку Design.

    Мы видим, что все элементы контейнера <div></div> остались выделенными и появилось меню Format.

  • Отцентрируйте выделенные элементы страницы командой Format/Justify/Center

Легко заметить, что эти действия привели к добавлению в дескриптор <div> атрибута внутреннего стиля

<div style="text-align: center">
.....................
</div>

Это наглядный пример того, что зная где и что подкрутить, можно подкручивать и напрямую. HTML-дескрипторы такие "одноклеточные", что все их поведение "написано у них на лбу". Но чтобы опуститься до их уровня, нам нужно попотеть при подъеме в гору. Серверные элементы из вкладки Standard намного сложнее, зато несравненно функциональней и полностью поддерживают парадигму объектно-ориентированного программирования. Их настройка большей частью выполняется через код C# и панель Properties.

Стоит упомянуть про режимы редактирования Design и Source. На сервере наша активная страница все равно будет храниться в виде кода, как он представляется на вкладке Source (... и терпеливо ждать своего посетителя). Режим Design является средством визуального проектирования и предназначен для разработчика (нас с вами), чтобы существенно упростить (ускорить) его работу.

Заполнение обработчиков кодом

Заполним обработчики. При загрузке странице по первому запросу или обратной отсылке (постинга) мы хотим, чтобы в объект Label1 помещался снимок таймера сервера. Конечно, это не лучший способ спрашивать время у сервера (ходить за семь верст киселя хлебать), когда то же самое можно спросить у таймера клиента. Но пока мы не использовали JavaScript, нам и это сойдет. Кроме этого, в обработчике копируется значение поля объекта TextBox1 в метку Label2 и добавляется восклицание.

Второй обработчик устанавливает цвет переднего плана и фона метки Label1. Он срабатывает только тогда, когда при обратной отсылке (постинге) обнаружено изменение состояния объекта CheckBox1. Если состояние CheckBox1 между двумя обратными отсылками не изменялось, то события CheckedChanged не возникает и код обработчика не выполняется.

Полностью код страницы в режиме Source для нашего примера будет таким

<%@ Page Language="C#" %>
	
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        Label1.Text = "Текущее время: "
            + DateTime.Now.ToLongTimeString();
        Label2.Text = TextBox1.Text + "!!!";
    }
	
    protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
    {
        if (CheckBox1.Checked)
        {
            Label1.ForeColor = System.Drawing.Color.White;
            Label1.BackColor = System.Drawing.Color.Red;
        }
        else
        {
            Label1.ForeColor = System.Drawing.Color.Black;
            Label1.BackColor = System.Drawing.Color.White;
        }
    }
</script>
	
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Начальная страница</title>
</head>
<body>
    <form id="form1" runat="server">
        <div style="text-align: center">
            <asp:Label ID="Label1" runat="server"></asp:Label>
            &nbsp;&nbsp;&nbsp;
            <asp:CheckBox ID="CheckBox1" runat="server"
                Text="Red" OnCheckedChanged="CheckBox1_CheckedChanged" /><br />
            Имя:
            <asp:TextBox ID="TextBox1" runat="server">Снетков</asp:TextBox><br />
            Привет дорогой товарищ (господин)
            <asp:Label ID="Label2" runat="server"></asp:Label><br />
            <br />
            <asp:Button ID="Button1" runat="server" Text="Обновить" />
        </div>
    </form>
</body>
</html>
  • Запустите пример, должен получиться внешне приблизительно такой результат
    HTML-страница на стороне клиента

    HTML-страница на стороне клиента

Модель событий ASP.NET

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

  1. Клиент первый раз запрашивает страницу. Среда исполнения ASP.NET создает объекты страницы и элементов управления, выполняется код инициализации, страница преобразуется в HTML и возвращается клиенту. Объекты страницы сразу же удаляются из памяти сервера, освобождая место для других запросов.
  2. Получив HTML-страницу клиент что-то с ней делает и инициирует обратную отсылку - постинг (например, щелкает на кнопке Submit ). Броузер собирает данные со всех элементов формы и события, которые произошли на клиенте, упаковывает все это в пакеты ("пакует чемоданы") и отправляет целевой странице сервера на обработку. Целевая страница указана в атрибуте action HTML-дескриптора формы. Каждый пакет посылается отдельно и с уведомлением успешной доставки.
  3. На сервере ASP.NET получает поступившие пакеты, распаковывает и соединяет их. Затем запускает целевую страницу и предает ей полученные данные.
  4. Целевая страница загружается в память, повторно создаются объекты с начальной инициализацией как при первой загрузке.
  5. Затем серверная страница переводится в состояние, какое она имела перед последней отправкой клиенту. Информацию о последнем состоянии серверной страницы ей передал клиент. Эту информацию он получил от страницы в скрытых полях вместе с последним ответом и теперь вернул в неизменном виде в своем новом запросе (обратной отсылке). Информация о последнем состоянии серверной страницы перед ответом клиенту называется состоянием вида.
  6. После этого ASP.NET приступает к анализу поступивших событий и определяет, что клиент хотел сделать с данными перед обратной отсылкой.
  7. И наконец, удовлетворяя требования клиента выполняет действия, предписанные событиями в соответствии с имеющимися обработчиками. Тем самым формируется новое состояние серверной страницы и новый HTML-ответ, который отправляется клиенту вместе с новым состоянием вида в скрытых полях.
  8. После сгенерированного HTML-ответа страница немедленно выгружается из памяти сервера.