All docs
V20.2
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

In-Depth XAF Blazor UI Tutorial (Main Demo)

  • 2 minutes to read

While we continue to extend the capabilities of XAF's Blazor UI, you can deliver intuitive user experiences for the Blazor platform today. This tutorial documents how to build an application to store contacts and other related objects using XAF's Blazor UI.

If you are new to XAF, be sure to review our XAF product page for important background information on our award-winning application framework.

Dependencies and Prerequisites

Before you start the tutorial, read this section and ensure that the following conditions are met:

  1. Visual Studio 2019 v16.8+ (with the ASP.NET and web development workload) is installed on your machine. You have basic experience of .NET framework development in this IDE.
  2. .NET 5.0 SDK is installed on your machine.
  3. A free 30-day trial version or a licensed version of DevExpress Universal Subscription is installed on your machine. If you are using a trial version, register at https://www.devexpress.com/blazor-registration first.
  4. You have basic knowledge of Object-relational mapping (ORM) concepts and the DevExpress XPO.
  5. Any RDBMS supported by the XPO ORM tool (see Database Systems Supported by XPO) is installed and accessible from your machine to store the application data (a LocalDB or SQL Server Express instance is recommended).
  6. You are familiar with XAF application architecture.

Tutorial Structure

This tutorial is organized in the following manner:

  • Business Model Design

    This section explains how to implement classes that define the foundation of your application's business model and its associated database structure.

  • Extend Functionality

    This section explains how to extend XAF's autogenerated UI with custom commands.

  • UI Customization

    This section explains how to customize XAF's autogenerated Blazor application UI.

Connection String

This tutorial uses Microsoft's SQL Server as its target database management system (DBMS). As you may already know, XAF supports multiple database management systems (see the list here). If you'd like to use a different DBMS, be sure to specify the appropriate connection string.

XAF apps create a database with a name that matches the name used for the solution itself. To change names, edit the connection string in the application configuration file (appsettings.json).

To recreate your database, drop it from the database server or remove the file. Your XAF application will recreate the database at next startup.

See Also