EPR类企业管理系统

在我们现有系统基础上或全新开发,提供定制服务
为您的企业高效快速实施ERP,WMS,MES,CRM管理系统
全面管控物料仓库、销售业务、采购业务、仓库业务
生产过程、质量检验、组织架构、业务报表


定制
QQ:460-3528

开发
QQ群:3360-90194

源码
微信:136-3650-3721

如何:在XAF视图(ASP.NET)中显示自定义数据绑定控件

本文介绍如何使用自定义控件在ASP.NET应用程序的“详细信息视图”中查看和编辑数据。本文中的示例演示如何将ASPxTextBoxASPxCardView控件添加到MainDemo应用程序(%PUBLIC%\ Documents \ DevExpress Demos 19.2 \ Components \ eXpressApp Framework \ MainDemo)。您可以在自己的应用程序中将类似的方法与任何其他Web控件一起使用。

DataBoundControlWeb

提示

如何:在XAF视图中显示自定义数据绑定控件(WinForms)主题中提供了WinForms的类似示例。

声明一个接口以从视图控制器访问Web窗体用户控件

在解决方案资源管理器中,右键单击ASP.NET模块项目,然后选择“添加” |“添加”。新建项目...以添加IDepartmentView界面。

新接口

将此接口公开,并添加以下成员:

  • 标题字符串属性指定ASPxTextBox控制的文本;
  • 联系人集合属性指定ASPxCardView控制的数据源;
  • ASPxTextBox控件的文本更改时发生的TitleChanged事件。
using System;
using System.Collections.Generic;
using MainDemo.Module.BusinessObjects;
// ..
public interface IDepartmentView {
    string Title { get; set; }
    ICollection<Contact> Contacts { get; set; }
    event EventHandler TitleChanged;
}

创建一个View Controller来管理Web窗体用户控件的数据

在解决方案资源管理器中,右键单击ASP.NET模块项目的Controllers文件夹,然后选择“添加” |“添加”。New Item ...添加DepartmentViewController类。

NewViewController

对创建的Controller类进行以下更改:

  • 将Controller公开
  • ObjectViewController <DetailView,Department>类继承Controller,以仅在Department Detail Views中激活Controller。
  • 重写OnActivated方法,迭代所有详细信息视图的 WebCustomUserControlViewItems项,并订阅每个项的ControlCreated事件。
  • WebCustomUserControlViewItem.ControlCreated事件处理程序中,检查当前控件是否支持IDepartmentView接口,使用ViewCurrentObject的数据设置控件,并订阅IDepartmentView.TitleChanged事件。
  • IDepartmentView.TitleChanged事件处理程序中,将控件的数据传递给ViewCurrentObject属性。
  • OnActivated方法中,订阅CurrentObjectChanged事件。在事件处理程序中,将ViewCurrentObject传递给控件。
  • 重写OnDeactivated方法,并取消订阅WebCustomUserControlViewItem.ControlCreatedView.CurrentObjectChanged事件。
using System;
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Web.Editors;
using MainDemo.Module.BusinessObjects;
// ...
public class DepartmentViewController : ObjectViewController<DetailView, Department> {
    protected override void OnActivated() {
        base.OnActivated();
        foreach(WebCustomUserControlViewItem item in View.GetItems<WebCustomUserControlViewItem>()) {
            item.ControlCreated  = ViewItem_ControlCreated;
        }
        View.CurrentObjectChanged  = View_CurrentObjectChanged;
    }
    protected override void OnDeactivated() {
        foreach(WebCustomUserControlViewItem item in View.GetItems<WebCustomUserControlViewItem>()) {
            item.ControlCreated -= ViewItem_ControlCreated;
        }
        View.CurrentObjectChanged -= View_CurrentObjectChanged;
        base.OnDeactivated();
    }
    private void ViewItem_ControlCreated(object sender, EventArgs e) {
        IDepartmentView departmentView = ((WebCustomUserControlViewItem)sender).Control as IDepartmentView;
        if(departmentView != null) {
            departmentView.TitleChanged  = DepartmentView_TitleChanged;
            InitializeDepartmentView(departmentView);
        }
    }
    private void View_CurrentObjectChanged(object sender, EventArgs e) {
        foreach(WebCustomUserControlViewItem item in View.GetItems<WebCustomUserControlViewItem>()) {
            IDepartmentView departmentView = item.Control as IDepartmentView;
            if(departmentView != null) {
                InitializeDepartmentView(departmentView);
            }
        }
    }
    private void DepartmentView_TitleChanged(object sender, EventArgs e) {
        if(ViewCurrentObject != null) {
            ViewCurrentObject.Title = ((IDepartmentView)sender).Title;
        }
    }
    private void InitializeDepartmentView(IDepartmentView departmentView) {
        if(ViewCurrentObject != null) {
            departmentView.Title = ViewCurrentObject.Title;
            departmentView.Contacts = ViewCurrentObject.Contacts;
        }
        else {
            departmentView.Title = null;
            departmentView.Contacts = null;
        }
    }
}

创建一个Web窗体用户控件

在解决方案资源管理器中,右键单击ASP.NET应用程序项目,然后选择“添加” | “添加”。新建项目...以添加Web窗体用户控件

