Давайте поговорим об основных элементах интерфейса Ext.Net и способах обмена данными между клиентской и серверной частью. За основу для этого урока возьмем проект из предыдущего.
Рассмотрим три важных элемента: кнопки, окна сообщения и уведомления.
- Кнопка — в общем смысле элемент интерфейса, представляющий собой ограниченную область, нажатие на которую приводит к выполнению некоторых действий.
- Окно сообщения — элемент интерфейса, включающий в себя некоторое информационное сообщение и набор вариантов действий, обычно оформляемый с помощью кнопок.
- Уведомление — элемент интерфейса, представляющий собой ограниченную область и содержащий информационное сообщение, несущее для пользователя уведомляющий характер и не предполагающий активных ответных действий пользователя.
Разберем на примере, как создать каждый из перечисленных элементов.
Кнопку удобнее всего описать в razor’овском описании представления. Добавим кнопку в окошко из предыдущего примера:
@using (Html.BeginForm()) { @(Html.X().Window() .ID("Window1") .Title("Окно") .Icon(Icon.Application) .Height(185) .Width(350) .BodyStyle("background-color: #fff;") .BodyPadding(5) .Modal(false) .Items ( (Html.X().Button() .ID("Button1") .Text("Нажми сюда!") ) ) ) }
Как видите, мы убрали атрибут Content и заменили его на Items, который задает коллекцию всех дочерних элементов контейнера. В нем мы определили кнопку с идентификатором Button1 и текстом «Нажми сюда!».
Следующий вопрос — как обработать нажатие на кнопку? Есть несколько два основных способа:
- Свойство Listener — в нем можно указать обработчик события на JavaScript.
- Группа свойств Direct%Action — в нем можно указать обработчик события на серверной стороне, который реализован в контроллере.
Вот пример использования обоих способов. В представлении добавим еще одну кнопку и пропишем обоим обработчики:
@using (Html.BeginForm()) { @(Html.X().Window() .ID("Window1") .Title("Окно") .Icon(Icon.Application) .Height(185) .Width(350) .BodyStyle("background-color: #fff;") .BodyPadding(5) .Modal(false) .Items ( Html.X().Button() .ID("Button1") .Text("Кнопка 1 - Listener") .OnClientClick("alert('Кнопка 1 нажата!');"), Html.X().Button() .ID("Button2") .Text("Кнопка 2 - DirectAction") .DirectClickAction("ButtonClick") ) ) }
Запускаем и видим окошко с двумя кнопками. При нажатии на первую кнопку появится сообщение с текстом «Кнопка 1 нажата!», при нажатии на вторую — большое и красивое окошко с ошибкой Ext.net (познакомьтесь, кстати). И это логично, ведь ButtonClick — метод, который должен быть описан в контроллере, но мы его там не описали. Давайте им займемся, и, заодно, научимся создавать окна-сообщения и окна-вопросы.
В контроллер страницы добавляем новый метод:
public ActionResult ButtonClick() { X.Msg.Prompt("Вопрос", "Введите любую строку:", new JFunction { Fn = "showResultText" }).Show(); return this.Direct(); }
Не забываем подключить сборки Ext.Net и Ext.Net.MVC.
Конструктор Prompt класса Msg создает окно-сообщение с запросом ввода от пользователя (для вывода других сообщений можно использовать другие методы класса Msg), а метод Show заставляет клиента его отрисовать. Первый параметр у конструктора Prompt — текст заголовка окна, второй — содержимое окна. Третий параметр — это JS-функция, в данной ситуации с именем showResultText. Соответственно, её надо реализовать на клиентской стороне:
<script> var showResultText = function (btn, text) { Ext.Msg.notify("Сообщение", text); }; </script>