ASP.Net Core - Blazor Server App - Display Data

Screenshot from the tutorial

Displaying Data in ASP.NET Core Blazor Server Applications

In the world of web development, creating dynamic and interactive user interfaces is crucial. ASP.NET Core Blazor Server offers a robust framework that allows developers to build rich web applications using C# and .NET. In this tutorial, we’ll explore how to display data in a Blazor Server app, as demonstrated in the YouTube video titled "ASP.Net Core - Blazor Server App - Display Data."

What is Blazor Server?

Blazor Server is a part of the Blazor framework, which enables developers to build interactive web applications using C# instead of JavaScript. In a Blazor Server application, the components run on the server, and the UI updates are sent to the client via a SignalR connection. This model allows for a smooth and efficient development experience, leveraging the power of .NET on the server side.

Getting Started with Blazor Server

Prerequisites

Before diving into the tutorial, ensure you have the following prerequisites installed:

• .NET SDK (version 5.0 or later)
• Visual Studio 2019 or later (with the ASP.NET and web development workload)

Creating a Blazor Server Application

1. Open Visual Studio.
2. Create a New Project.
3. Choose Blazor App and click Next.
4. Provide a project name and location, then click Create.
5. Choose Blazor Server App and click Create.

Once the project is created, you will see a default Blazor Server application structure.

Displaying Data

Step 1: Create a Data Model

First, we need a data model that represents the information we want to display. For this example, let’s create a simple model for a Product.

namespace BlazorApp.Data
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
    }
}

Step 2: Create a Service to Provide Data

Next, we’ll create a service that will supply the Product data. This service will simulate fetching data from a database.

using System.Collections.Generic;

namespace BlazorApp.Data
{
    public class ProductService
    {
        public List<Product> GetProducts()
        {
            return new List<Product>
            {
                new Product { Id = 1, Name = "Laptop", Price = 999.99m },
                new Product { Id = 2, Name = "Smartphone", Price = 499.99m },
                new Product { Id = 3, Name = "Tablet", Price = 299.99m }
            };
        }
    }
}

Step 3: Register the Service

To make our ProductService available to the Blazor components, we need to register it in the Startup.cs file.

public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddServerSideBlazor();
    services.AddSingleton<ProductService>(); // Registering the ProductService
}

Step 4: Create a Component to Display Data

Now, let’s create a new Razor component that will display the list of products. Create a new file named ProductList.razor in the Pages directory.

@page "/products"
@inject ProductService ProductService

<h3>Product List</h3>

<ul>
    @foreach (var product in ProductService.GetProducts())
    {
        <li>@product.Name - @product.Price.ToString("C")</li>
    }
</ul>

Step 5: Add Navigation

Finally, we need to add a link to our ProductList component in the main navigation. Open the NavMenu.razor file and add the following link:

<NavLink class="nav-link" href="products">
    <span class="oi oi-list-rich" aria-hidden="true"></span> Products
</NavLink>

Running the Application

You can now run your Blazor application. Press F5 or click on the run button in Visual Studio. Navigate to the Products page using the navigation menu, and you should see a list of products displayed.

Conclusion

In this tutorial, we explored how to create a simple Blazor Server application that displays data using a data model, service, and Razor component. This foundational knowledge allows you to expand your Blazor applications further, integrating more complex data interactions and user interfaces.

Feel free to experiment with the code and extend the functionality by integrating data from a real database or adding features like editing or deleting products. Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios