Skip to main content
BuyLog In
XAF: Cross-Platform .NET App UI & Web API
Search in…
Docs > Getting Started > In-Depth XAF ASP.NET Core Blazor UI Tutorial (Main Demo)
A newer version of this page is available. .
All docs
V21.2
.NET Framework 4.5.2+
Cross-Platform .NET App UI (XAF)
Getting Started
Basic WinForms & Web Forms Tutorial (Simple Project Manager Demo)
In-Depth XAF WinForms & Web Forms Tutorial (Main Demo)
Basic ASP.NET Core Blazor Tutorial (Simple Project Manager Demo)
In-Depth XAF ASP.NET Core Blazor UI Tutorial (Main Demo)
Business Model Design
Extend Functionality
UI Customization
Additional Modules
Installation, Upgrade, Version History
Application Shell and Base Infrastructure
Storage, ORM, and Business Model Design
Data Manipulation and Business Logic
User Interface and Behavior Customization
Data Filtering
Data Security and Safety
Backend Web API Service (CTP)
Validation (Prevent Data Errors)
Conditional Appearance (Manage State of UI Elements)
Reporting (Shape, Export & Print Data)
Analytics (Extract Data Insights)
Document Management
Business Process Management
Event Planning
Localization
Debugging, Testing and Error Handling
Deployment
Support, QA & Troubleshooting
API Reference
Download CHM

In-Depth XAF ASP.NET Core Blazor UI Tutorial (Main Demo)

  • 2 minutes to read

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

blazor tutorial main demo application

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.
  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 ASP.NET Core 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.

Start Tutorial

Business Model Design

See Also