List View Edit Modes（列表视图编辑模式）

Default data editing UI in XAF applications involves two steps. You first locate a record in a List View. You can then open a Detail View with that record’s data and make the changes. This general behavior is common to all three supported UI platforms - WinForms, ASP.NET Web Forms, and ASP.NET Core Blazor.
XAF应用程序中的默认数据编辑UI包括两个步骤。首先在列表视图中找到一条记录。然后，您可以打开一个包含该记录数据的详细信息视图并进行更改。这种一般行为在所有三个受支持的UI平台上都很常见——WinForms、ASP.NET Web Forms和ASP.NET Core Blazor。

This topic demonstrates a few ways to make data editing available in List Views. In that case, a user doesn’t have to navigate to a separate Detail View.
本主题演示了在列表视图中提供数据编辑的几种方法。在这种情况下，用户不必导航到单独的详细信息视图。

Common Functionality Available in WinForms, ASP.NET Web Forms, and ASP.NET Core Blazor Applications（WinForms、ASP.NETWeb Forms和ASP.NETCore Blazor应用程序中可用的通用功能）

In-place Editing（就地编辑）

The following image illustrates an editable List View:
下图说明了可编辑的列表视图：

In a WinForms XAF application, select a row and click a property cell to edit an existing object. Use the New action or the grid’s New Item Row to add a new object.
在WinForms XAF应用程序中，选择一行并单击属性单元格以编辑现有对象。使用新建操作或网格的新建项目行添加新对象。

In ASP.NET Web Forms and ASP.NET Core Blazor XAF applications, you can click the Edit button to edit an existing object and the New button to create a new object. You can find these buttons in a row or table header. You can also use the InlineEditMode option to enable a WinForms-like style of Batch editing (see below).
在ASP.NETWeb窗体和ASP.NETCore Blazor XAF应用程序中，您可以单击编辑按钮来编辑现有对象，单击新建按钮来创建新对象。您可以在行或表格标题中找到这些按钮。您还可以使用InlineEditMode选项启用类似WinForms的批处理编辑样式（见下文）。

Make a List View Editable（使列表视图可编辑）

• Invoke the Model Editor , expand the Views node, and navigate to the child node that corresponds to the desired List View.
  调用模型编辑器，展开视图节点，并导航到与所需列表视图对应的子节点。

• Set the IModelView.AllowEdit property to True.
  将IModelView. AllowEdit属性设置为True。

• To allow users to create new objects directly in the List View, set the IModelListViewNewItemRow.NewItemRowPosition property to Top or Bottom. The New Item Row appears at the top or at the bottom of the List View, respectively.
  要允许用户直接在列表视图中创建新对象，请将IModelListViewNewItemRow. NewItemRowPoition属性设置为顶部或底部。新项目行分别出现在列表视图的顶部或底部。

Split Layout (The MasterDetailMode Property)（拆分布局（MasterDetailMode属性））

The split layout allows you to display both the Detail and List Views in the same window. The Detail View displays the currently selected object’s properties. The displayed content changes dynamically based on the object currently focused in the List View. The following images illustrate the split layout:
拆分布局允许您在同一窗口中同时显示详细信息和列表视图。详细信息视图显示当前选定对象的属性。显示的内容根据列表视图中当前聚焦的对象动态变化。以下图像说明了拆分布局：
ASP.NET Core Blazor

WinForms

ASP.NET Web Forms

To enable the split layout for a specific List View, follow the steps below:
要为特定列表视图启用拆分布局，请执行以下步骤：

• Invoke the Model Editor , expand the Views node, and navigate to the child node that corresponds to the desired List View.
  调用模型编辑器，展开视图节点，并导航到与所需列表视图对应的子节点。
• Set the IModelListView.MasterDetailMode property to ListViewAndDetailView.
  将IModelListView. MasterDetailMode属性设置为ListViewAndDetailView。
• Navigate to the SplitLayout child node and set the IModelSplitLayout.Direction property to Horizontal or Vertical to position the Detail View.
  导航到SplitLayout子节点并将IModelSplitLayout. Direction属性设置为水平或垂直以定位详细信息视图。

An object can have multiple Detail Views available. The IModelListView.MasterDetailView property allows you to specify the Detail View that corresponds to the object currently selected in the List View. If the IModelListView.MasterDetailView property is not specified, the List View uses the IModelListView.DetailView value. If both the MasterDetailView and DetailView properties are unspecified, the List View uses the IModelClass.DefaultDetailView value specified for the current object.
一个对象可以有多个可用的详细信息视图。IModelListView. MasterDetailView属性允许您指定与列表视图中当前选择的对象对应的详细信息视图。如果未指定IModelListView.MasterDetailView属性，则列表视图使用IModelListView.DetailView值。如果MasterDetailView和DetailView属性均未指定，则列表视图使用为当前对象指定的IModelClass.DefaultDetailView值。

Note that in XAF Blazor applications, when MasterDetailMode is set to ListViewAndDetailView, in-place editing is disabled (the IModelView.AllowEdit option has no effect).
请注意，在XAF Blazor应用程序中，当MasterDetailMode设置为ListViewAndDetailView时，就地编辑将被禁用（IModelView. AllowEdit选项无效）。

ASP.NET Core Blazor-Specific Functionality（ ASP.NET Core Blazor特定功能）

In-place Editing Customization (The InlineEditMode Property)（就地编辑自定义（InlineEditMode属性））

You can use the IModelListViewBlazor.InlineEditMode property of a Views | <ListView> node to change the edit form type:
您可以使用Views|<ListView>节点的IModelListViewBlazor. InlineEditMode属性来更改编辑表单类型：

Commit Changes Automatically in Nested Views（在嵌套视图中自动提交更改）

If a Detail View contains a nested List View, a click on the Save button in the List View’s in-line edit form does not save changes in that List View. These changes are applied only when you save the object associated with the root Detail View. To change this behavior, override the AutoCommitChanges property of the ListEditorInplaceEditController:
如果详细信息视图包含嵌套的列表视图，则单击列表视图的内联编辑表单中的保存按钮不会保存该列表视图中的更改。这些更改仅在保存与根详细信息视图关联的对象时应用。要更改此行为，请覆盖ListEditorInplaceEditController的自动提交更改属性：

cs
public class CustomListEditorInplaceEditController : ListEditorInplaceEditController {
    protected override bool AutoCommitChanges => View.Id == "SomeBusinessObject_ListView" ? true : base.AutoCommitChanges;
}

The code above forces the ObjectSpace associated with a nested List View to commit changes and save them in response to a click on the Save button when you in-place edit the SomeBusinessObject in the nested List View.
上面的代码强制与嵌套列表视图关联的ObjectSpace提交更改并保存它们以响应单击保存按钮，当您在嵌套列表视图中就地取材时。

Customize a Property Editor（自定义属性编辑器）

When you use inline editing in a List Editor, you can customize Property Editors to change their appearance and subscribe to their events.
当您在列表编辑器中使用内联编辑时，您可以自定义属性编辑器以更改其外观并订阅其事件。

The following example demonstrates how to use the DxGridListEditor.CustomizeViewItemControl method to customize the background for a StringPropertyEditor:
以下示例演示如何使用DxGridListEditor.CustomizeViewItemControl方法自定义StringPropertyEditor的背景：

C#
using  DevExpress.ExpressApp ;
using DevExpress.ExpressApp.Blazor.Components.Models;
using  DevExpress.ExpressApp.Blazor.Editors ;


public class CustomizeInlinePropertyEditorController : ViewController<ListView> {
    protected override void OnActivated() {
        base.OnActivated();
        if(View.Editor is DxGridListEditor gridListEditor) {
            gridListEditor.CustomizeViewItemControl<StringPropertyEditor>(this, CustomizePropertyEditor);
        }
    }
    private void CustomizePropertyEditor(StringPropertyEditor stringPropertyEditor) {
        if(stringPropertyEditor.ComponentModel is DxTextBoxModel textBoxModel) {
            textBoxModel.CssClass += " background-orange";
        }
    }
}

CSS
.background-orange {
    background-color: darkorange;
}

Customize EditForm Template（自定义EditForm模板）

You can customize a regular or pop-up edit form. To do this, specify the GridModel.EditFormTemplate as shown in the example below:
您可以自定义常规或弹出式编辑表单。为此，请指定GridModel. EditFormTemplate，如下例所示：

EditFormGridController.cs:

C#
using  DevExpress.ExpressApp ;
using  DevExpress.ExpressApp.Blazor.Editors ;


public class EditFormGridController : ObjectViewController<ListView, CustomEditFormObject> {
    protected override void OnViewControlsCreated() {
        base.OnViewControlsCreated();
        if(View.Editor is DxGridListEditor gridListEditor) {
            gridListEditor.GridModel.EditFormTemplate = CustomEditFormTemplate.Create(gridListEditor.PropertyEditors);
        }
    }
}

