](https://dotnet.microsoft.com/learn/web/aspnet-architecture)
The **eShopOnWeb** sample is related to the [eShopOnContainers](https://github.com/dotnet/eShopOnContainers) sample application which, in that case, focuses on a microservices/containers-based application architecture. However, **eShopOnWeb** is much simpler in regards to its current functionality and focuses on traditional Web Application Development with a single deployment.
The goal for this sample is to demonstrate some of the principles and patterns described in the [eBook](https://aka.ms/webappebook). It is not meant to be an eCommerce reference application, and as such it does not implement many features that would be obvious and/or essential to a real eCommerce application.
> ### VERSIONS
> #### The `main` branch is currently running ASP.NET Core 8.0.
> #### Older versions are tagged.
## Topics (eBook TOC)
- Introduction
- Characteristics of Modern Web Applications
- Choosing Between Traditional Web Apps and SPAs
- Architectural Principles
- Common Web Application Architectures
- Common Client Side Technologies
- Developing ASP.NET Core MVC Apps
- Working with Data in ASP.NET Core Apps
- Testing ASP.NET Core MVC Apps
- Development Process for Azure-Hosted ASP.NET Core Apps
- Azure Hosting Recommendations for ASP.NET Core Web Apps
## Running the sample using Azd template
The store's home page should look like this:
The Azure Developer CLI (`azd`) is a developer-centric command-line interface (CLI) tool for creating Azure applications.
You need to install it before running and deploying with Azure Developer CLI.
### Windows
```powershell
powershell -ex AllSigned -c "Invoke-RestMethod 'https://aka.ms/install-azd.ps1' | Invoke-Expression"
```
### Linux/MacOS
```
curl -fsSL https://aka.ms/install-azd.sh | bash
```
And you can also install with package managers, like winget, choco, and brew. For more details, you can follow the documentation: https://aka.ms/azure-dev/install.
After logging in with the following command, you will be able to use the azd cli to quickly provision and deploy the application.
```
azd auth login
```
Then, execute the `azd init` command to initialize the environment.
```
azd init -t dotnet-architecture/eShopOnWeb
```
Run `azd up` to provision all the resources to Azure and deploy the code to those resources.
```
azd up
```
According to the prompt, enter an `env name`, and select `subscription` and `location`, these are the necessary parameters when you create resources. Wait a moment for the resource deployment to complete, click the web endpoint and you will see the home page.
**Notes:**
1. Considering security, we store its related data (id, password) in the **Azure Key Vault** when we create the database, and obtain it from the Key Vault when we use it. This is different from directly deploying applications locally.
2. The resource group name created in azure portal will be **rg-{env name}**.
You can also run the sample directly locally (See below).
## Running the sample locally
Most of the site's functionality works with just the web application running. However, the site's Admin page relies on Blazor WebAssembly running in the browser, and it must communicate with the server using the site's PublicApi web application. You'll need to also run this project. You can configure Visual Studio to start multiple projects, or just go to the PublicApi folder in a terminal window and run `dotnet run` from there. After that from the Web folder you should run `dotnet run --launch-profile Web`. Now you should be able to browse to `https://localhost:5001/`. The admin part in Blazor is accessible to `https://localhost:5001/admin`
Note that if you use this approach, you'll need to stop the application manually in order to build the solution (otherwise you'll get file locking errors).
After cloning or downloading the sample you must setup your database.
To use the sample with a persistent database, you will need to run its Entity Framework Core migrations before you will be able to run the app.
You can also run the samples in Docker (see below).
### Configuring the sample to use SQL Server
1. By default, the project uses a real database. If you want an in memory database, you can add in the `appsettings.json` file in the Web folder
```json
{
"UseOnlyInMemoryDatabase": true
}
```
1. Ensure your connection strings in `appsettings.json` point to a local SQL Server instance.
1. Ensure the tool EF was already installed. You can find some help [here](https://docs.microsoft.com/ef/core/miscellaneous/cli/dotnet)
```
dotnet tool update --global dotnet-ef
```
1. Open a command prompt in the Web folder and execute the following commands:
```
dotnet restore
dotnet tool restore
dotnet ef database update -c catalogcontext -p ../Infrastructure/Infrastructure.csproj -s Web.csproj
dotnet ef database update -c appidentitydbcontext -p ../Infrastructure/Infrastructure.csproj -s Web.csproj
```
These commands will create two separate databases, one for the store's catalog data and shopping cart information, and one for the app's user credentials and identity data.
1. Run the application.
The first time you run the application, it will seed both databases with data such that you should see products in the store, and you should be able to log in using the demouser@microsoft.com account.
Note: If you need to create migrations, you can use these commands:
```
-- create migration (from Web folder CLI)
dotnet ef migrations add InitialModel --context catalogcontext -p ../Infrastructure/Infrastructure.csproj -s Web.csproj -o Data/Migrations
dotnet ef migrations add InitialIdentityModel --context appidentitydbcontext -p ../Infrastructure/Infrastructure.csproj -s Web.csproj -o Identity/Migrations
```
## Running the sample in the dev container
This project includes a `.devcontainer` folder with a [dev container configuration](https://containers.dev/), which lets you use a container as a full-featured dev environment.
You can use the dev container to build and run the app without needing to install any of its tools locally! You can work in GitHub Codespaces or the VS Code Dev Containers extension.
Learn more about using the dev container in its [readme](/.devcontainer/devcontainerreadme.md).
## Running the sample using Docker
You can run the Web sample by running these commands from the root folder (where the .sln file is located):
```
docker-compose build
docker-compose up
```
You should be able to make requests to localhost:5106 for the Web project, and localhost:5200 for the Public API project once these commands complete. If you have any problems, especially with login, try from a new guest or incognito browser instance.
You can also run the applications by using the instructions located in their `Dockerfile` file in the root of each project. Again, run these commands from the root of the solution (where the .sln file is located).
## Community Extensions
We have some great contributions from the community, and while these aren't maintained by Microsoft we still want to highlight them.
[eShopOnWeb VB.NET](https://github.com/VBAndCs/eShopOnWeb_VB.NET) by Mohammad Hamdy Ghanem
================================================
FILE: azure.yaml
================================================
name: eShopOnWeb
services:
web:
project: ./src/Web
language: csharp
host: appservice
================================================
FILE: docker-compose-webapp.yml
================================================
version: '3.4'
services:
eshopwebmvc:
image: __acr-login-server__/eshopwebmvc
build:
context: .
dockerfile: src/Web/Dockerfile
depends_on:
- "sqlserver"
eshoppublicapi:
image: __acr-login-server__/eshoppublicapi
build:
context: .
dockerfile: src/PublicApi/Dockerfile
depends_on:
- "sqlserver"
sqlserver:
image: mcr.microsoft.com/azure-sql-edge
ports:
- "1433:1433"
environment:
- SA_PASSWORD=@someThingComplicated1234
- ACCEPT_EULA=Y
================================================
FILE: docker-compose.dcproj
================================================
Not Authorized
You are not authorized to access this resource. Return to eShop
}Sorry, there's nothing at this address.
Create
@if (_item == null)
{
@if (HasPicture)
{
}
@foreach (var brand in Brands)
{
}
@foreach (var type in Types)
{
}
Delete @_item.Name
@if (_item == null)
{
@if (HasPicture)
{
}
- Name
- @_item.Name
- Description
- @_item.Description
- Brand
- @_item.CatalogBrand
- Type
- @_item.CatalogType
- Price
- @_item.Price
Logger
@inject IJSRuntime JSRuntime
@inject ICatalogItemService CatalogItemService
@inherits BlazorAdmin.Helpers.BlazorComponent
@namespace BlazorAdmin.Pages.CatalogItemPage
@if (_showDetailsModal)
{
}
@code {
[Parameter]
public IEnumerable Brands { get; set; }
[Parameter]
public IEnumerable Types { get; set; }
[Parameter]
public EventCallback OnEditClick { get; set; }
private bool HasPicture => !string.IsNullOrEmpty(_item.PictureUri);
private string _modalDisplay = "none;";
private string _modalClass = "";
private bool _showDetailsModal = false;
private CatalogItem _item = new CatalogItem();
public async Task EditClick()
{
await OnEditClick.InvokeAsync(_item.Id);
await Close();
}
public async Task Open(int id)
{
Logger.LogInformation("Now loading... /Catalog/Details/{Id}", id);
await new Css(JSRuntime).HideBodyOverflow();
_item = await CatalogItemService.GetById(id);
_modalDisplay = "block;";
_modalClass = "Show";
_showDetailsModal = true;
StateHasChanged();
}
public async Task Close()
{
await new Css(JSRuntime).ShowBodyOverflow();
_modalDisplay = "none";
_modalClass = "";
_showDetailsModal = false;
}
}
================================================
FILE: src/BlazorAdmin/Pages/CatalogItemPage/Edit.razor
================================================
@inject ILogger Logger
@inject IJSRuntime JSRuntime
@inject ICatalogItemService CatalogItemService
@inherits BlazorAdmin.Helpers.BlazorComponent
@namespace BlazorAdmin.Pages.CatalogItemPage
@if (_showEditModal)
{
}
@code {
[Parameter]
public IEnumerable Brands { get; set; }
[Parameter]
public IEnumerable Types { get; set; }
[Parameter]
public EventCallback OnSaveClick { get; set; }
private string LoadPicture => string.IsNullOrEmpty(_item.PictureBase64) ? string.IsNullOrEmpty(_item.PictureUri) ? string.Empty : $"{_item.PictureUri}" : $"data:image/png;base64, {_item.PictureBase64}";
private bool HasPicture => !(string.IsNullOrEmpty(_item.PictureBase64) && string.IsNullOrEmpty(_item.PictureUri));
private string _badFileMessage = string.Empty;
private string _modalDisplay = "none;";
private string _modalClass = "";
private bool _showEditModal = false;
private CatalogItem _item = new CatalogItem();
private async Task SaveClick()
{
await CatalogItemService.Edit(_item);
await OnSaveClick.InvokeAsync(null);
await Close();
}
public async Task Open(int id)
{
Logger.LogInformation("Now loading... /Catalog/Edit/{Id}", id);
await new Css(JSRuntime).HideBodyOverflow();
_item = await CatalogItemService.GetById(id);
_modalDisplay = "block;";
_modalClass = "Show";
_showEditModal = true;
StateHasChanged();
}
private async Task Close()
{
await new Css(JSRuntime).ShowBodyOverflow();
_modalDisplay = "none";
_modalClass = "";
_showEditModal = false;
}
}
================================================
FILE: src/BlazorAdmin/Pages/CatalogItemPage/List.razor
================================================
@page "/admin"
@attribute [Authorize(Roles = BlazorShared.Authorization.Constants.Roles.ADMINISTRATORS)]
@inherits BlazorAdmin.Helpers.BlazorComponent
@namespace BlazorAdmin.Pages.CatalogItemPage
eShopOnWeb Admin: Manage Product Catalog
CatalogBrandService { get; set; }
[Microsoft.AspNetCore.Components.Inject]
public ICatalogLookupDataService CatalogTypeService { get; set; }
private List catalogItems = new List();
private List catalogTypes = new List();
private List catalogBrands = new List();
private Edit EditComponent { get; set; }
private Delete DeleteComponent { get; set; }
private Details DetailsComponent { get; set; }
private Create CreateComponent { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
catalogItems = await CatalogItemService.List();
catalogTypes = await CatalogTypeService.List();
catalogBrands = await CatalogBrandService.List();
CallRequestRefresh();
}
await base.OnAfterRenderAsync(firstRender);
}
private async void DetailsClick(int id)
{
await DetailsComponent.Open(id);
}
private async Task CreateClick()
{
await CreateComponent.Open();
}
private async Task EditClick(int id)
{
await EditComponent.Open(id);
}
private async Task DeleteClick(int id)
{
await DeleteComponent.Open(id);
}
private async Task ReloadCatalogItems()
{
catalogItems = await CatalogItemService.List();
StateHasChanged();
}
}
================================================
FILE: src/BlazorAdmin/Pages/Logout.razor
================================================
@page "/logout"
@inject IJSRuntime JSRuntime
@inject HttpClient HttpClient
@inherits BlazorAdmin.Helpers.BlazorComponent
@code {
protected override async Task OnInitializedAsync()
{
await HttpClient.PostAsync("User/Logout", null);
await new Route(JSRuntime).RouteOutside("/Identity/Account/Login");
}
}
================================================
FILE: src/BlazorAdmin/Program.cs
================================================
using System;
using System.Net.Http;
using System.Threading.Tasks;
using BlazorAdmin;
using BlazorAdmin.Services;
using Blazored.LocalStorage;
using BlazorShared;
using BlazorShared.Models;
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add("#admin");
builder.RootComponents.Add("head::after");
var configSection = builder.Configuration.GetRequiredSection(BaseUrlConfiguration.CONFIG_NAME);
builder.Services.Configure(configSection);
builder.Services.AddScoped(sp => new HttpClient() { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddScoped();
builder.Services.AddScoped();
builder.Services.AddBlazoredLocalStorage();
builder.Services.AddAuthorizationCore();
builder.Services.AddScoped();
builder.Services.AddScoped(sp => (CustomAuthStateProvider)sp.GetRequiredService());
builder.Services.AddBlazorServices();
builder.Logging.AddConfiguration(builder.Configuration.GetRequiredSection("Logging"));
await ClearLocalStorageCache(builder.Services);
await builder.Build().RunAsync();
static async Task ClearLocalStorageCache(IServiceCollection services)
{
var sp = services.BuildServiceProvider();
var localStorageService = sp.GetRequiredService();
await localStorageService.RemoveItemAsync(typeof(CatalogBrand).Name);
await localStorageService.RemoveItemAsync(typeof(CatalogType).Name);
}
================================================
FILE: src/BlazorAdmin/Properties/launchSettings.json
================================================
{
"iisSettings": {
"windowsAuthentication": false,
"anonymousAuthentication": true,
"iisExpress": {
"applicationUrl": "http://localhost:58126",
"sslPort": 44315
}
},
"profiles": {
"IIS Express": {
"commandName": "IISExpress",
"launchBrowser": true,
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
"applicationUrl": "https://localhost:5001;http://localhost:5000",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
"BlazorAdmin": {
"commandName": "Project",
"launchBrowser": true,
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
"applicationUrl": "https://localhost:5001;http://localhost:5000",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
}
}
}
================================================
FILE: src/BlazorAdmin/Services/CacheEntry.cs
================================================
using System;
namespace BlazorAdmin.Services;
public class CacheEntry
{
public CacheEntry(T item)
{
Value = item;
}
public CacheEntry()
{
}
public T Value { get; set; }
public DateTime DateCreated { get; set; } = DateTime.UtcNow;
}
================================================
FILE: src/BlazorAdmin/Services/CachedCatalogItemServiceDecorator.cs
================================================
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Blazored.LocalStorage;
using BlazorShared.Interfaces;
using BlazorShared.Models;
using Microsoft.Extensions.Logging;
namespace BlazorAdmin.Services;
public class CachedCatalogItemServiceDecorator : ICatalogItemService
{
private readonly ILocalStorageService _localStorageService;
private readonly CatalogItemService _catalogItemService;
private ILogger _logger;
public CachedCatalogItemServiceDecorator(ILocalStorageService localStorageService,
CatalogItemService catalogItemService,
ILogger logger)
{
_localStorageService = localStorageService;
_catalogItemService = catalogItemService;
_logger = logger;
}
public async Task> ListPaged(int pageSize)
{
string key = "items";
var cacheEntry = await _localStorageService.GetItemAsync>>(key);
if (cacheEntry != null)
{
_logger.LogInformation("Loading items from local storage.");
if (cacheEntry.DateCreated.AddMinutes(1) > DateTime.UtcNow)
{
return cacheEntry.Value;
}
else
{
_logger.LogInformation($"Loading {key} from local storage.");
await _localStorageService.RemoveItemAsync(key);
}
}
var items = await _catalogItemService.ListPaged(pageSize);
var entry = new CacheEntry>(items);
await _localStorageService.SetItemAsync(key, entry);
return items;
}
public async Task> List()
{
string key = "items";
var cacheEntry = await _localStorageService.GetItemAsync>>(key);
if (cacheEntry != null)
{
_logger.LogInformation("Loading items from local storage.");
if (cacheEntry.DateCreated.AddMinutes(1) > DateTime.UtcNow)
{
return cacheEntry.Value;
}
else
{
_logger.LogInformation($"Loading {key} from local storage.");
await _localStorageService.RemoveItemAsync(key);
}
}
var items = await _catalogItemService.List();
var entry = new CacheEntry>(items);
await _localStorageService.SetItemAsync(key, entry);
return items;
}
public async Task GetById(int id)
{
return (await List()).FirstOrDefault(x => x.Id == id);
}
public async Task Create(CreateCatalogItemRequest catalogItem)
{
var result = await _catalogItemService.Create(catalogItem);
await RefreshLocalStorageList();
return result;
}
public async Task Edit(CatalogItem catalogItem)
{
var result = await _catalogItemService.Edit(catalogItem);
await RefreshLocalStorageList();
return result;
}
public async Task Delete(int id)
{
var result = await _catalogItemService.Delete(id);
await RefreshLocalStorageList();
return result;
}
private async Task RefreshLocalStorageList()
{
string key = "items";
await _localStorageService.RemoveItemAsync(key);
var items = await _catalogItemService.List();
var entry = new CacheEntry>(items);
await _localStorageService.SetItemAsync(key, entry);
}
}
================================================
FILE: src/BlazorAdmin/Services/CachedCatalogLookupDataServiceDecorator .cs
================================================
using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using Blazored.LocalStorage;
using BlazorShared.Interfaces;
using BlazorShared.Models;
using Microsoft.Extensions.Logging;
namespace BlazorAdmin.Services;
public class CachedCatalogLookupDataServiceDecorator
: ICatalogLookupDataService
where TLookupData : LookupData
where TReponse : ILookupDataResponse
{
private readonly ILocalStorageService _localStorageService;
private readonly CatalogLookupDataService _catalogTypeService;
private ILogger> _logger;
public CachedCatalogLookupDataServiceDecorator(ILocalStorageService localStorageService,
CatalogLookupDataService catalogTypeService,
ILogger> logger)
{
_localStorageService = localStorageService;
_catalogTypeService = catalogTypeService;
_logger = logger;
}
public async Task> List()
{
string key = typeof(TLookupData).Name;
var cacheEntry = await _localStorageService.GetItemAsync>>(key);
if (cacheEntry != null)
{
_logger.LogInformation($"Loading {key} from local storage.");
if (cacheEntry.DateCreated.AddMinutes(1) > DateTime.UtcNow)
{
return cacheEntry.Value;
}
else
{
_logger.LogInformation($"Cache expired; removing {key} from local storage.");
await _localStorageService.RemoveItemAsync(key);
}
}
var types = await _catalogTypeService.List();
var entry = new CacheEntry>(types);
await _localStorageService.SetItemAsync(key, entry);
return types;
}
}
================================================
FILE: src/BlazorAdmin/Services/CatalogItemService.cs
================================================
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using BlazorShared.Interfaces;
using BlazorShared.Models;
using Microsoft.Extensions.Logging;
namespace BlazorAdmin.Services;
public class CatalogItemService : ICatalogItemService
{
private readonly ICatalogLookupDataService _brandService;
private readonly ICatalogLookupDataService _typeService;
private readonly HttpService _httpService;
private readonly ILogger _logger;
public CatalogItemService(ICatalogLookupDataService brandService,
ICatalogLookupDataService typeService,
HttpService httpService,
ILogger logger)
{
_brandService = brandService;
_typeService = typeService;
_httpService = httpService;
_logger = logger;
}
public async Task Create(CreateCatalogItemRequest catalogItem)
{
var response = await _httpService.HttpPost("catalog-items", catalogItem);
return response?.CatalogItem;
}
public async Task Edit(CatalogItem catalogItem)
{
return (await _httpService.HttpPut("catalog-items", catalogItem)).CatalogItem;
}
public async Task Delete(int catalogItemId)
{
return (await _httpService.HttpDelete("catalog-items", catalogItemId)).Status;
}
public async Task GetById(int id)
{
var brandListTask = _brandService.List();
var typeListTask = _typeService.List();
var itemGetTask = _httpService.HttpGet($"catalog-items/{id}");
await Task.WhenAll(brandListTask, typeListTask, itemGetTask);
var brands = brandListTask.Result;
var types = typeListTask.Result;
var catalogItem = itemGetTask.Result.CatalogItem;
catalogItem.CatalogBrand = brands.FirstOrDefault(b => b.Id == catalogItem.CatalogBrandId)?.Name;
catalogItem.CatalogType = types.FirstOrDefault(t => t.Id == catalogItem.CatalogTypeId)?.Name;
return catalogItem;
}
public async Task> ListPaged(int pageSize)
{
_logger.LogInformation("Fetching catalog items from API.");
var brandListTask = _brandService.List();
var typeListTask = _typeService.List();
var itemListTask = _httpService.HttpGet($"catalog-items?PageSize=10");
await Task.WhenAll(brandListTask, typeListTask, itemListTask);
var brands = brandListTask.Result;
var types = typeListTask.Result;
var items = itemListTask.Result.CatalogItems;
foreach (var item in items)
{
item.CatalogBrand = brands.FirstOrDefault(b => b.Id == item.CatalogBrandId)?.Name;
item.CatalogType = types.FirstOrDefault(t => t.Id == item.CatalogTypeId)?.Name;
}
return items;
}
public async Task> List()
{
_logger.LogInformation("Fetching catalog items from API.");
var brandListTask = _brandService.List();
var typeListTask = _typeService.List();
var itemListTask = _httpService.HttpGet($"catalog-items");
await Task.WhenAll(brandListTask, typeListTask, itemListTask);
var brands = brandListTask.Result;
var types = typeListTask.Result;
var items = itemListTask.Result.CatalogItems;
foreach (var item in items)
{
item.CatalogBrand = brands.FirstOrDefault(b => b.Id == item.CatalogBrandId)?.Name;
item.CatalogType = types.FirstOrDefault(t => t.Id == item.CatalogTypeId)?.Name;
}
return items;
}
}
================================================
FILE: src/BlazorAdmin/Services/CatalogLookupDataService.cs
================================================
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Net.Http.Json;
using System.Reflection;
using System.Threading.Tasks;
using BlazorShared;
using BlazorShared.Attributes;
using BlazorShared.Interfaces;
using BlazorShared.Models;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Options;
namespace BlazorAdmin.Services;
public class CatalogLookupDataService
: ICatalogLookupDataService
where TLookupData : LookupData
where TReponse : ILookupDataResponse
{
private readonly HttpClient _httpClient;
private readonly ILogger> _logger;
private readonly string _apiUrl;
public CatalogLookupDataService(HttpClient httpClient,
IOptions baseUrlConfiguration,
ILogger> logger)
{
_httpClient = httpClient;
_logger = logger;
_apiUrl = baseUrlConfiguration.Value.ApiBase;
}
public async Task> List()
{
var endpointName = typeof(TLookupData).GetCustomAttribute().Name;
_logger.LogInformation($"Fetching {typeof(TLookupData).Name} from API. Enpoint : {endpointName}");
var response = await _httpClient.GetFromJsonAsync($"{_apiUrl}{endpointName}");
return response.List;
}
}
================================================
FILE: src/BlazorAdmin/Services/HttpService.cs
================================================
using System.Net.Http;
using System.Text;
using System.Text.Json;
using System.Threading.Tasks;
using BlazorShared;
using BlazorShared.Models;
using Microsoft.Extensions.Options;
namespace BlazorAdmin.Services;
public class HttpService
{
private readonly HttpClient _httpClient;
private readonly ToastService _toastService;
private readonly string _apiUrl;
public HttpService(HttpClient httpClient, IOptions baseUrlConfiguration, ToastService toastService)
{
_httpClient = httpClient;
_toastService = toastService;
_apiUrl = baseUrlConfiguration.Value.ApiBase;
}
public async Task HttpGet(string uri)
where T : class
{
var result = await _httpClient.GetAsync($"{_apiUrl}{uri}");
if (!result.IsSuccessStatusCode)
{
return null;
}
return await FromHttpResponseMessage(result);
}
public async Task HttpDelete(string uri, int id)
where T : class
{
var result = await _httpClient.DeleteAsync($"{_apiUrl}{uri}/{id}");
if (!result.IsSuccessStatusCode)
{
return null;
}
return await FromHttpResponseMessage(result);
}
public async Task HttpPost(string uri, object dataToSend)
where T : class
{
var content = ToJson(dataToSend);
var result = await _httpClient.PostAsync($"{_apiUrl}{uri}", content);
if (!result.IsSuccessStatusCode)
{
var exception = JsonSerializer.Deserialize(await result.Content.ReadAsStringAsync(), new JsonSerializerOptions
{
PropertyNameCaseInsensitive = true
});
_toastService.ShowToast($"Error : {exception.Message}", ToastLevel.Error);
return null;
}
return await FromHttpResponseMessage(result);
}
public async Task HttpPut(string uri, object dataToSend)
where T : class
{
var content = ToJson(dataToSend);
var result = await _httpClient.PutAsync($"{_apiUrl}{uri}", content);
if (!result.IsSuccessStatusCode)
{
_toastService.ShowToast("Error", ToastLevel.Error);
return null;
}
return await FromHttpResponseMessage(result);
}
private StringContent ToJson(object obj)
{
return new StringContent(JsonSerializer.Serialize(obj), Encoding.UTF8, "application/json");
}
private async Task FromHttpResponseMessage(HttpResponseMessage result)
{
return JsonSerializer.Deserialize(await result.Content.ReadAsStringAsync(), new JsonSerializerOptions
{
PropertyNameCaseInsensitive = true
});
}
}
================================================
FILE: src/BlazorAdmin/Services/ToastService.cs
================================================
using System;
using System.Timers;
namespace BlazorAdmin.Services;
public enum ToastLevel
{
Info,
Success,
Warning,
Error
}
public class ToastService : IDisposable
{
public event Action OnShow;
public event Action OnHide;
private Timer Countdown;
public void ShowToast(string message, ToastLevel level)
{
OnShow?.Invoke(message, level);
StartCountdown();
}
private void StartCountdown()
{
SetCountdown();
if (Countdown.Enabled)
{
Countdown.Stop();
Countdown.Start();
}
else
{
Countdown.Start();
}
}
private void SetCountdown()
{
if (Countdown == null)
{
Countdown = new Timer(3000);
Countdown.Elapsed += HideToast;
Countdown.AutoReset = false;
}
}
private void HideToast(object source, ElapsedEventArgs args)
{
OnHide?.Invoke();
}
public void Dispose()
{
Countdown?.Dispose();
}
}
================================================
FILE: src/BlazorAdmin/ServicesConfiguration.cs
================================================
using BlazorAdmin.Services;
using BlazorShared.Interfaces;
using BlazorShared.Models;
using Microsoft.Extensions.DependencyInjection;
namespace BlazorAdmin;
public static class ServicesConfiguration
{
public static IServiceCollection AddBlazorServices(this IServiceCollection services)
{
services.AddScoped, CachedCatalogLookupDataServiceDecorator>();
services.AddScoped>();
services.AddScoped, CachedCatalogLookupDataServiceDecorator>();
services.AddScoped>();
services.AddScoped();
services.AddScoped();
return services;
}
}
================================================
FILE: src/BlazorAdmin/Shared/CustomInputSelect.cs
================================================
using Microsoft.AspNetCore.Components.Forms;
namespace BlazorAdmin.Shared;
/// : InputSelect
{
protected override bool TryParseValueFromString(string value, out TValue result,
out string validationErrorMessage)
{
if (typeof(TValue) == typeof(int))
{
if (int.TryParse(value, out var resultInt))
{
result = (TValue)(object)resultInt;
validationErrorMessage = null;
return true;
}
else
{
result = default;
validationErrorMessage =
$"The selected value {value} is not a valid number.";
return false;
}
}
else
{
return base.TryParseValueFromString(value, out result,
out validationErrorMessage);
}
}
}
================================================
FILE: src/BlazorAdmin/Shared/MainLayout.razor
================================================
@inject AuthenticationStateProvider AuthStateProvider
@inject IJSRuntime JSRuntime
@inherits BlazorAdmin.Helpers.BlazorLayoutComponent
```
#### Using Open Iconic's SVG Sprite
Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. It's like an icon font, without being a hack.
Adding an icon from an SVG sprite is a little different than what you're used to, but it's still a piece of cake. *Tip: To make your icons easily style able, we suggest adding a general class to the* `
Details @_item.Name
@if (_item == null)
{
@if (HasPicture)
{
}
- Name
- @_item.Name
- Description
- @_item.Description
- Brand
- @_item.CatalogBrand
- Type
- @_item.CatalogType
- Price
- @_item.Price
Edit @_item.Name
@if (_item == null)
{
@if (HasPicture)
{
}
@foreach (var brand in Brands)
{
}
@foreach (var type in Types)
{
}
Manage Product Catalog
@if (catalogItems == null) {
| Item Type | Brand | Id | Name | @nameof(CatalogItem.Description) | @nameof(CatalogItem.Price) | Actions | |
|---|---|---|---|---|---|---|---|
|
|
@item.CatalogType | @item.CatalogBrand | @item.Id | @item.Name | @item.Description | @item.Price |
/// This is needed until 5.0 ships with native support /// https://www.pragimtech.com/blog/blazor/inputselect-does-not-support-system.int32/ ///
///
Loading...
================================================
FILE: src/BlazorAdmin/Shared/Toast.razor
================================================
@inherits BlazorAdmin.Helpers.ToastComponent
@namespace BlazorAdmin.Shared
@Heading
@Message
```
#### Using Open Iconic's SVG Sprite
Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. It's like an icon font, without being a hack.
Adding an icon from an SVG sprite is a little different than what you're used to, but it's still a piece of cake. *Tip: To make your icons easily style able, we suggest adding a general class to the* `