Add SQL Server support and image handling features

Migrated database from SQLite to SQL Server, adding support for binary image storage (`ImageData`) and base64-encoded image serialization (`ImageDataBase64`). Updated `Product` entity with timestamps (`CreatedDate`, `ModifiedDate`) and enhanced `OnModelCreating` for SQL Server-specific configurations.

Introduced new API endpoints for product image retrieval (`/api/Product/{id}/image`), product count, and debug information. Added support for uploading images via `PUT /api/Product/{id}/image`.

Enhanced Blazor frontend with responsive layouts, improved product grid design, and debug tools (`ProductsDebug.razor`). Updated `ProductService` to handle image URLs and API interactions.

Added database setup scripts (`Setup.sql`, `LoadImages.sql`) and a PowerShell script (`LoadImages.ps1`) for image loading. Updated `README.md` with setup instructions, troubleshooting tips, and architecture details.

Enabled CORS for Blazor frontend, configured static file serving, and initialized the database on startup. Improved maintainability, scalability, and user experience.

Author: ralphke

src/DataEntities/Product.cs

@@ -1,4 +1,5 @@
-using System.Text.Json.Serialization;
+using System.ComponentModel.DataAnnotations.Schema;
+using System.Text.Json.Serialization;
 
 namespace DataEntities;
 
@@ -18,6 +19,25 @@ public class Product
 
     [JsonPropertyName("imageUrl")]
     public string? ImageUrl { get; set; }
+
+    // Binary image data stored in database
+    [JsonIgnore]
+    public byte[]? ImageData { get; set; }
+
+    // Base64 encoded image for JSON serialization
+    [NotMapped]
+    [JsonPropertyName("imageDataBase64")]
+    public string? ImageDataBase64 
+    { 
+        get => ImageData != null ? Convert.ToBase64String(ImageData) : null;
+        set => ImageData = value != null ? Convert.FromBase64String(value) : null;
+    }
+
+    [JsonPropertyName("createdDate")]
+    public DateTime CreatedDate { get; set; }
+
+    [JsonPropertyName("modifiedDate")]
+    public DateTime ModifiedDate { get; set; }
 }
 
 

src/Products/Data/ProductDataContext.cs

@@ -6,49 +6,89 @@ namespace Products.Data;
 public class ProductDataContext : DbContext
 {
     public ProductDataContext(DbContextOptions<ProductDataContext> options)
-        : base(options)
+      : base(options)
     {
     }
 
     public DbSet<Product> Product { get; set; } = default!;
+
+    protected override void OnModelCreating(ModelBuilder modelBuilder)
+    {
+    base.OnModelCreating(modelBuilder);
+
+        // Configure Product entity for SQL Server
+ modelBuilder.Entity<Product>(entity =>
+  {
+            entity.ToTable("Products", "dbo");
+            entity.HasKey(e => e.Id);
+   entity.Property(e => e.Id).ValueGeneratedOnAdd();
+            entity.Property(e => e.Name).IsRequired().HasMaxLength(200);
+    entity.Property(e => e.Description).HasMaxLength(1000);
+       entity.Property(e => e.Price).HasColumnType("decimal(18,2)");
+      entity.Property(e => e.ImageUrl).HasMaxLength(500);
+            entity.Property(e => e.ImageData).HasColumnType("varbinary(max)");
+            entity.Property(e => e.CreatedDate).HasDefaultValueSql("GETUTCDATE()");
+          entity.Property(e => e.ModifiedDate).HasDefaultValueSql("GETUTCDATE()");
+
+    entity.HasIndex(e => e.Name).HasDatabaseName("IX_Products_Name");
+});
+    }
 }
 
 public static class Extensions
 {
-    public static void CreateDbIfNotExists(this IHost host)
+    public static async Task InitializeDatabaseAsync(this IHost host)
     {
         using var scope = host.Services.CreateScope();
-
         var services = scope.ServiceProvider;
         var context = services.GetRequiredService<ProductDataContext>();
-        context.Database.EnsureCreated();
-        DbInitializer.Initialize(context);
+        var logger = services.GetRequiredService<ILogger<ProductDataContext>>();
+
+        try
+        {
+   // Ensure database exists (for LocalDB)
+     await context.Database.EnsureCreatedAsync();
+ logger.LogInformation("Database connection successful.");
+
+     // Seed data if empty
+    if (!await context.Product.AnyAsync())
+    {
+     await DbInitializer.InitializeAsync(context, logger);
+        }
+     }
+        catch (Exception ex)
+        {
+     logger.LogError(ex, "An error occurred while initializing the database.");
+          throw;
+        }
     }
 }
 