CustomEditFormTemplate.razor:

razor
@using DevExpress.ExpressApp.Blazor.Editors
@inherits DxGridEditFormTemplateBase


<DxFormLayout>
    @foreach((string caption, RenderFragment fragment) in GetItems()) {
        <div>
            @caption:
            @fragment
        </div>
    }
</DxFormLayout>
@CreateSaveCancelButtons()


@code {
    public static new RenderFragment<GridEditFormTemplateContext> Create(IEnumerable<BlazorPropertyEditorBase> propertyEditors) =>
        (GridEditFormTemplateContext context) =>
            @<CustomEditFormTemplate Context="@context" PropertyEditors="@propertyEditors" />;
}

Set List And Detail View Size in Split Layout（在拆分布局中设置列表和详细信息视图大小）

In split layout mode, the List View and Detail View have equal sizes. Use either of the following techniques to change this behavior:
在拆分布局模式下，列表视图和详细信息视图的大小相同。使用以下任一技术来更改此行为：

• Drag the splitter to a new position at runtime. XAF saves this position in the SplitterPosition property for the current view. To persist these changes for individual users in the database, set up a user model difference store as described in the following topic: Store Application Model Differences in the Database .
  在运行时将拆分器拖动到新位置。XAF将此位置保存在当前视图的SplitterPoition属性中。要为数据库中的各个用户保留这些更改，请按照以下主题中的说明设置用户模型差异存储：在数据库中存储应用程序模型差异。
• Specify the IModelSplitLayout.SplitterPosition property to set a fixed size in pixels for the view that is displayed first .
  指定IModelSplitLayout. SplitterPoplace属性以为首先显示的视图设置固定大小（以像素为单位）。
• Use ISplitLayoutSizeService to set the relative size for a List View when IModelListView.MasterDetailMode is ListViewAndDetailView. This is useful when you need to need to customize a specific split view at runtime. Note that the relative size has a lower priority than the fixed size specified by IModelSplitLayout.SplitterPosition .
  当IModelListView. MasterDetailModeListViewAndDetailView时，使用ISplitLayoutSizeService设置列表视图的相对大小。当您需要在运行时自定义特定的拆分视图时，这很有用。请注意，相对大小的优先级低于IModelSplitLayout.SplitterPoition指定的固定大小。

The following code sample demonstrates how to set the size of all List Views to 40% of the parent container. The detail view occupies the remaining 60%.
以下代码示例演示了如何将所有List Views的大小设置为父容器的40%。详细信息视图占据剩余的60%。

C#
using  DevExpress.ExpressApp ;
using  DevExpress.ExpressApp.Blazor ;
using  DevExpress.ExpressApp.Blazor.Services ;


public class DefaultRelativeSizeController : ViewController<ListView> {
    ISplitLayoutSizeService SplitLayoutSizeService =>
        ((BlazorApplication)Application).ServiceProvider.GetRequiredService<ISplitLayoutSizeService>();
    protected override void OnActivated() {
        base.OnActivated();
        SplitLayoutSizeService[View.Id] = 40;
    }
}

WinForms-Specific Functionality（WinForms特定功能）

Commit Changes Automatically（自动提交更改）

The WinForms application displays a confirmation dialog if a user focuses another element in the window after editing a cell in the in-place editor or the Detail View:
如果用户在就地编辑器或详细信息视图中编辑单元格后聚焦窗口中的另一个元素，WinForms应用程序会显示一个确认对话框：

The changes made in an editable List View can be saved automatically without confirmation when you select another object in the View or focus another element in the window. Use ModificationsController.ModificationsHandlingMode and ModificationsController.ModificationsCheckingMode properties to change this behavior for editable List Views.
当您在视图中选择另一个对象或在窗口中聚焦另一个元素时，可编辑列表视图中所做的更改无需确认即可自动保存。使用ModificationsControllerModificationsHandlingMode和ModificationsControllerModificationsCheckingMode属性更改可编辑列表视图的此行为。

ASP.NET Web Forms-Specific Functionality（ ASP.NET Web Forms特定功能）

In-place Editing Customization (The InlineEditMode Property)（就地编辑自定义（InlineEditMode属性））

In addition to the standard Edit Action , ASP.NET Web Forms XAF applications support an InlineEdit Action. You can find this action in a List Editor’s context menu. To specify the in-place edit mode, use the IModelListViewWeb.InlineEditMode property of a Views | <ListView> node.
除了标准的Edit Action之外，ASP.NET Web Forms XAF应用程序还支持InlineEdit Action。您可以在List Editor的上下文菜单中找到此操作。要指定就地编辑模式，请使用Views|<ListView>节点的IModelListViewWeb. InlineEditMode属性。

The ASPxGridListEditor takes this property’s value into account when the IModelView.AllowEdit property is set to True. The following table describes possible values of the InlineEditMode property:
当IModelView. AllowEdit属性设置为True时，ASPxGridListEditor会考虑此属性的值。下表描述了InlineEditMode属性的可能值：

The Batch Edit Mode changes the List View’s behavior in the following ways:
批量编辑模式通过以下方式更改列表视图的行为：

• The Detail View does not appear when you click a row.
  单击行时不会出现详细信息视图。
• You cannot edit the following data types: type , images , criteria , and file attachments .
  您不能编辑以下数据类型：类型、图像、条件和文件附件。
• The grid control uses only built-in column types and does not create Property Editors. If you want to customize cell editors, modify the ASPxGridView column’s properties. Property Editor customization does not affect cell editors.
  网格控件仅使用内置的列类型，不创建属性编辑器。如果要自定义单元格编辑器，请修改ASPxGridView列的属性。属性编辑器自定义不会影响单元格编辑器。
• Objects that correspond to data rows should have a non-composite key .
  与数据行对应的对象应该具有非复合键。
• You cannot enable Batch edit mode for List Views whose UseASPxGridViewDataSpecificColumns property is set to false.
  不能为UseASPxGridViewDataSpecificColumns属性设置为false的列表视图启用批处理编辑模式。
• Initial property values for new objects are passed to the client when the grid control is created. This grid control does not update these values when you use the New command item to create a new object. This behavior may affect your application if you need to update new object values on the server.
  创建网格控件时，新对象的初始属性值将传递给客户端。当您使用新建命令项创建新对象时，此网格控件不会更新这些值。如果您需要更新服务器上的新对象值，此行为可能会影响您的应用程序。
• The ImmediatePostData property affects current row properties only.
  ImmediatePostData属性仅影响当前行属性。
• If you handle client-side events, note that XAF implements the following callbacks:
  如果您处理客户端事件，请注意XAF实现以下回调：
  • When you start editing a reference property, the BatchEditStartEditing event handler sends a callback to get a data source for this property.
    当您开始编辑引用属性时，BatchEditStartEditing事件处理程序会发送回调以获取此属性的数据源。
  • When you finish editing a reference property decorated with ImmediatePostDataAttribute , the BatchEditEndEditing event handler sends a callback to update dependent property values.
    完成编辑用ImmediatePostDataAttribute修饰的引用属性后，BatchEditEndEdting事件处理程序将发送一个回调以更新相关属性值。

Note

• If a Lookup List View displays a large number of objects, set its Data Access Mode to Server. In this case, the View loads objects on demand .
  如果查找列表视图显示大量对象，请将其数据访问模式设置为服务器。在这种情况下，视图按需加载对象。
• If you want to enable the auto filter row for a List View with a reference property column, set the List View’s Data Access Mode to Server.
  如果要为带有引用属性列的列表视图启用自动过滤行，请将列表视图的数据访问模式设置为服务器。

Collection Property Edit Modes（集合属性编辑模式）

XAF has two edit modes for collection properties in an ASP.NET Web Forms application:
XAF对 ASP.NET Web Forms应用程序中的集合属性有两种编辑模式：
1.Collection properties are always visible in a Detail View but can be modified only when the Detail View is in Edit mode.
集合属性在详细视图中始终可见，但仅当详细视图处于编辑模式时才能修改。

2.Collection properties are hidden in Edit mode. They are visible and editable in View mode.
集合属性在编辑模式下隐藏。它们在视图模式下可见且可编辑。

You can use the WebApplication.CollectionsEditMode property to specify the edit mode globally. Refer to the following topic for details: How to: Hide Collection Properties in an Edit Mode Detail View for an ASP.NET Web Forms Application . To change the mode for an individual List View, use the IModelDetailViewWeb.CollectionsEditMode property in the Model Editor.
您可以使用WebApplication. CollicesEditMode属性全局指定编辑模式。有关详细信息，请参阅以下主题：如何：在 ASP.NET Web Forms应用程序的编辑模式详细信息视图中隐藏集合属性。要更改单个列表视图的模式，请使用模型编辑器中的IModelDetailViewWeb.CollicesEditMode属性。