Peace
/
BlazorRadzenPracs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dialog 1

Browse Source
main
Peace 12 months ago
parent 6c13740f5a
commit f61659dce3
4 changed files with 115 additions and 1 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
  2. 57
      ComponentPractice/ComponentPractice/Components/Pages/DialogCard.razor
  3. 54
      ComponentPractice/ComponentPractice/Components/Pages/LayoutDialog.razor
  4. 4
      ComponentPractice/ComponentPractice/Program.cs

1
ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
Unescape View File

@ -37,6 +37,7 @@
<RadzenPanelMenuItem Text="Row" Icon="dashboard_customize" Click="@(() => sidebarExpanded = false)" Path="layoutrow" />
<RadzenPanelMenuItem Text="Column" Icon="dashboard_customize" Click="@(() => sidebarExpanded = false)" Path="layoutcolumn" />
<RadzenPanelMenuItem Text="Card" Icon="dashboard_customize" Click="@(() => sidebarExpanded = false)" Path="layoutcard" />
<RadzenPanelMenuItem Text="Dialog" Icon="dashboard_customize" Click="@(() => sidebarExpanded = false)" Path="layoutdialog" />
</RadzenPanelMenuItem>
</RadzenPanelMenu>
</RadzenStack>

57
ComponentPractice/ComponentPractice/Components/Pages/DialogCard.razor
Unescape View File

@ -0,0 +1,57 @@
@page "/dialogcard/{EmployeeId}"
@inject InMemoryData data;
@inject Radzen.DialogService dialogService;
@rendermode RenderMode.InteractiveServer
@if (employee is null)
{
<RadzenText class="rz-color-on-warning-light" TextStyle="TextStyle.DisplayH5">No data</RadzenText>
}
else
{
<RadzenStack class="rz-p-4" Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.Start" Gap="1rem">
<RadzenImage Path="@employee.Photo" Style="width:100px; height:100px; border-radius:50%" />
<RadzenStack Gap="0">
<RadzenText class="rz-display-flex rz-mt-2 rz-my-0" TextStyle="TextStyle.Overline">Employee</RadzenText>
<RadzenText TextStyle="TextStyle.Body1"><b>@($"{employee.FirstName} {employee.LastName}")</b></RadzenText>
<RadzenText class="rz-display-flex rz-mt-4 rz-mb-0" TextStyle="TextStyle.Overline">Job Title</RadzenText>
<RadzenText TextStyle="TextStyle.Body1"><b>@($"{employee.Title} {employee.Job}")</b></RadzenText>
</RadzenStack>
</RadzenStack>
<RadzenCard class="rz-background-color-primary-light rz-shadow-0 rz-border-radius-0 rz-p-8" style="margin: 1rem calc(-1 * var(--rz-card-padding));">
<RadzenText class="rz-color-on-primary-light" TextStyle="TextStyle.H6"><strong>Personal Information</strong></RadzenText>
<RadzenRow RowGap="0">
<RadzenColumn SizeSM="4">
<RadzenText class="rz-color-on-primary-light rz-display-flex rz-mt-4 rz-mb-0" TextStyle="TextStyle.Overline">Hire Date</RadzenText>
<RadzenText class="rz-color-on-primary-light" TextStyle="TextStyle.Body1">@employee.HireDate.ToString("yyyy-MM-dd")</RadzenText>
<RadzenText class="rz-color-on-primary-light rz-display-flex rz-mt-4 rz-mb-0" TextStyle="TextStyle.Overline">Phone</RadzenText>
<RadzenText class="rz-color-on-primary-light" TextStyle="TextStyle.Body1">@employee.Phone</RadzenText>
</RadzenColumn>
<RadzenColumn OffsetSM="2" SizeSM="6">
<RadzenText class="rz-color-on-primary-light rz-display-flex rz-mt-4 rz-mb-0" TextStyle="TextStyle.Overline">Region</RadzenText>
<RadzenText class="rz-color-on-primary-light" TextStyle="TextStyle.Body1">@employee.Region</RadzenText>
<RadzenText class="rz-color-on-primary-light rz-display-flex rz-mt-4 rz-mb-0" TextStyle="TextStyle.Overline">Address</RadzenText>
<RadzenText class="rz-color-on-primary-light" TextStyle="TextStyle.Body1">@employee.Address</RadzenText>
</RadzenColumn>
</RadzenRow>
</RadzenCard>
<RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.End" Gap="0">
<RadzenButton Variant="Variant.Text" Text="Send" Click="@((args) => dialogService.Close(true))" />
<RadzenButton class="rz-text-secondary-color" Variant="Variant.Text" Text="Cancel" Click="@((args) => dialogService.Close(false))" />
</RadzenStack>
}
@code {
[Parameter]
public int EmployeeId { get; set; }
Employee employee;
protected override async Task OnInitializedAsync()
{
var employees = await data.GetFixedEmployeeDataAsync();
employee = employees.Where(e => e.ID == EmployeeId).FirstOrDefault();
}
}

