XAF Blazor 中使用 Blazor 组件

前言

文章的标题是不是感觉有点奇怪，但实际我们在XAFBlazor中使用Blazor组件是很繁琐的，我们需要将Blazor组件封装成属性编辑器（PropertyEditor），再用非持久化对象（NonPersistentObject）去承载它。当我们有许多这样的Blazor组件时，不仅工作量大，同时还容易出错。下面我们通过一个巧妙的方式来减少这样重复的操作，这篇文章只是给出原理，EasyXaf.BlazorTabbedMdi模块（ http://www.cnblogs.com/haoxj/p/16916525.html ）对它做了实现。

演示

整体演示

基本使用

Blazor项目自带示例

在Blazor组件中添加 @attribute [ComponentNavigationItem] 就可以将Blazor组件添加到XAF导航栏中

Blazor组件中使用XAF

XAF中的很多服务都已注册到了容器中，如IObjectSpaceFactory，它可以创建一个IObjectSpace对象，通过它我们可以操作XAF中的BO，如果你想访问Application，可以注入IXafApplicationProvider，它有一个GetApplication方法。

注意：在XAF中自己创建的IObjectSpace对象，需要自己销毁，View中的IObjectSpace对象，XAF会自动销毁

模态弹窗

在Blazor组件中

前面是将Blazor组件在主窗口中显示，我们也可将其在模态窗口中显示

我们还可以给Blazor组件传递参数，同时Blazor组件也可以返回结果

Blazor组件代码

演示

在ViewController中

前面是在Blazor组件中调用弹窗，在ViewController中也是可以的

演示

原理

在继续阅读之前，你需要知道如何将Blazor组件集成到XAF中去，在有了上面所说的知识后，我们说一下它的实现原理及注意事项。

我们知道在导航项（IModelNavigationItem）中有ObjectKey属性及View属性，将View设置为一个详情视图（DetailView），将ObjectKey设置为相应的主键，就可以直接导航到对应的详情。我们将其改造一下，详情视图是展示Blazor组件的视图，而ObjectKey是Blazor组件的类型名称，这样我们就可以设置不同的ObjectKey值来展示不同的Blazor组件。详情视图的ModelClass是一个非持久化对象，代码如下：

由于非持久化对象的数据需要我们自己提供，我们可以订阅NonPersistentObjectSpace的ObjectByKeyGetting事件，通过Key的值返回对应的Blazor组件类型，代码如下：

需要注意ObjectKey中不能包含点（.），由于XAFBlazor会将ObjectKey作为Url的一部分，而Blazor中对点的处理是请求文件，所以这里我们将点替换为减号（-）。

当我们得到了Blazor组件的类型后，我们就可以将其展示出来，代码如下：

DynamicComponent可以通过类型动态加载组件

上面就是在XAF中使用Blazor组件的思路，如果想再丰富一些，可以创建一个ComponentNavigationItemAttribute，将其放到Blazor组件中，用于收集导航，这是XAF模型的知识，可以参考之前的文章。

写在最后

在XAFBlazor中直接使用Blazor组件，是一种新的开发体验，这样可以最大程度的扩展XAFBlazor功能，同时也可充分利用WEB开发社区的其它组件。