How to: Implement a Property Editor Based on Custom Controls (ASP.NET) 如何：基于自定义控件实现属性编辑器 （ASP.NET）

This topic explains how to implement a Property Editor for ASP.NET applications. For demonstration purposes, an integer Property Editor is implemented in this example. It uses the DropDownList control in Edit mode and the Label control in View mode.

本主题介绍如何为ASP.NET应用程序实现属性编辑器。出于演示目的，在此示例中实现了整数属性编辑器。它在"编辑"模式下使用下拉列表控件，在"视图"模式下使用"标签"控件。

Tip 提示

You can see the code implemented here in the FeatureCenter Demo installed with XAF. This demo is located in the %PUBLIC%DocumentsDevExpress Demos 19.2ComponentseXpressApp FrameworkFeatureCenter folder by default.

您可以在使用 XAF 安装的功能中心演示中看到此处实现的代码。此演示位于%PUBLIC%DocumentsDevExpress Demos 19.2ComponentseXpressApp FrameworkFeatureCenter folder by default.

Note 注意

ASP.NET controls that use the ClientScriptManager.RegisterStartupScriptmethod cannot be integrated using this example. If need to integrate such a control, feel free to contact our Support Team

ASP.NET使用客户端脚本管理器的控件。如果需要集成此类控件，请随时联系我们的支持团队

.

Follow these steps to implement an ASP.NET Property Editor.

1. In an ASP.NET module project, inherit the WebPropertyEditor class. Note that your class should be public.

2. Apply PropertyEditorAttribute to specify the data type for which the Property Editor will be used (Int32 in this example). If you set the PropertyEditor attribute's last parameter to true, the Property Editor will be used for all integer properties in any business class.

3. Override the CreateViewModeControlCore method and return a WebControl descendant to further use it in View mode (the Label control in this example). Note that the Label control will be created by default if you don't override this method. Since in this mode, custom controls are supposed to be read-only, it is necessary to manually disable the capability to edit data if the control in use can be generally edited. For this purpose, specify the CustomWebControl.ReadOnly and ASPxWebControl.Enabled properties of the target control. In addition, make sure you specify a unique Control.ID value (see How to create controls dynamically).

4. Override the CreateEditModeControlCore method and return a WebControldescendant to further use it in Edit mode (the DropDownList control in this example). At this stage, you can set up the created control, subscribe to required events, and provide it with a data source if necessary. Note that the technique of setting up controls may be different depending on a control in use. Make sure you specify a unique Control.ID value (see How to create controls dynamically).

5. Determine which event of the control operating in Edit mode occurs when the edit value is changed by a user (e.g., the ListControl.SelectedIndexChangedevent). Refer to the control's documentation to find the appropriate event. Subscribe to this event and call the EditValueChangedHandler method (which internally raises the PropertyEditor.ControlValueChanged event and calls the PropertyEditor.WriteValue method). The EditValueChangedHandler method should be invoked during any callback (postback) raising in case a user has changed the value on the client side (in a browser) before this callback (postback) is raised.

6. Override the GetControlValueCore method and return the value specified by the WebPropertyEditor.Editor control used in Edit mode. Note that the returned data type should be the same as the edit property data type.

7. Override the ReadEditModeValueCore method and pass the PropertyEditor.PropertyValue object to the property that specifies the displayed content of the WebPropertyEditor.Editor control created to operate in Edit Mode

(the ListControl.SelectedValueproperty in this example).

8. Override the ReadViewModeValueCore method and pass the PropertyEditor.PropertyValue object to the property that specifies the displayed content of the WebPropertyEditor.InplaceViewModeEditor control created to operate in View Mode

(the Label.Text property in this example).

按照以下步骤实现ASP.NET属性编辑器

1. 在ASP.NET模块项目中，继承 WebPropertyEditor 类。请注意，您的类应该是公共的。

2. 应用属性编辑器属性来指定将使用属性编辑器的数据类型（本例中为 Int32）。如果将属性编辑器属性的最后一个参数设置为 true，则属性编辑器将用于任何 Business 类中的所有整数属性。

3. 覆盖 CreateViewModeControlCore 方法并返回 WebControl 后代以在视图模式下进一步使用它（本例中的标签控件）。请注意，如果不重写此方法，默认情况下将创建 Label 控件。由于在此模式下，自定义控件应该是只读的，因此，如果通常可以编辑正在使用的控件，则需要手动禁用编辑数据的功能。为此，请指定自定义WebControl.ReadOnly和ASPxWebControl.启用的目标控件的属性。此外，请确保指定唯一Control.ID值（请参阅如何动态创建控件）。

4. 重写"创建编辑模式控制核心"方法并返回 WebControl 子级以在编辑模式下进一步使用它（本例中的下拉列表控件）。在此阶段，您可以设置创建的控件，订阅所需的事件，并在必要时为它提供数据源。请注意，设置控件的技术可能会有所不同，具体取决于正在使用的控件。请确保指定唯一Control.ID值（请参阅如何动态创建控件）。

