| Россия |
Инспектор
Вы можете этот курс.
Опубликован: 07.05.2010 | Уровень: для всех | Доступ: платный
Лекция 4:
Серверные элементы управления
Управление фокусом ввода
В отличие от HTML-элементов, все элементы Web наследуют метод Focus(), но оказывает он влияние только на элементы ввода ( принимающие клавиатурный ввод пользователя ). При появлении страницы на стороне клиента курсор сразу устанавливается на поле ввода, для которого на сервере был выполнен метод Focus(), а страница автоматически прокручивается до видимого положения. Пользователь может перемещаться по элементам с помощью клавиши <Tab>.
Конечно, в самом HTML нет средства установки фокуса, но с помощью скриптов на JavaScript такой эффект можно задать. Что и генерирует соответствующий Web-элемент при вызове для него метода Focus(). Если метод Focus() вызывался для нескольких элементов ввода, то на клиенте JavaScript выбирает тот, который получил фокус раньше других.
Вместо программного вызова метода Focus() можно назначить элемент управления, который всегда должен первым принимать фокус ввода при отображении страницы в броузере. Это делается с помощью свойства DefaultFocus дескриптора формы следующим образом
<form id="Form1" DefaultFocus="TextBox2" runat="server">
После такого назначения клиенту будет сгенерирован JavaScript-сценарий по установке фокуса ввода на текстовое поле с именем TextBox2.
Еще один способ управления фокусом заключается в использовании клавиш ускоренного доступа (горячих клавиш). Например, если для текстового поля (Web-элемент TextBox ) установить свойство AccessKey в значение A, то пользователь комбинацией клавиш <Alt+A> может быстро перевести фокус ввода на этот элемент.
Еще один способ управления фокусом - использование метки Label. Если установить в свойстве AssociatedControlID значение ID элемента ввода, то при адресации по горячим клавишам к фокусу метки фокус получить связанное с меткой текстовое поле. Например, следующая метка переносит фокус ввода на элемент TextBox2 при нажатии клавиатурной комбинации <Alt+2>
<asp:Label AccessKey="2" AssociatedControlID="TextBox2" runat="server"> Введите текст:</asp:Label> <asp:TextBox ID="TextBox2" runat="server" />
Кроме элементов ввода можно на странице назначить кнопку по умолчанию, которая будет ожидать нажатия пользователем клавиши Enter. Например, может потребоваться превратить кнопку Submit формы в кнопку по умолчанию, чтобы при нажатии пользователем клавиши Enter на клиенте инициировался постинг, а на сервере запускалось событие Button.Click этой кнопки.
Для назначении кнопки по умолчанию нужно указать в свойстве HtmlForm.DefaultButton (или прямо в дескрипторе формы) значение идентификатора кнопки. Например
<form id="Form1" DefaultButton="btnSubmit" runat="server">
Кнопкой по умолчанию можно сделать элементы Button, LinkButton, ImageButton.
Элемент Panel также поддерживает свойство кнопки по умолчанию. Если на странице несколько панелей со своими кнопками, то для каждой панели можно назначить свою кнопку по умолчанию, которая должна срабатывать в активной панели при пользовательском нажатии клавиши Enter.
Элемент Panel обладает возможностью скролирования. Если размещенные на панели элементы не помещаются в установленные размеры и для панели установлены свойства прокрутки, то панель генерирует полосы прокрутки. Включение прокрутки элемента Panel осуществляется за счет установки ее свойства ScrollBars в одно из значений: Vertical, Horizontal, Both, Auto.
Следующий простой дескрипторный код демонстрирует свойство прокрутки элемента Panel
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="PanelScroll.aspx.cs"
Inherits="PanelScroll" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body bgcolor="#ffff66">
<form id="form1" runat="server">
<div style="text-align: center">
<asp:Panel ID="Panel1" runat="server" ScrollBars="Vertical"
Height="300px" Width="261px" BackColor="Red" BorderWidth="1px">
<h1>Привет всем!!!</h1>
<asp:TextBox ID="TextBox2" runat="server">доцент Снетков</asp:TextBox><br />
<br />
<asp:TextBox ID="TextBox1" runat="server">студент Зиборов</asp:TextBox>
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Стереть доцента" /><br />
<br />
<asp:Button ID="Button2" runat="server" Text="Стереть студента" /></h1>
</asp:Panel>
</div>
</form>
</body>
</html>Клиентский вывод будет таким
Пример обработки события Changed Web-элементов управления
Серверные события Web-элементов работают также, как события серверных HTML-элементов. Только изменены названия событий. Вместо названия ServerClick используется универсальное название Click. Общее событие ServerChange заменяется специфическими названиями CheckedChanged - для элементов RadioButton и CheckButton, TextChanged - для элемента TextBox. Но их поведение остается прежним.
Основное различие состоит в том, что Web-элементы имеют свойство AutoPostBack для возможности инициации с помощью клиентского JavaScript немедленного постинга, после чего на сервере запускается соответствующее событие.
Приведем пример, в котором всем элементам управления, кроме списка, установим свойство AutoPostBack в значение True. Будем отлавливать в постинге событие CheckedChanged и обрабатывать его одним общим обработчиком, добавляющим строки в список.
Обработчик события создадим через панель Properties, задав для одного из элементов, генерирующих событие, имя CtrlChanged в поле события, затем нажав клавишу Enter. Для остальных элементов этот обработчик подключим через раскрывающийся список поля панели Properties. Коды страницы, реализующие пример, приведены ниже.
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="CheckedChanged.aspx.cs"
Inherits="CheckedChanged" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>
Список событий
</h2>
<asp:ListBox ID="ListBox1" runat="server" Height="107px" Width="311px" />
<p />
<p />
<hr />
<p />
<h2>
Элементы управления,<br />
генерирующие событие<br />
Changed
</h2>
<p />
<asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True"
OnTextChanged="CtrlChanged">Привет всем!!!</asp:TextBox>
<p />
<asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True" Checked="True"
OnCheckedChanged="CtrlChanged" />
<p />
<asp:RadioButton ID="RadioButton1" runat="server"
AutoPostBack="True" Checked="True"
GroupName="radioGroup" OnCheckedChanged="CtrlChanged" />
<asp:RadioButton ID="RadioButton2" runat="server"
AutoPostBack="True" GroupName="radioGroup"
OnCheckedChanged="CtrlChanged" />
</div>
</form>
</body>
</html>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 CheckedChanged : System.Web.UI.Page
{
protected void CtrlChanged(object sender, EventArgs e)
{
// Добавим имя элемента, сгенерировавшего событие, в список
string ctrlName = ((Control)sender).ID;
ListBox1.Items.Add(ctrlName + "_Changed");
// Позиционирование на последний элемент списка
ListBox1.SelectedIndex = ListBox1.Items.Count - 1;
}
}