WebFormsUserControl

在设计器中,请执行以下操作:

  • 添加ASPxTextBox控件,将其ID属性设置为TitleControl,将Caption设置Title,将Width设置100%
  • 添加ASPxCardView控件,将其ID属性设置为ContactsControl,将其设置为在两列中显示联系人的全名和电子邮件。
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="DepartmentViewControl.ascx.cs" Inherits="MainDemo.Web.DepartmentViewControl" %>
<%@ Register Assembly="DevExpress.Web.v19.2, Version=19.2.7.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dx" %>

<dx:ASPxTextBox ID="TitleControl" runat="server" Caption="Title" Width="100%"></dx:ASPxTextBox>
<div style="height:5px"></div>
<dx:ASPxCardView ID="ContactsControl" runat="server" AutoGenerateColumns="false">
    <Columns>
        <dx:CardViewTextColumn Name="FullName" FieldName="FullName" Caption="Full Name" VisibleIndex="0"></dx:CardViewTextColumn>
        <dx:CardViewTextColumn Name="Email" FieldName="Email" Caption="Email" VisibleIndex="1"></dx:CardViewTextColumn>
    </Columns>
    <SettingsPager>
        <SettingsTableLayout ColumnCount="2" />
    </SettingsPager>
</dx:ASPxCardView>

在DepartmentViewControl中实现IDepartmentView接口

关闭设计器,右键单击DepartmentViewControl.ascx文件,选择查看代码,然后执行以下操作:

  • 实现MainDemo.Module.Web.IDepartmentView接口。

  • 定义以下字段:

    • isInitialized-确定是否调用控件的OnInit方法的标志;
    • _Title-存储标题字符串;
    • _Contacts-存储联系人集合。
  • 覆盖OnInit方法:

    • isInitialized标志设置为true
    • 使用初始化控制_title_Contacts
    • 订阅TitleControl.TextChanged事件。
  • 添加TitleChanged事件,并在TitleControl.TextChanged事件处理程序中引发它。

  • 添加标题属性:
    • 在属性getter中,返回_Title字段值。
    • 在属性设置器中,设置_Title字段值并更新TitleControl.Text值。
  • 添加联系人属性:
    • 在属性获取器中,返回_Contacts字段值
    • 在属性设置器中,设置_Contacts字段值,然后将新值传递给 ContactsControl.DataSource并调用ContactsControl.DataBind方法以应用更改。
using System;
using System.Collections.Generic;
using MainDemo.Module.BusinessObjects;
using MainDemo.Module.Web;

namespace MainDemo.Web {
    public partial class DepartmentViewControl : System.Web.UI.UserControl, IDepartmentView {
        private bool isInitialized;
        private string _Title;
        private ICollection<Contact> _Contacts;

        protected override void OnInit(EventArgs e) {
            isInitialized = true;
            UpdateTitleControl();
            UpdateContactsControl();
            TitleControl.TextChanged  = TitleControl_TextChanged;
            base.OnInit(e);
        }
        private void UpdateTitleControl() {
            if(!isInitialized) return;
            TitleControl.Text = Title;
        }
        private void UpdateContactsControl() {
            if(!isInitialized) return;
            ContactsControl.DataSource = Contacts;
            ContactsControl.DataBind();
        }
        private void TitleControl_TextChanged(object sender, EventArgs e) {
            _Title = TitleControl.Text;
            if(TitleChanged != null) {
                TitleChanged(this, EventArgs.Empty);
            }
        }
        public string Title {
            get { return _Title; }
            set {
                _Title = value;
                UpdateTitleControl();
            }
        }
        public ICollection<Contact> Contacts {
            get { return _Contacts; }
            set {
                _Contacts = value;
                UpdateContactsControl();
            }
        }
        public event EventHandler TitleChanged;
    }
}

将WebCustomUserControlViewItem视图项添加到视图

在ASP.NET应用程序项目中,双击Model.xafml文件以启动“模型编辑器”。右键单击“视图”节点,然后选择“添加” |“添加”。DetailView

DataBoundControlWeb2

Id属性设置为CustomDepartment_DetailView,并将ModelClass属性设置为Department

DataBoundControlWin5

用鼠标右键单击视图|。MainDemo.Module.BusinessObjects | CustomDepartment_DetailView | 项目节点,然后选择添加... | CustomUserControlViewItemWeb

DataBoundControlWeb3

Id属性设置为DepartmentViewItem,并将CustomControlPath属性设置为DepartmentViewControl.ascx(自定义Web窗体用户控件的文件名)。

DataBoundControlWeb4

结果,将WebCustomUserControlViewItem视图项添加到CustomDepartment_DetailView中

更改部门列表视图的默认详细信息视图

导航到视图| MainDemo.Module.BusinessObjects | Department_ListView节点。在DetailView下拉列表中,选择CustomDepartment_DetailView

DataBoundControlWeb5

运行ASP.NET应用程序,导航到“部门列表”视图并编辑任何部门。“详细信息视图”显示绑定到Department.Contacts集合的“文本框”和“卡片视图” (请参阅本主题开头的屏幕快照)。

相关文章

转载保留此链接,注明出处