ASP.Net Core - Blazor Server App - Setup and Database

Screenshot from the tutorial

ASP.NET Core - Blazor Server App: Setup and Database in 5 Minutes

Blazor is a framework for building interactive web applications using C# instead of JavaScript. In this blog post, we’ll walk through the process of setting up a Blazor Server application and configuring a database, all within a concise timeframe. Let's dive in!

What is Blazor Server?

Blazor Server is a hosting model for Blazor applications where the application's components are executed on the server. The UI updates are sent to the client over a SignalR connection. This model allows developers to leverage C# for both client and server-side code, streamlining the development process.

Prerequisites

Before we begin, ensure you have the following installed:

• Visual Studio 2022 or later (with ASP.NET and web development workload)
• .NET SDK (version 5.0 or later)
• SQL Server or any compatible database system (like SQL Server Express)

Step 1: Create a New Blazor Server Application

1. Open Visual Studio: Launch Visual Studio.
2. Create a New Project:
   • Click on "Create a new project."
   • Select "Blazor App" and click "Next."
3. Configure Your New Project:
   • Name your project (e.g., BlazorServerDemo).
   • Choose a suitable location and click "Create."
4. Select the Blazor Server App Template:
   • Choose the "Blazor Server App" template and click "Create."

Step 2: Set Up the Database

2.1 Install Entity Framework Core

Entity Framework (EF) Core is a popular Object-Relational Mapper (ORM) that simplifies database interactions. To install it, follow these steps:

1. Open the NuGet Package Manager:
   • Right-click on your project in Solution Explorer and select "Manage NuGet Packages."
2. Install the Required Packages:
   • Search for Microsoft.EntityFrameworkCore.SqlServer and Microsoft.EntityFrameworkCore.Tools and install them.

2.2 Create the Data Model

Create a new folder named Models in your project. Inside the Models folder, create a class named Product.cs.

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

2.3 Create the Database Context

Next, we need to create a context class that will manage the entity framework operations. Create a new folder named Data and inside it, create a class named ApplicationDbContext.cs.

using Microsoft.EntityFrameworkCore;
using BlazorServerDemo.Models;

namespace BlazorServerDemo.Data
{
    public class ApplicationDbContext : DbContext
    {
        public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options) : base(options) { }

        public DbSet<Product> Products { get; set; }
    }
}

Step 3: Configure the Database Connection

Navigate to the appsettings.json file in your project and add a connection string for your database.

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=BlazorServerDemo;Trusted_Connection=True;"
  },
  ...
}

Step 3.1: Register the Database Context

Open the Startup.cs file and register the ApplicationDbContext in the ConfigureServices method.

using BlazorServerDemo.Data;
using Microsoft.EntityFrameworkCore;

public void ConfigureServices(IServiceCollection services)
{
    services.AddDbContext<ApplicationDbContext>(options =>
        options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));

    services.AddRazorPages();
    services.AddServerSideBlazor();
}

Step 4: Create the Database

To create the database, use Entity Framework Core migrations. Open the Package Manager Console:

1. Add a Migration:

   Add-Migration InitialCreate
   

2. Update the Database:

   Update-Database
   

This will create the database with the Products table according to the model we defined.

Step 5: Run the Application

Now that everything is set up, run your application:

1. Press F5 or click on the "Start" button in Visual Studio.
2. Navigate to https://localhost:5001 (or the port specified) in your web browser.

You should see the default Blazor Server application running. You can now extend this basic setup by creating pages to interact with your Product entities.

Conclusion

In a matter of minutes, we set up a Blazor Server application and configured it to use a SQL Server database via Entity Framework Core. This setup provides a solid foundation for building interactive and data-driven web applications using C#. Feel free to enhance this application by adding CRUD functionalities or other features that suit your project needs!

If you have any questions or would like to share your progress, please leave a comment below! 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