Это вторая статья из серии, посвященной DotVVM. Первая статья Это было скорее знакомство.
Я постарался на простом примере показать, как работать в DotVVM на базовом уровне.
В статье, по сути, не затронуто самое главное: как это работает. Данному вопросу, а также оптимизации трафика посвящена данная статья.
В этой статье мы более подробно рассмотрим связь между клиентом и сервером.
Можно взять пример из предыдущей статьи со списком дел.
В написанное там приложение можно было добавлять новые задачи и отмечать их как выполненные.
Коммуникация
При запросе страницы URL парсится и DotVVM ищет его в DotVVMStartup.cs, где в таблице маршрутов есть путь к файлу .dothtml, где, в свою очередь, есть директива к ViewModel. ViewModel сериализуется в json, и это налагает на ViewModel определенные правила.
Все публичные методы и публичные свойства (string, Guid, bool, int, другие числовые типы, DateTime, коллекции (массив, List) включены в json. В случае List это может быть коллекция таких же простых типов, или объекты, использующие эти типы.
При работе с DotVVM в реальных проектах выявилось несколько правил архитектуры ViewModel, которых мы стараемся придерживаться.
- Не используйте Entity Framework DbContext непосредственно во ViewModel.
- Не показывайте чистые сущности в представлении, а используйте DTO (объекты передачи данных).
- Для большего контроля над ViewModel он должен наследовать DotvvmViewModelBase.
Мы рассмотрели методы, унаследованные от DotvvmViewModelBase: Init(), Load() и PreRender().
При первой загрузке страницы переопределение этих функций может оказаться полезным, но обо всем по порядку.
Добавим в список новую задачу.
- AJAX POST отправляется на сервер с json измененной модели представления.
- В память сервера выгружается та же ViewModel, но без изменений.
- Произведено В этом()
- Неизмененная серверная ViewModel сравнивается с тем, что пришло от клиента.
- Произведено Нагрузка()
- Сам метод выполняется
- Произведено Пререндер()
- После сравнения изменения отправляются обратно клиенту.
Все три метода абстрактны и могут расширяться и модифицироваться.
Также в DotvvmViewModelBase есть свойство контекста запроса Context, откуда у вас есть доступ к объекту запроса, свойству IsPostBack и параметрам URL. гораздо больше .
Отправка всей ViewModel при каждой обратной передаче не очень эффективна.
Чтобы как-то уменьшить объём отправляемых данных, у DotVVM есть несколько подходов.
Привязать атрибут
Атрибут Bind позволяет вам сообщить компилятору, как обрабатывать свойства в ViewModel.
- [Привязать(Направление.
Оба)] - Настройки по умолчанию.
Данные отправляются с каждым запросом.
- [Привязать(Направление.
Нет)] — В основном используется для сервисов и фасадов, которые не сериализуются, но используются в ViewModel для загрузки или сохранения данных.
- [Привязать(Направление.
ServerToClient)] — Данные передаются только в одном направлении, от сервера к клиенту.
Это означает, что только при загрузке страницы, но не во время обратной передачи.
- [Bind(Direction.ServerToClientFirstRequest)] — Идеально подходит для статических данных.
Например, параметры в поле со списком
- [Привязать(Направление.
КлиентКСервер)] — Данные передаются только в одном направлении, при постбэке, от клиента к серверу.
Статические команды
DotVVM также позволяет вам сделать запрос к статическому методу на сервере.Эффективность таких методов в том, что они отправляют только ответ, то есть с сервера приходит вся ViewModel, а только та часть, которая нам нужна.
Такие статические методы могут принимать параметры и возвращать значения.
В нашем примере есть место, где можно применять статические команды.
Когда мы отмечаем задачу как «выполненную».
Нет необходимости отправлять всю ViewModel на сервер.
Вы можете переписать метод MarkAsDone(ToDoItem item) так, чтобы он стал статическим, переместив его в отдельный статический класс и добавив к методу атрибут. [Разрешитьстатическуюкоманду] .
Нам также нужно изменить представление, добавив директиву с пространством имен, в котором находится наш статический класс.namespace FirstDotvvmApp { public static class ToDoItemValidator { [AllowStaticCommand] public static bool IsDone() => true; } }
@import FirstDotvvmApp
Кнопка будет использовать не просто команду, а staticCommand. <dot:Button
Validation.Enabled="false"
Visible="{value: !IsDone}"
Text="Mark as done"
Click="{staticCommand: IsDone = ToDoItemValidator.IsDone()}">
</dot:Button>
Для сравнения вы можете увидеть, сколько трафика мы сэкономили.
Обычно для экономии трафика при общении на реальных проектах используется комбинация обоих подходов.
Ссылки
Дополнительные примеры использования новых функций можно найти связь .Тоже недавно прошел поток (англ.
) от DotVVM 2.0 , где рассказали об основных нововведениях и новых функциях.
Теги: #dotvvm #C++ #.
NET #.
net core. asp.net core #Разработка веб-сайтов #.
NET #C++
