ASP.Net Core - Blazor Server App - Delete Data

Screenshot from the tutorial

Deleting Data in an ASP.NET Core Blazor Server App

In this blog post, we will walk through the process of deleting data in an ASP.NET Core Blazor Server application. Blazor Server allows developers to build interactive web applications using C# instead of JavaScript, making it an appealing choice for many .NET developers. We will focus on the essential steps needed to implement a delete functionality within a Blazor component.

Prerequisites

Before we begin, ensure you have the following:

• Basic understanding of C# and ASP.NET Core.
• Visual Studio or another suitable IDE installed.
• .NET SDK installed on your machine.
• An existing Blazor Server application. If you don't have one, you can create a new project using the command line:

dotnet new blazorserver -o MyBlazorApp

Setting Up the Project

Step 1: Create the Data Model

In a typical Blazor application, we often work with data models to represent our entities. For this tutorial, let's create a simple Product model. Navigate to the Models folder in your project and create a new class file named Product.cs:

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

Step 2: Setting Up the Data Service

Next, we need a service to manage our data operations. Create a folder named Services and add a new class called ProductService.cs. This service will handle the CRUD operations, including deletion.

using System.Collections.Generic;
using System.Linq;

namespace MyBlazorApp.Services
{
    public class ProductService
    {
        private List<Product> products = new List<Product>
        {
            new Product { Id = 1, Name = "Product 1", Price = 10.00m },
            new Product { Id = 2, Name = "Product 2", Price = 20.00m },
            new Product { Id = 3, Name = "Product 3", Price = 30.00m }
        };

        public List<Product> GetProducts() => products;

        public void DeleteProduct(int id)
        {
            var product = products.FirstOrDefault(p => p.Id == id);
            if (product != null)
            {
                products.Remove(product);
            }
        }
    }
}

Step 3: Register the Service

To make the ProductService available throughout the application, register it in the Startup.cs file:

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

Step 4: Create the Blazor Component

Now, let’s create a Blazor component to display the list of products and allow users to delete them. Create a new Razor component named ProductList.razor in the Pages folder:

@page "/products"
@inject ProductService ProductService

<h3>Product List</h3>

<table class="table">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Price</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var product in ProductService.GetProducts())
        {
            <tr>
                <td>@product.Id</td>
                <td>@product.Name</td>
                <td>@product.Price.ToString("C")</td>
                <td>
                    <button class="btn btn-danger" @onclick="@(() => DeleteProduct(product.Id))">Delete</button>
                </td>
            </tr>
        }
    </tbody>
</table>

@code {
    private void DeleteProduct(int id)
    {
        ProductService.DeleteProduct(id);
        // Optionally, add a message to indicate success or refresh the data
    }
}

Step 5: Testing the Application

Run your application, and navigate to the /products route. You should see a list of products, each with a delete button. Clicking the delete button should remove the corresponding product from the list.

Conclusion

In this tutorial, we explored how to implement a delete functionality in a Blazor Server application. We created a simple product model, set up a product service for data management, and built a component to display and delete products.

Blazor Server provides a powerful framework for developing interactive web applications with C#, and implementing CRUD operations is straightforward once you understand the basics. Feel free to expand upon this example by adding features such as confirmation dialogs or user notifications for a better user experience.

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