Adding & Using Best Practices

Author: patrickgod

BlazorEcommerce/Client/Program.cs

@@ -1,3 +1,6 @@
+global using BlazorEcommerce.Shared;
+global using System.Net.Http.Json;
+global using BlazorEcommerce.Client.Services.ProductService;
 using BlazorEcommerce.Client;
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
@@ -7,5 +10,6 @@
 builder.RootComponents.Add<HeadOutlet>("head::after");
 
 builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+builder.Services.AddScoped<IProductService, ProductService>();
 
 await builder.Build().RunAsync();

BlazorEcommerce/Client/Services/ProductService/IProductService.cs

@@ -0,0 +1,8 @@
+namespace BlazorEcommerce.Client.Services.ProductService
+{
+    public interface IProductService
+    {
+        List<Product> Products { get; set; }
+        Task GetProducts();
+    }
+}

BlazorEcommerce/Client/Services/ProductService/ProductService.cs

@@ -0,0 +1,22 @@
+namespace BlazorEcommerce.Client.Services.ProductService
+{
+    public class ProductService : IProductService
+    {
+        private readonly HttpClient _http;
+
+        public ProductService(HttpClient http)
+        {
+            _http = http;
+        }
+
+        public List<Product> Products { get; set; } = new List<Product>();
+
+        public async Task GetProducts()
+        {
+            var result =
+                await _http.GetFromJsonAsync<ServiceResponse<List<Product>>>("api/product");
+            if (result != null && result.Data != null)
+                Products = result.Data;
+        }
+    }
+}

BlazorEcommerce/Client/Shared/ProductList.razor

@@ -1,34 +1,37 @@
-@inject HttpClient Http
+@inject IProductService ProductService
 
-<ul class="list-unstyled">
-    @foreach (var product in Products)
-    {
-        <li class="media my-3">
-            <div class="media-img-wrapper mr-2">
-                <a href="#">
-                    <img class="media-img" src="@product.ImageUrl" alt="@product.Title" />
-                </a>
-            </div>
-            <div class="media-body">
-                <a href="#">
-                    <h4 class="mb-0">@product.Title</h4>
-                </a>
-                <p>@product.Description</p>
-                <h5 class="price">
-                    $@product.Price
-                </h5>
-            </div>
-        </li>
-    }
-</ul>
+@if (ProductService.Products == null || ProductService.Products.Count == 0)
+{
+    <span>Loading Products...</span>
+}
+else
+{
+    <ul class="list-unstyled">
+        @foreach (var product in ProductService.Products)
+        {
+            <li class="media my-3">
+                <div class="media-img-wrapper mr-2">
+                    <a href="#">
+                        <img class="media-img" src="@product.ImageUrl" alt="@product.Title" />
+                    </a>
+                </div>
+                <div class="media-body">
+                    <a href="#">
+                        <h4 class="mb-0">@product.Title</h4>
+                    </a>
+                    <p>@product.Description</p>
+                    <h5 class="price">
+                        $@product.Price
+                    </h5>
+                </div>
+            </li>
+        }
+    </ul>
+}
 
 @code {
-    private static List<Product> Products = new List<Product>();
-
     protected override async Task OnInitializedAsync()
     {
-        var result = await Http.GetFromJsonAsync<List<Product>>("api/Product");
-        if (result != null)
-            Products = result;
+        await ProductService.GetProducts();
     }
 }

BlazorEcommerce/Client/_Imports.razor

@@ -9,3 +9,4 @@
 @using BlazorEcommerce.Client
 @using BlazorEcommerce.Client.Shared
 @using BlazorEcommerce.Shared
+@using BlazorEcommerce.Client.Services.ProductService

BlazorEcommerce/Server/Controllers/ProductController.cs

@@ -7,18 +7,18 @@ namespace BlazorEcommerce.Server.Controllers
     [ApiController]
     public class ProductController : ControllerBase
     {
-        private readonly DataContext _context;
+        private readonly IProductService _productService;
 
-        public ProductController(DataContext context)
+        public ProductController(IProductService productService)
         {
-            _context = context;
+            _productService = productService;
         }
 
         [HttpGet]
-        public async Task<ActionResult<List<Product>>> GetProduct()
+        public async Task<ActionResult<ServiceResponse<List<Product>>>> GetProducts()
         {
-            var products = await _context.Products.ToListAsync();
-            return Ok(products);
+            var result = await _productService.GetProductsAsync();
+            return Ok(result);
         }
     }
 }

BlazorEcommerce/Server/Program.cs

@@ -1,6 +1,7 @@
 global using BlazorEcommerce.Shared;
 global using Microsoft.EntityFrameworkCore;
 global using BlazorEcommerce.Server.Data;
+global using BlazorEcommerce.Server.Services.ProductService;
 using Microsoft.AspNetCore.ResponseCompression;
 
 var builder = WebApplication.CreateBuilder(args);
@@ -17,6 +18,8 @@
 builder.Services.AddEndpointsApiExplorer();
 builder.Services.AddSwaggerGen();
 
+builder.Services.AddScoped<IProductService, ProductService>();
+
 var app = builder.Build();
 
 app.UseSwaggerUI();

BlazorEcommerce/Server/Services/ProductService/IProductService.cs

@@ -0,0 +1,7 @@
+namespace BlazorEcommerce.Server.Services.ProductService
+{
+    public interface IProductService
+    {
+        Task<ServiceResponse<List<Product>>> GetProductsAsync();
+    }
+}

BlazorEcommerce/Server/Services/ProductService/ProductService.cs

@@ -0,0 +1,22 @@
+namespace BlazorEcommerce.Server.Services.ProductService
+{
+    public class ProductService : IProductService
+    {
+        private readonly DataContext _context;
+
+        public ProductService(DataContext context)
+        {
+            _context = context;
+        }
+
+        public async Task<ServiceResponse<List<Product>>> GetProductsAsync()
+        {
+            var response = new ServiceResponse<List<Product>>
+            {
+                Data = await _context.Products.ToListAsync()
+            };
+
+            return response;
+        }
+    }
+}

BlazorEcommerce/Shared/ServiceResponse.cs

@@ -0,0 +1,15 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace BlazorEcommerce.Shared
+{
+    public class ServiceResponse<T>
+    {
+        public T? Data { get; set; }
+        public bool Success { get; set; } = true;
+        public string Message { get; set; } = string.Empty;
+    }
+}