Программная привязка данных с использованием встроенных преобразователей

Вернемся к программному коду. Мы снова, с целью сэкономить силы и время, воспользуемся существующим примером из главы 14. Вернемся к примеру 14.7, где мы создавали текстовое поле и метку. Изменение текста в поле ввода приводило к изменению текста в элементе управления Label. Теперь мы попробуем связать эти два компонента с помощью механизма привязки данных. В первую очередь нам необходимы два HTML?элемента, такие как в следующем фрагменте:
(br /)


Затем нам необходим программный код, который будет создавать их экземпляры в JavaScript:
function pageLoad() {
var textbox = new Sys.Preview.UI.TextBox($get("TextBox1"));
var label = new Sys.Preview.UI.Label($get("Label1"));

Теперь можно выполнить привязку. Сначала создается экземпляр класса Sys.Preview.Binding:
var binding = new Sys.Preview.Binding();

Далее необходимо присоединить источник данных (контекст). В этом примере источником служит элемент управления TextBox:
binding.set_dataContext(textbox);

Поскольку наша цель – разместить текст внутри текстового поля ввода, путь к данным (свойство Путь к данным) – это text:
binding.set_dataPath("text");

Данные будут записываться в свойство text элемента управления Label:
binding.set_property("text");

Теперь перейдем к преобразователю.


В данном примере будет использоваться преобразователь ToString:
binding.add_transform(Sys.Preview.BindingBase.Transformers.ToString);

По умолчанию входные данные передаются преобразователю в виде аргумента. Вы можете вставить в аргумент дополнительный текст, например метки, начальные и конечные предложения или даже информацию о форматировании:
binding.set_transformerArgument("Text entered: {0}");

На этом привязка данных почти закончена. Нам осталось лишь определить элемент?приемник с помощью метода set_target():
binding.set_target(label);

А теперь самая хитрая (и заключительная) стадия. Необходимо инициализировать оба элемента управления и механизм привязки:
textbox.initialize();
label.initialize();
binding.initialize()
}

Наконец надо не забыть загрузить файл PreviewScript.js, где содержится реализация механизма привязки:
(asp:ScriptManager runat="server")

(asp:ScriptReference Name="PreviewScript.js"
Assembly="Microsoft.Web.Preview" /)

(/asp:ScriptManager)

Полный программный код приводится в примере 15.1.


При вводе текста в поле ничего происходить не будет. Но когда вы покинете поле ввода либо с помощью клавиши табуляции, либо щелчком мыши за пределами поля, произойдет событие propertyChanged, отработает механизм привязки и введенный текст появится в метке, как показано на рис. 15.1.
Пример 15.1. Использование механизма привязки данных ASP.NET AJAX с преобразователем
ControlBindingTextBox.aspx
<%@ Page Language="C#" %>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1?transitional.dtd"> ASP.NET AJAX


(body)
(asp:ScriptManager ID="ScriptManager1" runat="server")

(asp:ScriptReference Name="PreviewScript.js"
Assembly="Microsoft.Web.Preview" /)

(/asp:ScriptManager)

(br /)



(/body)
.



Оцените статью: (0 голосов)
0 5 0

Статьи из раздела ASP.NET AJAX на эту тему:
Вызов методов
Групповая проверка
Использование разметки для привязки данных: xm-script
Направление привязки
Обработка событий