54
ComponentPractice/ComponentPractice/Components/Pages/LayoutDialog.razor
Unescape View File

@ -0,0 +1,54 @@
@page "/layoutdialog"
@inject DialogService dialogService;
@rendermode RenderMode.InteractiveServer
<RadzenCard class="rz-p-4 rz-mt-6">
<RadzenText TextStyle="TextStyle.H5">Open page as Dialog</RadzenText>
<hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin-bottom: 1rem;" />
<div class="rz-p-12 rz-text-align-center">
<RadzenButton Text="@($"Show details of Employee ID {employeeId}")" ButtonStyle="ButtonStyle.Secondary" Click="@OpenEmployeeDetail"/>
</div>
</RadzenCard>
<RadzenCard class="rz-p-4 rz-mt-6">
<RadzenText TextStyle="TextStyle.H5">Inline Dialog</RadzenText>
<hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin-bottom: 1rem;" />
<div class="rz-p-12 rz-text-align-center">
<RadzenButton Text="@($"Show Inline Dialog")" ButtonStyle="ButtonStyle.Secondary" Click="@ShowInlineDialog" />
</div>
</RadzenCard>
@code {
int employeeId = Random.Shared.Next(1, 100);
public async Task OpenEmployeeDetail()
{
var result = await dialogService.OpenAsync<DialogCard>($"Employee ID {employeeId}",
new Dictionary<string, object>() { { "EmployeeId", employeeId } },
new DialogOptions() { Width = "50%", Height = "550px", Resizable = true, Draggable = true });
int a = 0;
}
public async Task ShowInlineDialog()
{
var result = await dialogService.OpenAsync("Simple Inline Dialog", ds =>
@<RadzenStack Gap="1.5rem">
<p>Inline Dialog</p>
<div class="my-3">
This is sample of inline dialog. (Employee ID: @employeeId)
</div>
<RadzenStack Orientation="Orientation.Horizontal" Gap="0.5rem" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.SpaceBetween">
<RadzenStack Orientation="Orientation.Horizontal">
<RadzenButton Text="OK" Click="@(() => ds.Close(true))" />
<RadzenButton Text="Cancel" Click="@(() => ds.Close(false))" ButtonStyle="ButtonStyle.Light" />
</RadzenStack>
<RadzenButton Text="Refresh" Click="@(() => { employeeId = Random.Shared.Next(1, 100); ds.Refresh(); })" ButtonStyle="ButtonStyle.Light" />
</RadzenStack>
</RadzenStack>);
}
}

4
ComponentPractice/ComponentPractice/Program.cs
Unescape View File

@ -19,12 +19,14 @@ namespace ComponentPractice
// Add controllers
builder.Services.AddControllers();
// Add swagger
// Add Swagger
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
// Add Radzen components
builder.Services.AddRadzenComponents();
// Add Data services
builder.Services.AddSingleton<InMemoryData>();
builder.Services.AddScoped<NorthwindDataService>();
builder.Services.AddScoped<ToCSVService>();

Write Preview
Loading…
Cancel
Save