DotVVM-客户端和服务器之间的通信

这是有关DotVVM系列的第二篇文章。 第一篇文章更有可能是事实调查。 我尝试了一个简单的示例,以展示如何在基本级别上使用DotVVM。 实际上,该文章并未涉及最重要的内容:它是如何工作的。

本文致力于解决此问题以及流量优化。

本文将更详细地研究客户端与服务器之间的通信。
您可以从上一篇文章的示例中查看待办事项。 在此处编写的应用程序中,可以添加新案例并将其标记为完成。

沟通交流


请求页面时,将解析URL,然后DotVVM在DotVVMStartup.cs中查找它,该路由表中的路径位于.dothtml文件的路径中,而ViewModel上则具有一个指令。

ViewModel在json中序列化,这对ViewModel施加了某些规则。 所有公共方法和公共属性(字符串,Guid,bool,int,其他数字类型,日期时间,集合(数组,列表))都属于json。就列表而言,它可以是相同简单类型的集合,也可以是这些类型使用的对象。

在实际项目中使用DotVVM时,我们揭示了ViewModel体系结构的一些规则,我们一直遵循这些规则。

  • 不要在ViewModel中直接使用Entity Framework DbContext
  • 不要在视图中显示干净的实体,而是使用DTO(数据传输对象)
  • 为了更好地控制ViewModel,它应该继承DotvvmViewModelBase

因此,假设ViewModel已成功在json中组装,则所有前端绑定均在View中生成并加载了页面。 或者,传递了从DotvvmViewModelBase继承的方法:Init(),Load()和PreRender()。 首次加载页面时,覆盖这些功能可能会很有用,但首先要注意的是。



用列表添加新案例。

  1. AJAX POST从修改后的ViewModel的json发送到服务器
  2. 将相同的ViewModel卸载到服务器内存中,但未更改
  3. 通过初始化()
  4. 将未更改的服务器ViewModel与来自客户端的服务器进行比较
  5. Load()产生
  6. 该方法本身正在执行。
  7. 由PreRender()
  8. 比较之后,更改将发送回客户端。

当ViewModel继承DotvvmViewModelBase时,您可以访问Init(),Load()和PreRender()。 这三种方法都是抽象的,可以扩展和修改。

同样,在DotvvmViewModelBase中,有一个请求上下文Context的属性,从中可以访问请求对象,IsPostBack属性,URL参数等等

每次回发都发送整个ViewModel并不是很有效。 为了至少以某种方式减少发送的数据量,在DotVVM中有几种方法。

绑定属性


Bind属性使您可以告诉编译器如何处理ViewModel中的属性。



  • [Bind(Direction.Both)] -默认设置。 数据根据每个请求发送。
  • [Bind(Direction.None)] -它主要用于不进行序列化但在ViewModel中用于加载或保存它的服务和立面。
  • [Bind(Direction.ServerToClient)] -数据仅在一个方向上从服务器发送到客户端。 这意味着仅在加载页面时,而不是回发时。
  • [Bind(Direction.ServerToClientFirstRequest)] -静态数据的理想选择。 例如组合框中的选项
  • [Bind(Direction.ClientToServer)] -数据仅在一个方向上以回发的方式从客户端发送到服务器。

静态命令


DotVVM还允许您在服务器上请求静态方法。 这种方法的有效性是它们仅发送答案,即整个ViewModel来自服务器,但仅发送我们需要的部分。 这种静态方法可以采用参数并返回值。

在我们的示例中,有一个可以应用静态命令的地方。 当我们将案例标记为完成时。 不必将整个ViewModel发送到服务器。
您可以将MarkAsDone(ToDoItem项)方法重写为静态方法,方法是将其转移到单独的静态类中,并将[AllowStaticCommand]属性添加到该方法中。

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上有一个视频流(英文) ,他们讨论了主要的创新和新功能。

Source: https://habr.com/ru/post/zh-CN412951/


All Articles