[Full Course] | Employee Management System with .NET 8 Blazor Wasm & API - CRUD, Print, PDF etc..

Introduction

This tutorial will guide you through the process of building an Employee Management System using .NET 8 with Blazor WebAssembly and API. You will learn how to create a comprehensive application that includes CRUD operations, authentication, and more. This step-by-step guide synthesizes the key points from the video, ensuring you have all the information needed to successfully complete the project.

Step 1: Create the Project

• Start by creating a new .NET 8 Web API project.
• Add a Blazor WebAssembly project alongside it.
• Ensure to include any necessary libraries for your application.

Step 2: Install Required Packages

• Use NuGet Package Manager to install the following packages:
  • Entity Framework Core
  • JWT Bearer Authentication
  • Any other libraries specified in the video.
• Make sure all packages are compatible with .NET 8.

Step 3: Create Models and Classes

• Define the data models necessary for the application:
  • Employee
  • Department
  • Sanctions
  • Vacation
• Example of an Employee model:

  public class Employee
  {
      public int Id { get; set; }
      public string Name { get; set; }
      public string Position { get; set; }
      // Add other relevant properties
  }
  

Step 4: Set Up Database Context

• Create a database context class inheriting from DbContext.
• Define a connection string in your appsettings.json.
• Register the database context in Startup.cs:

  services.AddDbContext<YourDbContext>(options =>
      options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
  

Step 5: Add Migration

• Use the Package Manager Console to add a migration:

  Add-Migration InitialCreate
  

• Update the database with the command:

  Update-Database
  

Step 6: Create Repositories

• Define interfaces for your repositories (e.g., IEmployeeRepository).
• Implement these interfaces in concrete classes.
• Create controllers to handle authentication and other operations.

Step 7: Implement Refresh Token Mechanism

• Create logic for issuing refresh tokens during authentication.
• Store refresh tokens securely and implement expiration checks.

Step 8: Create API Service

• Develop a service to consume your API endpoints.
• Make use of HttpClient to call the necessary API routes.

Step 9: Set Up Authentication State Provider

• Create a custom authentication state provider for managing user authentication state.
• Register this service in your Program.cs.

Step 10: Configure CORS

• Set up Cross-Origin Resource Sharing (CORS) in Startup.cs to allow requests between the client and server:

  services.AddCors(options =>
  {
      options.AddPolicy("CorsPolicy", builder =>
          builder.AllowAnyOrigin()
          .AllowAnyMethod()
          .AllowAnyHeader());
  });
  

Step 11: Add Authentication to Routes

• Protect routes by requiring authentication.
• Implement route guards to restrict access based on user roles.

Step 12: Create Account Pages

• Develop Login and Register components in your Blazor app.
• Ensure these components consume the API service for authentication.

Step 13: Register JWT Authentication Service

• In your server project, register the JWT Authentication service in Startup.cs:

  services.AddAuthentication(options =>
  {
      options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
      options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
  })
  .AddJwtBearer(options =>
  {
      options.TokenValidationParameters = new TokenValidationParameters
      {
          ValidateIssuer = true,
          ValidateAudience = true,
          // Other validation parameters
      };
  });
  

Step 14: Create HTTP Handler for Tokens

• Implement a custom HTTP handler to automatically attach JWT tokens to requests.
• This ensures that all requests to secured endpoints are authenticated.

Step 15: Implement User Authentication Checks

• Create logic to check if a user is authenticated before navigating to certain pages.
• Conditionally render UI elements based on the user's authentication state.

Step 16: Build Employee Management Features

• Create components for managing Employees, Departments, and other entities.
• Implement CRUD operations using the generic repository pattern.

Conclusion

You have successfully set up an Employee Management System using .NET 8 with Blazor WebAssembly. This tutorial covered project creation, model setup, repository pattern, API consumption, and user authentication. For a deeper understanding, you may want to explore each step in more detail or refer to additional resources. Consider testing your application thoroughly and exploring advanced features such as reporting or user roles in your next steps.