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>
<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="DevExpress.Blazor" Version="24.1.*" />
</ItemGroup>
<ItemGroup>

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

@@ -15,40 +15,35 @@ else if (!string.IsNullOrWhiteSpace(infoMessage))
}
<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>
@if (showForm)
{
<EditForm Model="formModel" OnValidSubmit="HandleSubmit">
<div class="row g-3">
<div class="col-md-6">
<label class="form-label">Titel</label>
<InputText class="form-control" @bind-Value="formModel.CatTitle" disabled="@(isEditing && formModel.UpdateProcedure == 0)" />
</div>
<div class="col-md-6">
<label class="form-label">Kennung</label>
<InputText class="form-control" @bind-Value="formModel.CatString" />
</div>
</div>
@if (isEditing)
{
<div class="row g-3 mt-2">
<div class="col-md-6">
<label class="form-label">Update-Prozedur</label>
<InputSelect class="form-control" @bind-Value="formModel.UpdateProcedure">
<option value="0">PRTBMY_CATALOG_UPDATE</option>
<option value="1">PRTBMY_CATALOG_SAVE</option>
</InputSelect>
</div>
</div>
}
<div class="mt-3 d-flex gap-2">
<button type="submit" class="btn btn-success">@((isEditing ? "Speichern" : "Anlegen"))</button>
<button type="button" class="btn btn-secondary" @onclick="CancelEdit">Abbrechen</button>
</div>
<EditForm Model="formModel" OnValidSubmit="HandleSubmit" Context="editCtx">
<DxFormLayout ColCount="2">
<DxFormLayoutItem Caption="Titel" Context="itemCtx">
<DxTextBox @bind-Text="formModel.CatTitle" Enabled="@(isEditing ? formModel.UpdateProcedure != 0 : true)" />
</DxFormLayoutItem>
<DxFormLayoutItem Caption="Kennung" Context="itemCtx">
<DxTextBox @bind-Text="formModel.CatString" />
</DxFormLayoutItem>
@if (isEditing)
{
<DxFormLayoutItem Caption="Update-Prozedur" Context="itemCtx">
<DxComboBox Data="@procedureOptions"
TextFieldName="Text"
ValueFieldName="Value"
@bind-Value="formModel.UpdateProcedure" />
</DxFormLayoutItem>
}
<DxFormLayoutItem Caption=" " Context="itemCtx">
<DxStack Orientation="Orientation.Horizontal" Spacing="8">
<DxButton RenderStyle="ButtonRenderStyle.Success" ButtonType="ButtonType.Submit" SubmitFormOnClick="true" Context="btnCtx">@((isEditing ? "Speichern" : "Anlegen"))</DxButton>
<DxButton RenderStyle="ButtonRenderStyle.Secondary" Click="@CancelEdit" Context="btnCtx">Abbrechen</DxButton>
</DxStack>
</DxFormLayoutItem>
</DxFormLayout>
</EditForm>
}
@@ -62,38 +57,26 @@ else if (items.Count == 0)
}
else
{
<table class="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>Titel</th>
<th>String</th>
<th>Angelegt von</th>
<th>Angelegt am</th>
<th>Geändert von</th>
<th>Geändert am</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in items)
{
<tr>
<td>@item.Guid</td>
<td>@item.CatTitle</td>
<td>@item.CatString</td>
<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>
<DxGrid Data="@items" TItem="CatalogReadDto" KeyFieldName="@nameof(CatalogReadDto.Guid)" ShowFilterRow="true" PageSize="10" CssClass="mb-4">
<Columns>
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.Guid)" Caption="Id" Width="140px" />
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.CatTitle)" Caption="Titel" />
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.CatString)" Caption="String" />
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.AddedWho)" Caption="Angelegt von" />
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.AddedWhen)" Caption="Angelegt am" />
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.ChangedWho)" Caption="Geändert von" />
<DxGridDataColumn FieldName="@nameof(CatalogReadDto.ChangedWhen)" Caption="Geändert am" />
<DxGridDataColumn Caption="" Width="220px">
<CellDisplayTemplate Context="cell">
@{ var item = (CatalogReadDto)cell.DataItem; }
<div style="white-space: nowrap;">
<DxButton RenderStyle="ButtonRenderStyle.Secondary" Size="ButtonSize.Small" Click="@(() => StartEdit(item))">Bearbeiten</DxButton>
<DxButton RenderStyle="ButtonRenderStyle.Danger" Size="ButtonSize.Small" Click="@(() => DeleteCatalog(item.Guid))">Löschen</DxButton>
</div>
</CellDisplayTemplate>
</DxGridDataColumn>
</Columns>
</DxGrid>
}
@code {
@@ -106,6 +89,12 @@ else
private string? errorMessage;
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()
{
await LoadCatalogs();
@@ -223,4 +212,10 @@ else
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 DbFirst.BlazorWasm;
using DbFirst.BlazorWasm.Services;
using DevExpress.Blazor;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
builder.Services.AddDevExpressBlazor();
var apiBaseUrl = builder.Configuration["ApiBaseUrl"] ?? builder.HostEnvironment.BaseAddress;
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(apiBaseUrl) });
builder.Services.AddScoped<CatalogApiClient>();

1
DbFirst.BlazorWasm/_Imports.razor
View File

@@ -10,3 +10,4 @@
@using DbFirst.BlazorWasm.Layout
@using DbFirst.BlazorWasm.Models
@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" />
<title>DbFirst.BlazorWasm</title>
<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/app.css" />
<link rel="icon" type="image/png" href="favicon.png" />