Ways to Display a View
- 6 minutes to read
Users typically open Views when they click menu items. This topic lists ways to create and display a View.
Display a View from the Navigation Control
The navigation control visualizes the navigation system. It lists available Views and permits users to activate a View. The navigation structure defines the order and hierarchy of these Views.
Add a View to the Navigation Control in Code
To add a List View to navigation, apply the DefaultClassOptionsAttribute to the business class. XAF adds a navigation item to the Default group.
[DefaultClassOptions]
public class Contact {
//...
}
You can also use the NavigationItemAttribute attribute. Use this attribute to specify a navigation group. The DefaultClassOptions attribute always adds an item to the Default group.
[NavigationItem("Management")]
public class TestPerson : BaseObject {
//...
}
Use DefaultClassOptions and NavigationItem attributes only to display List Views. The next section explains how to display other View types.
Add a View to the Navigation Control in the Designer
Use the Model Editor to add a List View, Detail View, or Dashboard View to navigation. The NavigationItems node defines a tree structure with IModelNavigationItem child nodes. Create a NavigationItem node in the hierarchy and set the IModelNavigationItem.View property to the target List View. Users can open this View from navigation.
To display a Detail View from navigation, also set the IModelNavigationItem.ObjectKey property.
For a complete example, see the following tutorial: Add an Item to the Navigation Control.
Display a View Using an Action
Display a specific View when a user clicks a custom Action. The navigation system also uses actions (see ShowNavigationItemController.ShowNavigationItemAction). When users open a View from navigation, XAF creates the View automatically. When you use a custom Action, use one of the following methods to create a View:
- XafApplication.CreateListView creates a ListView.
- XafApplication.CreateDetailView creates a DetailView.
- XafApplication.CreateDashboardView creates a DashboardView.
You can display a View before and after an Action executes. For example, display a View to collect user input (before an Action) or display result data (after an Action).
Display a View Before an Action Executes
To display a View before an Action executes, use the PopupWindowShowAction Action. This Action first raises the PopupWindowShowAction.CustomizePopupWindowParams event. It then displays a pop-up window. When the user clicks OK, the Action raises the PopupWindowShowAction.Execute event.
Handle the CustomizePopupWindowParams event to create and configure the View.
private void popupWindowShowAction1_CustomizePopupWindowParams(
object sender, CustomizePopupWindowParamsEventArgs e) {
e.View = Application.CreateListView(typeof(Note), true);
}
For a complete List View example, refer to the following help topic: Add an Action that Displays a Pop-Up Window. For a Detail View example, refer to the How to: Create and Show a Detail View of the Selected Object in a Popup Window help topic.
Display a View After an Action Executes
Use one of the following Action types:
Handle the Action’s Execute event. Access ActionBaseEventArgs.ShowViewParameters and assign the View to ShowViewParameters.CreatedView.
private void simpleAction1_Execute(object sender, SimpleActionExecuteEventArgs e) {
IObjectSpace objectSpace = Application.CreateObjectSpace(typeof(Person));
e.ShowViewParameters.CreatedView = Application.CreateListView(objectSpace, typeof(Person), true);
}
The ShowViewParameters object allows you to configure View parameters. For instance, you can set the target window type, template type, and associated Controllers. You can specify a pop-up window for the View that you assign to ShowViewParameters.CreatedView. See the ShowViewParameters class description for more information.
To display a text notification upon Action execution, call the ShowViewStrategyBase.ShowMessage method.
Note
PopupWindowShowAction also passes ShowViewParameters.CreatedView to its Execute event handler. XAF shows a View that you assign to this property when the user executes the DialogOK Action in the pop-up window.
For more information about these Actions, see the following topics:
Display a View from a Custom Context
Use an Action to display a View whenever possible. XAF recommends this approach. In rare cases, you may need to display a View that has no associated Action.
Create a View with one of the following methods:
Next, pass the View to one of these methods:
- Frame.SetView — Shows the View in the current Frame.
- ShowViewStrategyBase.ShowViewInPopupWindow — Shows the View in a pop-up dialog. The dialog includes OK and Cancel buttons.
- ShowViewStrategyBase.ShowViewFromCommonView — Shows the View when a user clicks a navigation item or a List View row. In SDI mode, XAF shows the View in the same Frame. Otherwise, XAF opens a new tab or window.
Open a View from JavaScript in a Native Web Browser Tab (Blazor)
You can use the JavaScript Window.open method to open a View in a native web browser tab or window (not as a part of XAF’s Tabbed MDI). Use the IJSRuntime service to invoke JavaScript functions from your C# code.
using Microsoft.JSInterop;
// ...
var jsRuntime = ((BlazorApplication)Application).ServiceProvider.GetRequiredService<IJSRuntime>();
jsRuntime.InvokeAsync<object>("open", System.Threading.CancellationToken.None, url, "_blank");
Important
Use the methods in the previous section whenever possible. We highly recommend these methods when working with XAF functionality. Use this advanced IJSRuntime interop technique only when you cannot use a built-in Action or other standard XAF APIs. For another Blazor example, see the following topic: Open a Detail View When the Grid Row is Clicked in the Dashboard (Blazor). You can also use the same IJSRuntime API to open non-XAF web pages and windows.
The following example opens a Detail View in a new tab when a user clicks Open In New Tab in a List View. The OpenDetailViewInNewTabController class defines a SimpleAction. The action opens the Detail View for the selected Employee object in a new browser tab.
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Actions;
using DevExpress.ExpressApp.Blazor;
using Microsoft.JSInterop;
public class OpenDetailViewInNewTabController : ObjectViewController<ObjectView, Employee> {
public OpenDetailViewInNewTabController() {
SimpleAction action = new SimpleAction(this, "OpenInNewTab", "View");
action.SelectionDependencyType = SelectionDependencyType.RequireSingleObject;
action.Execute += Action_Execute;
}
private async void Action_Execute(object sender, SimpleActionExecuteEventArgs e) {
var jsRuntime = ((BlazorApplication)Application).ServiceProvider.GetRequiredService<IJSRuntime>();
string viewId = Application.FindDetailViewId(e.CurrentObject, View);
string key = ObjectSpace.GetKeyValueAsString(e.CurrentObject);
await jsRuntime.InvokeVoidAsync("open", System.Threading.CancellationToken.None, $"{viewId}/{key}", "_blank");
}
}
Non-Persistent View Specifics
Use the same techniques for Views of non-persistent objects. Supply data for these Views before you display them. See the following topics for examples:
- How to: Display a List of Non-Persistent Objects with an Intermediate Container Class and Its Detail View
- How to: Display a Non-Persistent Object's Detail View
- How to: Display a Non-Persistent Object's List View from the Navigation
Show a Custom Non-XAF Form
Design a custom form or user control in Visual Studio. Add it to your XAF application. Create a Controller and display the form in an Action Execute event.
For more information, see the following topics:
- How to: Show a Custom Windows Form (WinForms)
- How to: Show a Custom Window with an Embedded XAF View (WinForms)
- How to: Show a Custom Data-Bound Control in an XAF View (WinForms)
- How to: Include a Custom UI Control That Is Not Integrated by Default (WinForms and ASP.NET Core Blazor)
- Ways to Show a Confirmation Dialog