How to: Implement an ASP.NET Web List Editor Using a Custom Control 如何：使用自定义控件实现ASP.NET Web 列表编辑器

The eXpressApp Framework is shipped with a number of built-in List Editors. However, in certain scenarios, you may need to implement a custom List Editor, to display object collections in a particular way. This topic demonstrates how to implement a custom ASPxCustomListEditor List Editor that uses a custom control. This List Editor is designed to display objects, implementing a custom IPictureItem interface as a list of images, one for each object. It can be used, for instance, to display DVD covers.

eXpressApp 框架附带了许多内置列表编辑器。但是，在某些情况下，您可能需要实现自定义列表编辑器，以特定方式显示对象集合。本主题演示如何实现使用自定义控件的自定义 ASPx 自定义列表编辑器列表编辑器。此列表编辑器旨在显示对象，实现自定义 IPictureItem 接口作为图像列表，每个对象一个。例如，它可用于显示 DVD 封面。

 

The following image demonstrates the implemented List Editor in an Album List View:

下图演示了相册列表视图中实现的列表编辑器：

Note 注意

• You can see the code implemented here in the FeatureCenter Demo installed with XAF. This demo is located in the %PUBLIC%\Documents\DevExpress Demos 19.2\Components\eXpressApp Framework\FeatureCenter folder, by default.

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

• 您可以在使用 XAF 安装的功能中心演示中看到此处实现的代码。默认情况下，此演示位于 %PUBLIC%_文档_DevExpress 演示 19.2_组件_eXpressApp 框架_功能中心文件夹中。
• ASP.NET使用客户端脚本管理器的控件。无法使用此示例集成注册启动脚本方法。如果需要集成此类控件，请随时联系我们的支持团队

When implementing a custom List Editor that works with specific data, you can design it for a particular class. However, in this example, an interface will be introduced containing the properties required by the List Editor. Then, the List Editor will be designed to display objects implementing the interface. This approach allows you to simultaneously use that same List Editor for different classes. List Views displayed via the ASPxCustomListEditor will have two columns: Image and Text. The special interface has an additional ID property that represents a unique object identifier.

实现适用于特定数据的自定义列表编辑器时，可以为特定类设计它。但是，在此示例中，将引入一个包含列表编辑器所需的属性的接口。然后，列表编辑器将设计为显示实现接口的对象。此方法允许您同时对不同的类使用相同的列表编辑器。通过 ASPx 自定义列表编辑器显示的列表视图将包含两列：图像和文本。特殊接口具有表示唯一对象标识符的附加 ID 属性。

using System.Drawing;
//...
public interface IPictureItem {
    Image Image { get; }
    string Text { get; }
    string ID { get; }
}

 

Start implementing the List Editor by inherit its class from the ListEditor class, and implement basic functionality by overriding the following members. Note that your editor should be public.

• CreateControlsCore method that instantiates the List Editor's control. Override it to create and configure an instance of the custom control (in this example, ASPxCustomListEditorControl).
• AssignDataSourceToControl method that assigns the List Editor's data source to its control.
• ListEditor.Refresh method that refreshes the data source of the List Editor's control.
• To specify that List Views displaying IPictureItem objects should use the ASPxCustomListEditor, decorate the List Editor class with the ListEditorAttribute.

通过从 ListEditor 类继承其类来开始实现列表编辑器，并通过重写以下成员来实现基本功能。请注意，您的编辑器应该是公开的。

• 创建实例化列表编辑器控件的"控制核心"方法。覆盖它以创建和配置自定义控件的实例（在此示例中，ASPx 自定义列表编辑器控制）。
• 分配数据源控制方法，该方法将列表编辑器的数据源分配给其控件。
• 列表编辑器.刷新方法，用于刷新列表编辑器控件的数据源。
• 要指定显示 IPictureItem 对象的列表视图应使用 ASPx 自定义列表编辑器，请使用 ListEditor 属性装饰列表编辑器类。

using System;
using DevExpress.ExpressApp.Editors;
using DevExpress.ExpressApp.Model;
using DevExpress.ExpressApp.Utils;
// ...
[ListEditor(typeof(IPictureItem))]
public class ASPxCustomListEditor : ListEditor {
    public ASPxCustomListEditor(IModelListView info) : base(info) { }
    private ASPxCustomListEditorControl control;
    protected override object CreateControlsCore() {
        control = new ASPxCustomListEditorControl();
        control.ID = "CustomListEditor_control";
        return control;
    }
    protected override void AssignDataSourceToControl(Object dataSource) {
        if (control != null) {
            control.DataSource = ListHelper.GetList(dataSource);
        }
    }
    public override void Refresh() {
        if (control != null) control.Refresh();
    }
}

 

The List Editor demonstrated above can display a collection of objects implementing the IPictureItem interface. Additionally, a List Editor should be able to invoke a Detail View for the focused object when an end-user clicks the object. For this purpose, modify the following members:

• In the CreateControlsCore method, subscribe to the control's OnClick event. In the event handler, call the OnSelectionChanged and OnProcessSelectedItem methods.
• Override the ListEditor.FocusedObject method, to get and set the focused object.

上面演示的列表编辑器可以显示实现 IPictureItem 接口的对象的集合。此外，当最终用户单击对象时，列表编辑器应该能够调用焦点对象的详细信息视图。为此，请修改以下成员：

• 在"创建控制核心"方法中，订阅控件的 OnClick 事件。在事件处理程序中，调用 OnSelectionChanged 和"选择"项目方法。
• 覆盖 ListEditor.焦点对象方法，获取和设置焦点对象。

Additionally, implement the custom CustomListEditorClickEventArgs class with the IPictureItem field for the OnClick event.

此外，使用 OnClick 事件的 IPictureItem 字段实现自定义列表编辑器单击EventArgs类。

[ListEditor(typeof(IPictureItem))]
public class ASPxCustomListEditor : ListEditor {
    //...
    protected override object CreateControlsCore() {
        //...
        control.OnClick += new EventHandler<CustomListEditorClickEventArgs>(control_OnClick);
        //...   
    }
    private void control_OnClick(object sender, CustomListEditorClickEventArgs e) {
        this.FocusedObject = e.ItemClicked;
        OnSelectionChanged();
        OnProcessSelectedItem();
    }
    private object focusedObject;
    public override object FocusedObject {
        get {
            return focusedObject;
        }
        set {
            focusedObject = value;
        }
    }
}
public class CustomListEditorClickEventArgs : EventArgs {
    public IPictureItem ItemClicked;
}

 

The final step is to implement the following abstract members:

• Override the ListEditor.SelectionType property. Since the List Editor supports selection which is active only while a postback is processed, this property must return the SelectionType.TemporarySelection value.
• Override the ListEditor.GetSelectedObjects method. This method must return a list of the selected objects. In our case, this is the focused object.
• Override the ListEditor.ContextMenuTemplate property. This property is used to support the List Editor's context menu. Since Internet browsers already have a context menu, we return null in this property.

最后一步是实现以下抽象成员：

• 覆盖列表编辑器.选择类型属性。由于列表编辑器支持仅在处理回退时处于活动状态的选择，因此此属性必须返回 SelectionType.临时选择值。
• 覆盖列表编辑器.获取选定对象方法。此方法必须返回所选对象的列表。在我们的例子中，这是焦点对象。
• 覆盖列表编辑器.上下文菜单模板属性。此属性用于支持列表编辑器的上下文菜单。由于 Internet 浏览器已有上下文菜单，因此在此属性中返回 null。

using System.Collections;
using System.Collections.Generic;
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Templates;
// ...
[ListEditor(typeof(IPictureItem))]
public class ASPxCustomListEditor : ListEditor {
    //...
    public override SelectionType SelectionType {
        get { return SelectionType.TemporarySelection; }
    }
    public override IList GetSelectedObjects() {
        List<object> selectedObjects = new List<object>();
        if(FocusedObject != null) {
            selectedObjects.Add(FocusedObject);
        }
        return selectedObjects;
    }
    public override IContextMenuTemplate ContextMenuTemplate {
        get { return null; }
    }
}