ASP.Net Core - Blazor Server App - Add Data

Screenshot from the tutorial

Creating a Blazor Server App in ASP.NET Core: Adding Data in 3 Minutes

Blazor Server is a powerful framework that allows developers to build interactive web applications using C# instead of JavaScript. In this blog post, we will walk through the steps to add data to a Blazor Server application quickly. Whether you are a seasoned developer or a newcomer to Blazor, this tutorial will provide you with a clear and concise guide to get started.

What is Blazor Server?

Blazor Server is one of the hosting models for Blazor, enabling developers to build rich web applications that run on the server. The UI updates are sent to the client over a SignalR connection, which allows for real-time interactivity without the need for a full page reload.

Prerequisites

Before diving into the specifics of adding data, ensure you have the following:

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

Setting Up Your Blazor Server Application

1. Create a New Blazor Server Project

   • Open Visual Studio and select "Create a new project."
   • Choose "Blazor App," and click "Next."
   • Name your project, select a location, and click "Create."
   • Select "Blazor Server App" and click "Create."

2. Run the Project

   • Press F5 to build and run your application. You should see the default template of the Blazor Server App in your browser.

Adding Data to the Blazor Server App

Now that we have our Blazor Server app set up, let’s add some sample data. We will create a simple data model and display it on a page.

Step 1: Create a Data Model

Create a new folder named Models in your project, and then add a new class called Product.cs:

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

Step 2: Create a Sample Data Service

Next, create a new folder named Services and add a class called ProductService.cs. This service will provide sample data:

using YourAppNamespace.Models;
using System.Collections.Generic;

namespace YourAppNamespace.Services
{
    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 in Startup.cs

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

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

Step 4: Create a Component to Display Data

Now, let’s create a new component to display the products. Create a new Razor component named ProductList.razor in the Pages folder:

@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: Update Navigation

To access the new product list, update the navigation in NavMenu.razor:

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

Running the Application

Now, it’s time to run your application again. Press F5, and navigate to /products in your browser. You should see a list of products displayed, showcasing how easy it is to add data to a Blazor Server application.

Conclusion

In this tutorial, we walked through the steps of creating a Blazor Server application and adding data to it in just a few minutes. You learned how to set up a data model, create a service for data retrieval, and display the data in a Razor component.

Blazor provides a robust and efficient way to build interactive web applications using C#. With its component-based architecture and server-side capabilities, you can create dynamic applications that offer a great user experience.

Feel free to expand upon this project by adding more features or connecting it to a database for more complex data management. 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