привет

Немного альтернативной истории — Да, победили, и что толку? — вздыхал Саня. — Столько крови пролили, в половине Европы социализм установили. Теперь нам никогда не войти в европейскую семью народов, мы не уважали их ценности. А знаешь, сколько немок изнасиловали наши солдаты, когда заняли Берлин? Миллион! Это же ужасно! Саня, либеральный сетевой журналист, отлично...

Далее

#котозависимость Та же проблема...

Далее

Креатив в Магнитогорске Как и раньше продолжаю замечать необычные вещи, когда гуляю по городу. Некоторые кеативные люди заставляют улыбаться. Лифт, на котором можно отправиться в "Ж". Магазин, в котором продается самая не свежая выпечка в городе.

Далее

С днем рождения меня! https://www.youtube.com/watch?v=DL3pP7FsRGE

Далее

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>

Прокомментировать