-
 public static class DbInitializer
 {
-    public static void Initialize(ProductDataContext context)
+    public static async Task InitializeAsync(ProductDataContext context, ILogger logger)
     {
-        if (context.Product.Any())
-            return;
+        logger.LogInformation("Seeding initial product data...");
 
         var products = new List<Product>
-        {
-            new Product { Name = "Solar Powered Flashlight", Description = "A fantastic product for outdoor enthusiasts", Price = 19.99m, ImageUrl = "product1.png" },
-            new Product { Name = "Hiking Poles", Description = "Ideal for camping and hiking trips", Price = 24.99m, ImageUrl = "product2.png" },
-            new Product { Name = "Outdoor Rain Jacket", Description = "This product will keep you warm and dry in all weathers", Price = 49.99m, ImageUrl = "product3.png" },
-            new Product { Name = "Survival Kit", Description = "A must-have for any outdoor adventurer", Price = 99.99m, ImageUrl = "product4.png" },
-            new Product { Name = "Outdoor Backpack", Description = "This backpack is perfect for carrying all your outdoor essentials", Price = 39.99m, ImageUrl = "product5.png" },
-            new Product { Name = "Camping Cookware", Description = "This cookware set is ideal for cooking outdoors", Price = 29.99m, ImageUrl = "product6.png" },
-            new Product { Name = "Camping Stove", Description = "This stove is perfect for cooking outdoors", Price = 49.99m, ImageUrl = "product7.png" },
-            new Product { Name = "Camping Lantern", Description = "This lantern is perfect for lighting up your campsite", Price = 19.99m, ImageUrl = "product8.png" },
-            new Product {  Name = "Camping Tent", Description = "This tent is perfect for camping trips", Price = 99.99m, ImageUrl = "product9.png" },
+{
+            // Note: ImageUrl is set to null - images will be loaded into ImageData via LoadImages.ps1 script
+       // This enables Scenario 2: Database image serving via /api/Product/{id}/image
+  new Product { Name = "Solar Powered Flashlight", Description = "A fantastic product for outdoor enthusiasts", Price = 19.99m, ImageUrl = null, CreatedDate = DateTime.UtcNow, ModifiedDate = DateTime.UtcNow },
+            new Product { Name = "Hiking Poles", Description = "Ideal for camping and hiking trips", Price = 24.99m, ImageUrl = null, CreatedDate = DateTime.UtcNow, ModifiedDate = DateTime.UtcNow },
+     new Product { Name = "Outdoor Rain Jacket", Description = "This product will keep you warm and dry in all weathers", Price = 49.99m, ImageUrl = null, CreatedDate = DateTime.UtcNow, ModifiedDate = DateTime.UtcNow },
+    new Product { Name = "Survival Kit", Description = "A must-have for any outdoor adventurer", Price = 99.99m, ImageUrl = null, CreatedDate = DateTime.UtcNow, ModifiedDate = DateTime.UtcNow },
+new Product { Name = "Outdoor Backpack", Description = "This backpack is perfect for carrying all your outdoor essentials", Price = 39.99m, ImageUrl = null, CreatedDate = DateTime.UtcNow, ModifiedDate = DateTime.UtcNow },
+      new Product { Name = "Camping Cookware", Description = "This cookware set is ideal for cooking outdoors", Price = 29.99m, ImageUrl = null, CreatedDate = DateTime.UtcNow, ModifiedDate = DateTime.UtcNow },
+     new Product { Name = "Camping Stove", Description = "This stove is perfect for cooking outdoors", Price = 49.99m, ImageUrl = null, CreatedDate = DateTime.UtcNow, ModifiedDate = DateTime.UtcNow },
+     new Product { Name = "Camping Lantern", Description = "This lantern is perfect for lighting up your campsite", Price = 19.99m, ImageUrl = null, CreatedDate = DateTime.UtcNow, ModifiedDate = DateTime.UtcNow },
+  new Product { Name = "Camping Tent", Description = "This tent is perfect for camping trips", Price = 99.99m, ImageUrl = null, CreatedDate = DateTime.UtcNow, ModifiedDate = DateTime.UtcNow }
         };
 
-        context.AddRange(products);
+        context.Product.AddRange(products);
+   await context.SaveChangesAsync();
 
-        context.SaveChanges();
+        logger.LogInformation("Seeded {Count} products successfully.", products.Count);
+        logger.LogInformation("Run LoadImages.ps1 script to load images into ImageData column.");
     }
 }

src/Products/Endpoints/ProductEndpoints.cs

@@ -11,70 +11,154 @@ public static class ProductEndpoints
     public static void MapProductEndpoints(this IEndpointRouteBuilder routes)
     {
         var group = routes.MapGroup("/api/Product");
+      
         // Count all products currently in store
         group.MapGet("/count", async (ProductDataContext db) =>
         {
             var count = await db.Product.CountAsync();
-            return Results.Ok(count);
+      return Results.Ok(count);
         });
+   
         // GET all products
         group.MapGet("/", async (ProductDataContext db) =>
         {
-            return await db.Product.ToListAsync();
+        return await db.Product
+   .OrderBy(p => p.Id)
+        .ToListAsync();
         })
         .WithName("GetAllProducts")
-        .Produces<List<Product>>(StatusCodes.Status200OK);
+    .Produces<List<Product>>(StatusCodes.Status200OK);
 
         // GET product by ID
         group.MapGet("/{productId:int}", async (int productId, ProductDataContext db) =>
         {
-            var product = await db.Product.FindAsync(productId);
-            return product is not null ? Results.Ok(product) : Results.NotFound();
+  var product = await db.Product.FindAsync(productId);
+         return product is not null ? Results.Ok(product) : Results.NotFound();
         })
         .WithName("GetProductById")
-        .Produces<Product>(StatusCodes.Status200OK)
+     .Produces<Product>(StatusCodes.Status200OK)
+        .Produces(StatusCodes.Status404NotFound);
+
+  // GET product image as PNG
+        group.MapGet("/{productId:int}/image", async (int productId, ProductDataContext db) =>
+     {
+            var product = await db.Product.FindAsync(productId);
+   
+            if (product is null)
+         return Results.NotFound();
+
+    if (product.ImageData is null || product.ImageData.Length == 0)
+        return Results.NotFound(new { message = "No image data available" });
+
+    return Results.File(product.ImageData, "image/png");
+        })
+.WithName("GetProductImage")
+        .Produces(StatusCodes.Status200OK, contentType: "image/png")
         .Produces(StatusCodes.Status404NotFound);
 
-        // POST to create a new product
-        group.MapPost("/", async (Product product, ProductDataContext db) =>
+        // Debug endpoint: Check image configuration
+     group.MapGet("/debug/images", async (ProductDataContext db) =>
         {
+            var products = await db.Product
+  .Select(p => new
+             {
+        p.Id,
+        p.Name,
+p.ImageUrl,
+             HasImageData = p.ImageData != null && p.ImageData.Length > 0,
+        ImageDataSize = p.ImageData != null ? p.ImageData.Length : 0
+      })
+          .ToListAsync();
+
+            return Results.Ok(new
+       {
+  TotalProducts = products.Count,
+           ProductsWithImageUrl = products.Count(p => !string.IsNullOrEmpty(p.ImageUrl)),
+     ProductsWithImageData = products.Count(p => p.HasImageData),
+         Products = products
+        });
+     })
+        .WithName("DebugImages")
+        .Produces(StatusCodes.Status200OK);
+
+ // POST to create a new product
+    group.MapPost("/", async (Product product, ProductDataContext db) =>
+ {
+   product.CreatedDate = DateTime.UtcNow;
+    product.ModifiedDate = DateTime.UtcNow;
+  
             db.Product.Add(product);
             await db.SaveChangesAsync();
-            return Results.Created($"/api/Product/{product.Id}", product);
-        })
-        .WithName("CreateProduct")
-        .Produces<Product>(StatusCodes.Status201Created);
+ return Results.Created($"/api/Product/{product.Id}", product);
+  })
+ .WithName("CreateProduct")
+   .Produces<Product>(StatusCodes.Status201Created);
 
-        // PUT to update a product
+    // PUT to update a product
         group.MapPut("/{productId:int}", async (int productId, Product updatedProduct, ProductDataContext db) =>
         {
-            var product = await db.Product.FindAsync(productId);
-            if (product is null) return Results.NotFound();
+     var product = await db.Product.FindAsync(productId);
+       if (product is null) return Results.NotFound();
 
-            product.Name = updatedProduct.Name;
+     product.Name = updatedProduct.Name;
             product.Description = updatedProduct.Description;
-            product.Price = updatedProduct.Price;
-            product.ImageUrl = updatedProduct.ImageUrl;
+  product.Price = updatedProduct.Price;
+        product.ImageUrl = updatedProduct.ImageUrl;
+ 
+ // Update image data if provided
+   if (updatedProduct.ImageData != null)
+    {
+       product.ImageData = updatedProduct.ImageData;
+            }
+      
+     product.ModifiedDate = DateTime.UtcNow;
 
-            await db.SaveChangesAsync();
-            return Results.NoContent();
+          await db.SaveChangesAsync();
+     return Results.NoContent();
         })
-        .WithName("UpdateProduct")
+.WithName("UpdateProduct")
         .Produces(StatusCodes.Status204NoContent)
         .Produces(StatusCodes.Status404NotFound);
 
-        // DELETE to remove a product
-        group.MapDelete("/{productId:int}", async (int productId, ProductDataContext db) =>
+        // PUT to upload product image
+  group.MapPut("/{productId:int}/image", async (int productId, IFormFile file, ProductDataContext db) =>
         {
-            var product = await db.Product.FindAsync(productId);
+     var product = await db.Product.FindAsync(productId);
+  if (product is null) return Results.NotFound();
+
+    if (file.Length == 0)
+              return Results.BadRequest(new { message = "Empty file" });
+
+   // Validate file type
+            if (!file.ContentType.StartsWith("image/"))
+       return Results.BadRequest(new { message = "File must be an image" });
+
+   using var memoryStream = new MemoryStream();
+await file.CopyToAsync(memoryStream);
+      product.ImageData = memoryStream.ToArray();
+    product.ModifiedDate = DateTime.UtcNow;
+
+    await db.SaveChangesAsync();
+   return Results.NoContent();
+     })
+    .WithName("UploadProductImage")
+      .Produces(StatusCodes.Status204NoContent)
+        .Produces(StatusCodes.Status400BadRequest)
+        .Produces(StatusCodes.Status404NotFound)
+        .DisableAntiforgery();
+
+        // DELETE to remove a product
+   group.MapDelete("/{productId:int}", async (int productId, ProductDataContext db) =>
+     {
+   var product = await db.Product.FindAsync(productId);
             if (product is null) return Results.NotFound();
 
-            db.Product.Remove(product);
-            await db.SaveChangesAsync();
-            return Results.NoContent();
+         db.Product.Remove(product);
+      await db.SaveChangesAsync();
+   return Results.NoContent();
         })
         .WithName("DeleteProduct")
-        .Produces(StatusCodes.Status204NoContent)
+     .Produces(StatusCodes.Status204NoContent)
         .Produces(StatusCodes.Status404NotFound);
     }
 }

