AppStd/DbFirst
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Integrate DevExpress Blazor UI components throughout app

Browse Source 
Replaced Bootstrap UI with DevExpress components in Catalogs.razor, including forms and data grid. Added DevExpress.Blazor package, styles, and service registration. Updated _Imports.razor for global DevExpress usage. Modernizes UI and improves user experience.
This commit is contained in:
OlgunR
2026-01-21 10:21:51 +01:00
parent 6b89f7bd72
commit e55f215210
5 changed files with 64 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
DbFirst.BlazorWasm/DbFirst.BlazorWasm.csproj
View File

@@ -9,6 +9,7 @@
<ItemGroup> <ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.22" /> <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.22" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.22" PrivateAssets="all" /> <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.22" PrivateAssets="all" />
<PackageReference Include="DevExpress.Blazor" Version="24.1.*" />
</ItemGroup> </ItemGroup>
<ItemGroup> <ItemGroup>

113
DbFirst.BlazorWasm/Pages/Catalogs.razor
View File

@@ -15,40 +15,35 @@ else if (!string.IsNullOrWhiteSpace(infoMessage))
} }
<div class="mb-3"> <div class="mb-3">
<button class="btn btn-primary" @onclick="StartCreate">Neuen Eintrag anlegen</button> <DxButton RenderStyle="ButtonRenderStyle.Primary" Click="@StartCreate">Neuen Eintrag anlegen</DxButton>
</div> </div>
@if (showForm) @if (showForm)
{ {
<EditForm Model="formModel" OnValidSubmit="HandleSubmit"> <EditForm Model="formModel" OnValidSubmit="HandleSubmit" Context="editCtx">
<div class="row g-3"> <DxFormLayout ColCount="2">
<div class="col-md-6"> <DxFormLayoutItem Caption="Titel" Context="itemCtx">
<label class="form-label">Titel</label> <DxTextBox @bind-Text="formModel.CatTitle" Enabled="@(isEditing ? formModel.UpdateProcedure != 0 : true)" />
<InputText class="form-control" @bind-Value="formModel.CatTitle" disabled="@(isEditing && formModel.UpdateProcedure == 0)" /> </DxFormLayoutItem>
</div> <DxFormLayoutItem Caption="Kennung" Context="itemCtx">
<div class="col-md-6"> <DxTextBox @bind-Text="formModel.CatString" />
<label class="form-label">Kennung</label> </DxFormLayoutItem>
<InputText class="form-control" @bind-Value="formModel.CatString" />
</div>
</div>
@if (isEditing) @if (isEditing)
{ {
<div class="row g-3 mt-2"> <DxFormLayoutItem Caption="Update-Prozedur" Context="itemCtx">
<div class="col-md-6"> <DxComboBox Data="@procedureOptions"
<label class="form-label">Update-Prozedur</label> TextFieldName="Text"
<InputSelect class="form-control" @bind-Value="formModel.UpdateProcedure"> ValueFieldName="Value"
<option value="0">PRTBMY_CATALOG_UPDATE</option> @bind-Value="formModel.UpdateProcedure" />
<option value="1">PRTBMY_CATALOG_SAVE</option> </DxFormLayoutItem>
</InputSelect>
</div>
</div>
} }
<DxFormLayoutItem Caption=" " Context="itemCtx">
<div class="mt-3 d-flex gap-2"> <DxStack Orientation="Orientation.Horizontal" Spacing="8">
<button type="submit" class="btn btn-success">@((isEditing ? "Speichern" : "Anlegen"))</button> <DxButton RenderStyle="ButtonRenderStyle.Success" ButtonType="ButtonType.Submit" SubmitFormOnClick="true" Context="btnCtx">@((isEditing ? "Speichern" : "Anlegen"))</DxButton>
<button type="button" class="btn btn-secondary" @onclick="CancelEdit">Abbrechen</button> <DxButton RenderStyle="ButtonRenderStyle.Secondary" Click="@CancelEdit" Context="btnCtx">Abbrechen</DxButton>
</div> </DxStack>
</DxFormLayoutItem>
</DxFormLayout>
</EditForm> </EditForm>
} }
@@ -62,38 +57,26 @@ else if (items.Count == 0)
} }
else else
{ {
<table class="table table-striped"> <DxGrid Data="@items" TItem="CatalogReadDto" KeyFieldName="@nameof(CatalogReadDto.Guid)" ShowFilterRow="true" PageSize="10" CssClass="mb-4">
<thead> <Columns>
<tr> <DxGridDataColumn FieldName="@nameof(CatalogReadDto.Guid)" Caption="Id" Width="140px" />
<th>Id</th> <DxGridDataColumn FieldName="@nameof(CatalogReadDto.CatTitle)" Caption="Titel" />
<th>Titel</th> <DxGridDataColumn FieldName="@nameof(CatalogReadDto.CatString)" Caption="String" />
<th>String</th> <DxGridDataColumn FieldName="@nameof(CatalogReadDto.AddedWho)" Caption="Angelegt von" />
<th>Angelegt von</th> <DxGridDataColumn FieldName="@nameof(CatalogReadDto.AddedWhen)" Caption="Angelegt am" />
<th>Angelegt am</th> <DxGridDataColumn FieldName="@nameof(CatalogReadDto.ChangedWho)" Caption="Geändert von" />
<th>Geändert von</th> <DxGridDataColumn FieldName="@nameof(CatalogReadDto.ChangedWhen)" Caption="Geändert am" />
<th>Geändert am</th> <DxGridDataColumn Caption="" Width="220px">
<th></th> <CellDisplayTemplate Context="cell">
</tr> @{ var item = (CatalogReadDto)cell.DataItem; }
</thead> <div style="white-space: nowrap;">
<tbody> <DxButton RenderStyle="ButtonRenderStyle.Secondary" Size="ButtonSize.Small" Click="@(() => StartEdit(item))">Bearbeiten</DxButton>
@foreach (var item in items) <DxButton RenderStyle="ButtonRenderStyle.Danger" Size="ButtonSize.Small" Click="@(() => DeleteCatalog(item.Guid))">Löschen</DxButton>
{ </div>
<tr> </CellDisplayTemplate>
<td>@item.Guid</td> </DxGridDataColumn>
<td>@item.CatTitle</td> </Columns>
<td>@item.CatString</td> </DxGrid>
<td>@item.AddedWho</td>
<td>@item.AddedWhen.ToString("g")</td>
<td>@item.ChangedWho</td>
<td>@(item.ChangedWhen.HasValue ? item.ChangedWhen.Value.ToString("g") : string.Empty)</td>
<td class="text-end">
<button class="btn btn-sm btn-outline-primary me-2" @onclick="(() => StartEdit(item))">Bearbeiten</button>
<button class="btn btn-sm btn-outline-danger" @onclick="(() => DeleteCatalog(item.Guid))">Löschen</button>
</td>
</tr>
}
</tbody>
</table>
} }
@code { @code {
@@ -106,6 +89,12 @@ else
private string? errorMessage; private string? errorMessage;
private string? infoMessage; private string? infoMessage;
private readonly List<ProcedureOption> procedureOptions = new()
{
new() { Value = 0, Text = "PRTBMY_CATALOG_UPDATE" },
new() { Value = 1, Text = "PRTBMY_CATALOG_SAVE" }
};
protected override async Task OnInitializedAsync() protected override async Task OnInitializedAsync()
{ {
await LoadCatalogs(); await LoadCatalogs();
@@ -223,4 +212,10 @@ else
errorMessage = $"Fehler beim Löschen: {ex.Message}"; errorMessage = $"Fehler beim Löschen: {ex.Message}";
} }
} }
private sealed class ProcedureOption
{
public int Value { get; set; }
public string Text { get; set; } = string.Empty;
}
} }

