Ext.Net + ASP.Net MVC: Кнопки, сообщения, обработчики

Давайте поговорим об основных элементах интерфейса 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>