src/Products/Products.csproj

@@ -3,7 +3,7 @@
     <TargetFramework>net9.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
-    <InvariantGlobalization>true</InvariantGlobalization>
+    <InvariantGlobalization>false</InvariantGlobalization>
   </PropertyGroup>
   <ItemGroup>
     <None Remove="Database.db" />
@@ -13,8 +13,7 @@
   <ItemGroup>
     <PackageReference Include="System.Text.Json" Version="9.0.6" />
     <PackageReference Include="System.Formats.Asn1" Version="9.0.6" />
-    <PackageReference Include="Microsoft.EntityFrameworkCore.InMemory" Version="9.0.6" />
-    <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="9.0.6" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="9.0.6" />
     <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="9.0.6">
       <PrivateAssets>all</PrivateAssets>
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>

src/Products/Program.cs

@@ -6,8 +6,23 @@
 
 builder.AddServiceDefaults();
 
+// Configure SQL Server connection
+var connectionString = builder.Configuration.GetConnectionString("ProductsDb") 
+    ?? "Server=(localdb)\\MSSQLLocalDB;Database=TestDB;Integrated Security=true;TrustServerCertificate=True;";
+
 builder.Services.AddDbContext<ProductDataContext>(options =>
-    options.UseInMemoryDatabase("inmemproducts"));
+    options.UseSqlServer(connectionString));
+
+// Add CORS policy for Blazor Server frontend
+builder.Services.AddCors(options =>
+{
+    options.AddPolicy("AllowBlazorClient", policy =>
+    {
+        policy.AllowAnyOrigin()
+  .AllowAnyMethod()
+          .AllowAnyHeader();
+    });
+});
 
 // Add services to the container.
 var app = builder.Build();
@@ -17,11 +32,16 @@
 // Configure the HTTP request pipeline.
 app.UseHttpsRedirection();
 
-app.MapProductEndpoints();
+// Enable CORS before other middleware
+app.UseCors("AllowBlazorClient");
 
+// Static files must be configured before routing
 app.UseStaticFiles();
 
-app.CreateDbIfNotExists();
+app.MapProductEndpoints();
+
+// Initialize database and seed data if needed
+await app.InitializeDatabaseAsync();
 
 app.Run();