3
DbFirst.BlazorWasm/Program.cs
View File

@@ -2,11 +2,14 @@ using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting; using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using DbFirst.BlazorWasm; using DbFirst.BlazorWasm;
using DbFirst.BlazorWasm.Services; using DbFirst.BlazorWasm.Services;
using DevExpress.Blazor;
var builder = WebAssemblyHostBuilder.CreateDefault(args); var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app"); builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after"); builder.RootComponents.Add<HeadOutlet>("head::after");
builder.Services.AddDevExpressBlazor();
var apiBaseUrl = builder.Configuration["ApiBaseUrl"] ?? builder.HostEnvironment.BaseAddress; var apiBaseUrl = builder.Configuration["ApiBaseUrl"] ?? builder.HostEnvironment.BaseAddress;
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(apiBaseUrl) }); builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(apiBaseUrl) });
builder.Services.AddScoped<CatalogApiClient>(); builder.Services.AddScoped<CatalogApiClient>();

1
DbFirst.BlazorWasm/_Imports.razor
View File

@@ -10,3 +10,4 @@
@using DbFirst.BlazorWasm.Layout @using DbFirst.BlazorWasm.Layout
@using DbFirst.BlazorWasm.Models @using DbFirst.BlazorWasm.Models
@using DbFirst.BlazorWasm.Services @using DbFirst.BlazorWasm.Services
@using DevExpress.Blazor

2
DbFirst.BlazorWasm/wwwroot/index.html
View File

@@ -6,6 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DbFirst.BlazorWasm</title> <title>DbFirst.BlazorWasm</title>
<base href="/" /> <base href="/" />
<link rel="stylesheet" href="_content/DevExpress.Blazor.Themes/bootstrap-external.bs5.min.css" />
<link rel="stylesheet" href="_content/DevExpress.Blazor.Themes/icons.css" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" /> <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="css/app.css" /> <link rel="stylesheet" href="css/app.css" />
<link rel="icon" type="image/png" href="favicon.png" /> <link rel="icon" type="image/png" href="favicon.png" />