Post
Ask Question

Building a Data-Driven App with Blazor and Fluent UI

Introduction

Blazor is a powerful framework for building interactive web applications using C#. Combining it with Fluent UI, Microsoft’s user interface library, enables you to create sleek and responsive data-driven apps with minimal effort. In this article, we’ll explore how to build a Blazor app integrated with Fluent UI for a polished and consistent look while connecting to a data source for dynamic content.

Prerequisites

Before getting started, ensure you have,

  • Visual Studio 2022 or later installed.
  • .NET 7 SDK.
  • Basic knowledge of Blazor and C#.
  • Familiarity with Fluent UI components (optional but helpful).

Step 1. Setting Up the Blazor Project

Create a new Blazor Server or Blazor WebAssembly project in Visual Studio.

dotnet new blazorserver -n BlazorFluentApp

Navigate into the project.

cd BlazorFluentApp

Step 2. Adding Fluent UI to Your Project

Add the necessary NuGet packages to use Fluent UI components in your Blazor project. You can use BlazorFluentUI, a community library that integrates Fluent UI into Blazor.

Run the following command to add the package.

dotnet add package BlazorFluentUI

After the package is added, include the Fluent UI styles in your wwwroot/index.html (Blazor WASM) or Pages/_Host.cshtml (Blazor Server).

<link href="_content/BlazorFluentUI/css/bootstrap/bootstrap.min.css" rel="stylesheet" />

Step 3. Connecting to a Data Source

In most data-driven applications, you must connect to a database or API. For this tutorial, we’ll simulate a data source using a basic in-memory data service.

Create a new folder named Services and add a DataService.cs file.

public class DataService
{
    private List<Product> Products = new List<Product>
    {
        new Product { Id = 1, Name = "Laptop", Price = 1000 },
        new Product { Id = 2, Name = "Smartphone", Price = 700 },
        new Product { Id = 3, Name = "Tablet", Price = 400 }
    };

    public List<Product> GetProducts()
    {
        return Products;
    }
}

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}

Register this service in the Program.cs file.

builder.Services.AddSingleton<DataService>();

Step 4. Creating the UI with Fluent UI Components

Now that we have a data source, let’s create the UI. Navigate to the Pages folder and open Index.razor. Replace its content with.

@page "/"
@inject DataService DataService

<FluentUI.Card>
    <FluentUI.Stack>
        <h3>Product List</h3>
        <FluentUI.DetailsList Items="@products" />
    </FluentUI.Stack>
</FluentUI.Card>

@code {
    private List<Product> products;

    protected override void OnInitialized()
    {
        products = DataService.GetProducts();
    }
}

Here, we are using Fluent UI’s DetailsList component to display a table-like structure. The data is dynamically loaded from the DataService.

Step 5. Styling and Customization

You can customize the look and feel of the Fluent UI components by modifying properties like spacing, colors, and layouts. Fluent UI offers a rich set of customizable components that allow you to align your app with your brand guidelines or design preferences.

For example, to adjust the styling, you can use the FluentUI.Stack component’s properties.

<FluentUI.Stack Tokens="new StackTokens { ChildrenGap = 20 }">
    <!-- Components -->
</FluentUI.Stack>

Step 6. Testing and Running Your App

Run the application using.

dotnet run

Open your browser and navigate to https://localhost:5001. You’ll see a list of products displayed in a well-organized layout thanks to Fluent UI.

Conclusion

Building data-driven applications with Blazor and Fluent UI is a streamlined process. By leveraging Blazor’s component model and Fluent UI’s robust library, you can create professional, modern web applications with minimal effort. This combination gives you the flexibility to design scalable solutions that meet user expectations while maintaining consistent performance.


Similar Articles