How to: Show a Custom Data-Bound Control in an XAF View (Blazor) - Current Object Data（如何：在 XAF 视图（Blazor）中显示自定义数据绑定控件 - 当前对象数据）
This article explains how to create a reusable View Item that can work with data supplied by the View’s current object. Before you continue, make sure you are familiar with the tutorial that describes the commonly required steps - How to: Show a Custom Data-Bound Control in an XAF View (Blazor) - External Data .
本文介绍如何创建一个可重用的视图项，该视图项可以处理视图当前对象提供的数据。在继续之前，请确保您熟悉描述常用步骤的教程-如何：在XAF视图中显示自定义数据绑定控件（Blazor）-外部数据。
Create a Razor Component（创建Razor组件）
In this example, you create a Razor component based on DxAccordion . The new component displays employees assigned to a particular department.
在此示例中，您将创建一个基于DxHanddion的Razor组件。新组件显示分配到特定部门的员工。
To add this component to your project, follow the steps below:
要将此组件添加到您的项目中，请执行以下步骤：
1.In the Solution Explorer, right-click your project’s name and select Add -> New Item from the ensuing context menu.
在解决方案资源管理器中，右键单击项目名称并从随后的上下文菜单中选择Add->New Item。
2.Specify a component name (DepartmentViewer.razor).
指定组件名称（DepartmentViewer. razor）。
3.Add the following code to the created file.
将以下代码添加到创建的文件中。
Razor
@using MainDemo.Module.BusinessObjects;
@using DevExpress.Blazor;
@if (Department == null) {
<div>No selected department.</div>
} else {
<p>Department name: <DxTextBox @bind-Text="@Department.Title" /></p>
<p>Department head: @Department.DepartmentHead?.FullName</p>
<p>Department description: @Department.Description</p>
<DxAccordion ExpandMode="AccordionExpandMode.SingleOrNone"
style="max-width: 600px"
AnimationType="LayoutAnimationType.Slide">
<Items>
@if(Department.Employees is not null) {
@foreach(var employee in Department.Employees) {
<DxAccordionItem Text="@employee.FullName" @key="employee">
<ContentTemplate>
<div style="display: flex;">
<div style="flex: 1 0 0;">
<div><b>Full name:</b> @employee.FullName</div>
<div><b>Email address:</b> @employee.Email</div>
<div><b>Position:</b> @employee.Position</div>
<div><b>Office:</b> @employee.Department.Office</div>
@if(employee.Manager is not null) {
<div><b>Manager:</b> @employee.Manager.FullName</div>
}
</div>
<div style="flex: 1 0 0; display: flex; justify-content: end;">
@if(employee.Photo is not null) {
<div style="flex: 1 0 0; display: flex; justify-content: end;">
<img src="@($"data:image/png;base64,{Convert.ToBase64String(employee.Photo)}")"
style="max-width: 300px; max-height: 300px;">
</div>
}
</div>
</div>
</ContentTemplate>
</DxAccordionItem>
}
}
</Items>
</DxAccordion>
}
@code {
[Parameter] public Department Department { get; set; }
}
The DepartmentViewerModel.SetTitleFromUI method notifies subscribers when a user changes the department’s title.
DepartmentViewerModel.SetTitleFromUI方法在用户更改部门标题时通知订阅者。
4.In the Properties window, set this file’s Build Action to Content.
在属性窗口中，将此文件的构建操作设置为内容。
Create a Custom View Item and its Control（创建自定义视图项及其控件）
Create a custom View Item that implements IComponentContentHolder and returns DepartmentViewerModel in the CreateControlCore method. To do this, follow the steps below:
在CreateControlCore方法中创建实现IComponentContentHolder并返回DepartmentViewerModel的自定义视图项。
1.Add a new file (DepartmentViewerViewItem.cs) to your Blazor project.
将新文件（DepartmentViewerViewItem. cs）添加到Blazor项目中。
2.Add the following code to the created file.
将以下代码添加到创建的文件中。
C#
using DevExpress.ExpressApp.Blazor ;
using DevExpress.ExpressApp.Blazor.Components;
using DevExpress.ExpressApp.Blazor.Components.Models;
using DevExpress.ExpressApp.Editors ;
using DevExpress.ExpressApp.Model ;
using MainDemo.Blazor.Server.Controllers;
using MainDemo.Module.BusinessObjects;
using Microsoft.AspNetCore.Components ;
namespace MainDemo.Blazor.Server;
public class DepartmentViewerModel : ComponentModelBase {
public Department Department {
get => GetPropertyValue<Department>();
set => SetPropertyValue(value);
}
public override Type ComponentType => typeof(DepartmentViewer);
}
public interface IModelDepartmentViewerViewItem : IModelViewItem { }
[ViewItem(typeof(IModelDepartmentViewerViewItem))]
public class DepartmentViewerViewItem : ViewItem, IComponentContentHolder {
private RenderFragment _componentContent;
public DepartmentViewerModel ComponentModel { get; private set; }
public DepartmentViewerViewItem(IModelDepartmentViewerViewItem model, Type objectType) : base(objectType, model.Id) { }
protected override object CreateControlCore() {
ComponentModel = new DepartmentViewerModel { Department = View.CurrentObject as Department };
return ComponentModel;
}
public RenderFragment ComponentContent {
get {
_componentContent ??= ComponentModelObserver.Create(ComponentModel, ComponentModel.GetComponentContent());
return _componentContent;
}
}
protected override void OnCurrentObjectChanged() {
base.OnCurrentObjectChanged();
if(ComponentModel is not null) {
ComponentModel.Department = View.CurrentObject as Department;
}
}
}
3.Rebuild your solution.
重建您的解决方案。
For more information on how to implement View Items in XAF applications, refer to the following topic: Implement a View Item (WinForms) .
有关如何在XAF应用程序中实现视图项的更多信息，请参阅以下主题：实现视图项（WinForms）。
Change the Default Detail View for the Department List View（更改部门列表视图的默认详细信息视图）
1.In the Blazor application project, double-click the Model.xafml file to start the Model Editor . Right-click the Views node and choose Add | DetailView.
在Blazor应用程序项目中，双击Model. xafml文件以启动模型编辑器。右键单击视图节点并选择添加|DetailView。
2.Set the Id property to CustomDepartment_DetailView and the ModelClass property to MainDemo.Module.BusinessObjects.Department.
将Id属性设置为CustomDepartment_DetailView，将ModelClass属性设置为MainDemo. Module.BusinessObject.Department。
3.Right-click the Views | MainDemo.Module.BusinessObjects | CustomDepartment_DetailView | Items node and choose Add… | DepartmentViewerItemView.
右键单击Views|MainDemo. Module.BusinessObjects|CustomDepartment_DetailView|Items节点，然后选择Add…|DepartmentViewerItemView。
4.Set the Id property to DepartmentViewItem.
将Id属性设置为DepartmentViewItem。
5.Navigate to the Views | MainDemo.Module.BusinessObjects | Department_ListView node. In the DetailView drop-down list, select CustomDepartment_DetailView.
导航到视图|MainDemo. Module.BusinessObjects|Department_ListView节点。在DetailView下拉列表中，选择CustomDepartment_DetailView。
6.Run the your Blazor application, navigate to the Department List View, open any Detail View, and see the result.
运行Blazor应用程序，导航到部门列表视图，打开任何详细信息视图，然后查看结果。
