ASP.Net Core - Blazor Server App - Display Details

Screenshot from the tutorial

Building a Blazor Server App to Display Details

In this blog post, we will explore how to create a Blazor Server application using ASP.NET Core to display details efficiently. Blazor is a modern web framework that allows developers to build interactive web applications using C# instead of JavaScript. This tutorial will guide you through the steps to set up a Blazor Server application that can display specific details about an entity in your application.

Prerequisites

Before we begin, ensure you have the following installed on your machine:

• .NET SDK (version 6.0 or later)
• Visual Studio 2022 or later (with ASP.NET and web development workload)
• Basic understanding of C# and web development concepts

Step 1: Creating a New Blazor Server Project

To start, we will create a new Blazor Server project using Visual Studio.

1. Open Visual Studio and select "Create a new project."
2. Search for "Blazor" in the project templates and select "Blazor Server App."
3. Click "Next."
4. Name your project (e.g., BlazorDetailsApp) and choose a location to save it.
5. Click "Create."
6. In the next dialog, ensure the target framework is set to .NET 6.0 and click "Create."

Your project will be created with a default structure, including a Pages folder where we will create our detail display page.

Step 2: Creating a Model

Next, we need a model to represent the details we want to display. For this example, let’s create a simple Product model.

1. Right-click on the project and add a new folder named Models.
2. Inside the Models folder, add a new class named Product.cs.

Here’s how the Product model might look:

namespace BlazorDetailsApp.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public decimal Price { get; set; }
    }
}

Step 3: Creating a Detail Display Page

Now that we have our model ready, let’s create a page to display the product details.

1. In the Pages folder, add a new Razor component named ProductDetail.razor.
2. Open ProductDetail.razor and add the following code:

@page "/product/{id:int}"
@inject NavigationManager NavigationManager

@code {
    [Parameter]
    public int Id { get; set; }

    private Product product;

    protected override async Task OnInitializedAsync()
    {
        // Simulating data retrieval.
        product = await GetProductDetails(Id);
    }

    private Task<Product> GetProductDetails(int id)
    {
        // Simulate fetching data (In a real app, you would fetch from a database)
        var products = new List<Product>
        {
            new Product { Id = 1, Name = "Product A", Description = "Description of Product A", Price = 29.99m },
            new Product { Id = 2, Name = "Product B", Description = "Description of Product B", Price = 39.99m },
            new Product { Id = 3, Name = "Product C", Description = "Description of Product C", Price = 49.99m }
        };

        return Task.FromResult(products.FirstOrDefault(p => p.Id == id));
    }
}

@if (product != null)
{
    <h3>@product.Name</h3>
    <p>@product.Description</p>
    <p>Price: @product.Price.ToString("C")</p>
}
else
{
    <p>Product not found.</p>
}

Explanation

• The @page directive specifies the route for this page, which includes a dynamic parameter id.
• The @inject NavigationManager allows us to navigate programmatically if needed.
• We define a Product object and retrieve it using the GetProductDetails method, which simulates fetching data.
• The UI displays the product's name, description, and price. If the product is not found, a message is shown.

Step 4: Navigating to the Detail Page

To navigate to the detail page, you can add links from another page (like the Index page).

For instance, in the Index.razor file, add the following code:

@page "/"

<h1>Product List</h1>

<ul>
    <li><NavLink href="/product/1">Product A</NavLink></li>
    <li><NavLink href="/product/2">Product B</NavLink></li>
    <li><NavLink href="/product/3">Product C</NavLink></li>
</ul>

Explanation

• The <NavLink> component is used to create links that navigate to the ProductDetail page using the product ID.

Step 5: Running the Application

Now that everything is set up, it’s time to run your application.

1. Press F5 to start debugging the application.
2. Navigate to the root URL (e.g., https://localhost:5001/).
3. Click on any product link to view the details.

Conclusion

In this tutorial, we created a simple Blazor Server application that displays product details. We walked through creating a model, building a detail page, and displaying product information dynamically based on the URL.

Blazor makes it easy to build interactive web applications with C# and offers a seamless experience for developers familiar with the .NET ecosystem. As you become more proficient in Blazor, consider exploring features like data binding, component libraries, and state management for more complex applications. 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