5. 确定当用户更改编辑值时（例如，ListControl.选择IndexChangedevent）在编辑模式下运行的控件的哪个事件。请参阅控件的文档以查找适当的事件。订阅此事件并调用 EditValueChangedHandler 方法（在内部引发属性编辑器.ControlValue 更改事件并调用属性编辑器.WriteValue 方法）。在引发任何回调（回发）期间，如果用户更改了客户端（在浏览器中）的值，则应调用 EditValueChangedHandler 方法。"

6. 覆盖 GetControlValueCore 方法并返回 WebPropertyEditor.编辑器在编辑模式下使用的值。请注意，返回的数据类型应与编辑属性数据类型相同。

7. 重写 ReadEditModeValueCore 方法，并将属性编辑器.PropertyValue 对象传递给指定 WebPropertyEditor 的显示内容的属性。

（本示例中的 ListControl.选择值属性）。

8. 覆盖 ReadViewModeValueCore 方法，并将属性编辑器.PropertyValue 对象传递给指定 WebPropertyEditor 的显示内容的属性。

（本示例中的 Label.Text 属性）。

The following code demonstrates the CustomIntegerEditor class implementation based on the steps listed above.

以下代码演示了基于上述步骤的 CustomIntegerEditor 类实现。

using System;
using System.Drawing;
using System.Web.UI.WebControls;
using DevExpress.ExpressApp.Model;
using DevExpress.ExpressApp.Editors;
using DevExpress.ExpressApp.Web.Editors;
//...
[PropertyEditor(typeof(Int32), false)]
public class CustomIntegerEditor : WebPropertyEditor {
    public CustomIntegerEditor(Type objectType, IModelMemberViewItem info) : base(objectType, info) { }
    protected override WebControl CreateViewModeControlCore() {
        Label control = new Label();
        control.ID = "editor";
        return control;
    }
    protected override WebControl CreateEditModeControlCore() {
        DropDownList control = new DropDownList();
        control.ID = "editor";
        control.Items.Add("0");
        control.Items.Add("1");
        control.Items.Add("2");
        control.Items.Add("3");
        control.Items.Add("4");
        control.Items.Add("5");
        control.SelectedIndexChanged += control_SelectedIndexChanged;
        return control;
    }

    void control_SelectedIndexChanged(object sender, EventArgs e) {
        EditValueChangedHandler(sender, e);
    }
    protected override object GetControlValueCore() {
        int result = 0;
        if(int.TryParse(((DropDownList)Editor).SelectedValue, out result)) {
            return result;
        }
        return 0;
    }
    protected override void ReadEditModeValueCore() {
        ((DropDownList)Editor).SelectedValue = ((int)PropertyValue).ToString();
    }
    protected override void ReadViewModeValueCore() {
        ((Label)InplaceViewModeEditor).Text = ((int)PropertyValue).ToString();
    }
}

Also, you can override the SetupControl method to instantiate and set up a control for which the customization code is provided. This method is called when the control is initialized, so it is recommended to place the control's customization code here.

此外，还可以重写 SetupControl 方法以实例化并设置提供自定义代码的控件。在初始化控件时调用此方法，因此建议将控件的自定义代码放在此处。

To edit a particular property value using the CustomIntegerEditor Property Editor, customize the Application Model. Invoke the Model Editor for the ASP.NET module project and navigate to the required BOModel| Class| OwnMembers| Membernode. Set the node's IModelCommonMemberViewItem.PropertyEditorType property to CustomIntegerEditor. After this, the property specified by the Member node will be displayed by the CustomIntegerEditor in all Views. To use the CustomIntegerEditor Property Editor in a specific Detail View only, use the PropertyEditorType property of the Views | <DetailView> | Items | <PropertyEditor> node instead.

要使用自定义IntegerEditor属性编辑器编辑特定属性值，请自定义应用程序模型。调用ASP.NET模块项目的模型编辑器并导航到所需的 BOModel*类*拥有会员*成员节点。将节点的 IModelCommonMemberViewItem.属性编辑器类型属性设置为自定义Integer编辑器。在此之后，成员节点指定的属性将由自定义Integer编辑器在所有视图中显示。要仅在特定详细信息视图中使用自定义IntegerEditor属性编辑器编辑器，请使用视图的属性编辑器类型属性 |<DetailView>*项目 |<PropertyEditor>节点。

Note 注意

You may need to implement the IAppearanceFormat interface and manually apply the IAppearanceFormat.BackColor, IAppearanceFormat.FontColor and IAppearanceFormat.FontStyle settings of the Conditional Appearance Module to the created control.

您可能需要实现 I外观格式接口，并手动将 I外观格式.BackColor.I外观格式.FontColor.FontColor 和 I外观格式.FontStyle 设置的条件外观模块的 FontStyle 设置应用于创建的控件。