ASP.Net Core - Blazor Server App - Edit Data

Screenshot from the tutorial

Building a Blazor Server App to Edit Data

In this tutorial, we will explore how to create a simple Blazor Server application that allows users to edit data. Blazor Server is a powerful framework that enables you to build interactive web applications using C# instead of JavaScript. Whether you are a seasoned developer or a beginner, this guide will walk you through the essential steps to set up your application and implement editing functionality.

Prerequisites

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

• .NET SDK (version 6.0 or later)
• An IDE such as Visual Studio or Visual Studio Code

Creating a New Blazor Server Application

1. Open Visual Studio (or your chosen IDE).
2. Create a new project by selecting "Create a new project."
3. Choose the Blazor App template and click Next.
4. Name your project (e.g., BlazorEditData) and click Create.
5. Select Blazor Server App and click Create.

Setting Up the Data Model

To edit data, we first need a data model. In this example, we will create a simple Product class.

Create the Product Model

Add a new class called Product.cs in the Data folder:

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

Creating a Product Service

Next, we will create a service to manage our products. This service will allow us to retrieve and update product data.

Add a new class called ProductService.cs in the Data folder:

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

namespace BlazorEditData.Data
{
    public class ProductService
    {
        private List<Product> products = 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 }
        };

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

        public Product GetProductById(int id) => products.FirstOrDefault(p => p.Id == id);

        public void UpdateProduct(Product product)
        {
            var existingProduct = GetProductById(product.Id);
            if (existingProduct != null)
            {
                existingProduct.Name = product.Name;
                existingProduct.Price = product.Price;
            }
        }
    }
}

Registering the Product Service

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

Open Startup.cs and modify the ConfigureServices method:

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

Creating a Product Edit Component

Now we will create a component that allows users to edit product details.

Add a New Component

In the Pages folder, create a new Razor component called EditProduct.razor:

@page "/editproduct/{id:int}"
@inject ProductService ProductService

<h3>Edit Product</h3>

@if (product != null)
{
    <EditForm Model="product" OnValidSubmit="HandleValidSubmit">
        <DataAnnotationsValidator />
        <ValidationSummary />

        <div class="form-group">
            <label for="name">Name:</label>
            <InputText id="name" @bind-Value="product.Name" class="form-control" />
        </div>
        <div class="form-group">
            <label for="price">Price:</label>
            <InputNumber id="price" @bind-Value="product.Price" class="form-control" />
        </div>
        <button type="submit" class="btn btn-primary">Save</button>
    </EditForm>
}
else
{
    <p>Loading...</p>
}

@code {
    [Parameter]
    public int id { get; set; }
    
    private Product product;

    protected override void OnInitialized()
    {
        product = ProductService.GetProductById(id);
    }

    private void HandleValidSubmit()
    {
        ProductService.UpdateProduct(product);
        // Navigate back or show a success message
    }
}

Updating the Navigation Menu

To navigate to the edit page, update the navigation menu in Shared/NavMenu.razor:

<NavLink href="/editproduct/1" class="nav-link">
    Edit Product 1
</NavLink>

Running the Application

1. Build and run your application by pressing F5.
2. Navigate to the edit product page by clicking the link in the navigation menu.
3. Modify the product details and click "Save." You may implement navigation back or show a success message in the HandleValidSubmit method.

Conclusion

In this tutorial, we successfully built a Blazor Server application that allows users to edit product data. We created a product model, a service to manage products, and a component for editing product details. Blazor's component-based architecture and data binding features make it straightforward to create interactive applications.

Feel free to expand this application by adding more functionalities such as deleting products, adding a database connection, or implementing user authentication. 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