[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Collapse]eXpressApp Framework
 [Expand]Getting Started
 [Expand]Design-Time Features
 [Collapse]Task-Based Help
  [Expand]Business Model Design
  [Expand]Application Model
    How to: Access Objects Selected in the Current View
    How to: Access Master Detail View and Nested List View Environment
    How to: Create and Show a Detail View of the Selected Object in a Popup Window
    How to: Customize Tabs Generation in a Mobile Detail View
    How to: Detect a Lookup List View in Code
    How to: Display a Detail View Directly in Edit Mode in ASP.NET and Mobile Applications
    How to: Display a List View as a Chart
    How to: Display a List View as a Pivot Grid Table and Chart
    How to: Display Several Views Side-by-Side
    How to: Hide Collection Properties in an Edit Mode Detail View for an ASP.NET Application
    How to: Implement a Singleton Business Object and Show its Detail View
    How to: Implement a View Item
    How to: Show a Custom Data-Bound Control in an XAF View (ASP.NET)
    How to: Show a Custom Data-Bound Control in an XAF View (WinForms)
  [Expand]List Editors
  [Expand]Property Editors
  [Expand]Scheduler and Notifications
  [Expand]Maps Module
  [Expand]Miscellaneous UI Customizations
  Frequently Asked Questions (FAQ)
 [Expand]API Reference
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

How to: Show a Custom Data-Bound Control in an XAF View (ASP.NET)

This article describes how you can use a custom control to view and edit data in an ASP.NET application's Detail View. The example in this article shows how to add ASPxTextBox and the ASPxCardView controls to the MainDemo application (%PUBLIC%\Documents\DevExpress Demos 19.1\Components\eXpressApp Framework\MainDemo). You can use a similar approach in your own application with any other web control.


A similar example for WinForms is available in the How to: Show a Custom Data-Bound Control in an XAF View (WinForms) topic.

Expanded Declare an Interface to Access a Web Forms User Control from a View Controller

In the Solution Explorer, right-click the ASP.NET module project and choose Add | New Item... to add the IDepartmentView interface.

Make this interface public and add the following members:

  • the Title string property specifying the ASPxTextBox control's text;
  • the Contacts collection property specifying the ASPxCardView control's data source;
  • the TitleChanged event which occurs when the ASPxTextBox control's text changes.

Expanded Create a View Controller to Manage the Web Forms User Control's Data

In the Solution Explorer, right-click the the ASP.NET module project's Controllers folder and choose Add | New Item... to add the DepartmentViewController class.

Do the following changes with the created Controller class:

  • Make the Controller public.
  • Inherit the Controller from the ObjectViewController<DetailView, Department> (see ObjectViewController<ViewType, ObjectType>) class to activate the Controller in Department Detail Views only.
  • Override the OnActivated method, iterate all Detail View's WebCustomUserControlViewItems (see WebCustomUserControlViewItem) items, and subscribe to each item's ControlCreated (see ViewItem.ControlCreated) event.
  • In the WebCustomUserControlViewItem.ControlCreated event handler, check if the current control supports the IDepartmentView interface, setup the control with the ViewCurrentObject's (see ObjectViewController<ViewType, ObjectType>.ViewCurrentObject) data and subscribe to the IDepartmentView.TitleChanged event.
  • In the IDepartmentView.TitleChanged event handler, pass the control's data to the ViewCurrentObject property.
  • In the OnActivated method, subscribe to the View.CurrentObjectChanged event. In the event handler, pass the ViewCurrentObject to the control.
  • Override the OnDeactivated method and unsubscribe from the WebCustomUserControlViewItem.ControlCreated and View.CurrentObjectChanged events.

Expanded Create a Web Forms User Control

In the Solution Explorer, right-click the ASP.NET application project and choose the Add | New Item... to add the Web Forms User Control.

In the designer, do the following:

  • Add the ASPxTextBox control, set its ID property to TitleControl, Caption to Title and Width to 100%;
  • Add the ASPxCardView control, set its ID property to ContactsControl, set it up to show the Contact's FullName and Email in two columns.

Expanded Implement the IDepartmentView Interface in the DepartmentViewControl

Close the designer, right-click the DepartmentViewControl.ascx file, choose View Code, and do the following:

  • Implement the MainDemo.Module.Web.IDepartmentView interface.

  • Define the following fields:

    • isInitialized - a flag to determine if the control's OnInit method is called;
    • _Title - stores the title string;
    • _Contacts - stores the contacts collection.
  • Override the OnInit method:

    • set the isInitialized flag to true,
    • initialize controls using _Title and _Contacts values,
    • subscribe to the TitleControl.TextChanged event.
  • Add the TitleChanged event and raise it in the TitleControl.TextChanged event handler.

  • Add the Title property:
    • in the property getter, return the _Title field value.
    • in the property setter, set the _Title field value and update the TitleControl.Text value.
  • Add the Contacts property:
    • in the property getter, return the _Contacts field value
    • in the property setter, set the _Contacts field value pass the new value to ContactsControl.DataSource and call the ContactsControl.DataBind method to apply changes.

Expanded Add a WebCustomUserControlViewItem View Item to a View

In the ASP.NET application project, double-click the Model.xafml file to start the Model Editor. Right-click the Views node and choose Add | DetailView.

Set the Id property to CustomDepartment_DetailView and the ModelClass property to Department.

Right-click the Views | MainDemo.Module.BusinessObjects | CustomDepartment_DetailView | Items node and choose Add... | CustomUserControlViewItemWeb.

Set the Id property to DepartmentViewItem, and the IModelCustomUserControlViewItemWeb.CustomControlPath property to DepartmentViewControl.ascx (the file name of the custom Web Forms User Control).

As a result, the WebCustomUserControlViewItem View Item is added to CustomDepartment_DetailView.

Expanded Change the Default Detail View for the Department List View

Navigate to the Views | MainDemo.Module.BusinessObjects | Department_ListView node. In the IModelListView.DetailView drop-down list, select CustomDepartment_DetailView.

Run the ASP.NET application, navigate to the Department List View and edit any Department. The Detail View displays the Text Box and Card View bound to the Department.Contacts collection (see the screenshot in the beginning of this topic).

Expanded See Also

Is this topic helpful?​​​​​​​