Basics Done
This commit is contained in:
@@ -0,0 +1,19 @@
|
||||
@page "/counter"
|
||||
@rendermode InteractiveServer
|
||||
|
||||
<PageTitle>Counter</PageTitle>
|
||||
|
||||
<h1>Counter</h1>
|
||||
|
||||
<p role="status">Current count: @currentCount</p>
|
||||
|
||||
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
|
||||
|
||||
@code {
|
||||
private int currentCount = 0;
|
||||
|
||||
private void IncrementCount()
|
||||
{
|
||||
currentCount++;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
@page "/Error"
|
||||
@using System.Diagnostics
|
||||
|
||||
<PageTitle>Error</PageTitle>
|
||||
|
||||
<h1 class="text-danger">Error.</h1>
|
||||
<h2 class="text-danger">An error occurred while processing your request.</h2>
|
||||
|
||||
@if (ShowRequestId)
|
||||
{
|
||||
<p>
|
||||
<strong>Request ID:</strong> <code>@RequestId</code>
|
||||
</p>
|
||||
}
|
||||
|
||||
<h3>Development Mode</h3>
|
||||
<p>
|
||||
Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
|
||||
</p>
|
||||
<p>
|
||||
<strong>The Development environment shouldn't be enabled for deployed applications.</strong>
|
||||
It can result in displaying sensitive information from exceptions to end users.
|
||||
For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
|
||||
and restarting the app.
|
||||
</p>
|
||||
|
||||
@code{
|
||||
[CascadingParameter]
|
||||
private HttpContext? HttpContext { get; set; }
|
||||
|
||||
private string? RequestId { get; set; }
|
||||
private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
|
||||
|
||||
protected override void OnInitialized() =>
|
||||
RequestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier;
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
@page "/forms"
|
||||
@rendermode InteractiveServer
|
||||
@using System.ComponentModel.DataAnnotations
|
||||
|
||||
<PageTitle>Forms</PageTitle>
|
||||
|
||||
<div class="space-y-6 max-w-lg">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold tracking-tight">Forms Demo</h1>
|
||||
<p class="text-muted-foreground">All input components with DataAnnotations validation.</p>
|
||||
</div>
|
||||
|
||||
<EditForm EditContext="_editContext" OnSubmit="HandleSubmit" FormName="demo-form">
|
||||
<DataAnnotationsValidator />
|
||||
|
||||
<div class="space-y-4">
|
||||
<FormField Label="Full Name" For="name" Error="@GetError(nameof(Model.Name))">
|
||||
<TextInput Id="name" @bind-Value="Model.Name" Placeholder="Jane Doe" data-testid="input-name" />
|
||||
</FormField>
|
||||
|
||||
<FormField Label="Email" For="email" Error="@GetError(nameof(Model.Email))">
|
||||
<TextInput Id="email" Type="email" @bind-Value="Model.Email" Placeholder="jane@example.com" data-testid="input-email" />
|
||||
</FormField>
|
||||
|
||||
<FormField Label="Password" For="password" Error="@GetError(nameof(Model.Password))">
|
||||
<TextInput Id="password" Type="password" @bind-Value="Model.Password" Placeholder="••••••••" data-testid="input-password" />
|
||||
</FormField>
|
||||
|
||||
<FormField Label="Age" For="age" Error="@GetError(nameof(Model.Age))">
|
||||
<NumberInput Id="age" @bind-Value="Model.Age" Placeholder="25" Min="0" Max="150" data-testid="input-age" />
|
||||
</FormField>
|
||||
|
||||
<FormField Label="Birth Date" For="birthdate" Error="@GetError(nameof(Model.BirthDate))">
|
||||
<DateInput Id="birthdate" @bind-Value="Model.BirthDate" data-testid="input-birthdate" />
|
||||
</FormField>
|
||||
|
||||
<FormField Label="Preferred Time" For="preferredtime" Error="@GetError(nameof(Model.PreferredTime))">
|
||||
<TimeInput Id="preferredtime" @bind-Value="Model.PreferredTime" data-testid="input-time" />
|
||||
</FormField>
|
||||
|
||||
<FormField Label="Appointment" For="appointment" Error="@GetError(nameof(Model.Appointment))">
|
||||
<DateTimeInput Id="appointment" @bind-Value="Model.Appointment" data-testid="input-appointment" />
|
||||
</FormField>
|
||||
|
||||
<div class="flex gap-2 pt-2">
|
||||
<Button Type="submit" data-testid="btn-submit">Submit</Button>
|
||||
<Button Variant="@ButtonVariant.Outline" OnClick="HandleReset" data-testid="btn-reset">Reset</Button>
|
||||
<Button Variant="@ButtonVariant.Destructive" Disabled="true" data-testid="btn-disabled">Disabled</Button>
|
||||
</div>
|
||||
</div>
|
||||
</EditForm>
|
||||
|
||||
@if (_submitted)
|
||||
{
|
||||
<div data-testid="success-message"
|
||||
class="rounded-md border border-input bg-card p-4 text-sm text-card-foreground">
|
||||
<p class="font-medium">✓ Form submitted successfully</p>
|
||||
<p class="text-muted-foreground mt-1">Name: @_submittedName</p>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private FormModel Model { get; set; } = new();
|
||||
private EditContext _editContext = null!;
|
||||
private bool _submitted;
|
||||
private string _submittedName = "";
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
_editContext = new EditContext(Model);
|
||||
}
|
||||
|
||||
private string? GetError(string fieldName)
|
||||
{
|
||||
var field = _editContext.Field(fieldName);
|
||||
var messages = _editContext.GetValidationMessages(field);
|
||||
return messages.FirstOrDefault();
|
||||
}
|
||||
|
||||
private void HandleSubmit()
|
||||
{
|
||||
_submitted = false;
|
||||
|
||||
if (!_editContext.Validate())
|
||||
return;
|
||||
|
||||
_submittedName = Model.Name!;
|
||||
_submitted = true;
|
||||
}
|
||||
|
||||
private void HandleReset()
|
||||
{
|
||||
Model = new();
|
||||
_submitted = false;
|
||||
_editContext = new EditContext(Model);
|
||||
}
|
||||
|
||||
public class FormModel
|
||||
{
|
||||
[Required(ErrorMessage = "Name is required.")]
|
||||
[StringLength(100, MinimumLength = 2, ErrorMessage = "Name must be 2–100 characters.")]
|
||||
public string? Name { get; set; }
|
||||
|
||||
[Required(ErrorMessage = "Email is required.")]
|
||||
[EmailAddress(ErrorMessage = "Invalid email address.")]
|
||||
public string? Email { get; set; }
|
||||
|
||||
[Required(ErrorMessage = "Password is required.")]
|
||||
[StringLength(64, MinimumLength = 8, ErrorMessage = "Password must be 8–64 characters.")]
|
||||
public string? Password { get; set; }
|
||||
|
||||
[Required(ErrorMessage = "Age is required.")]
|
||||
[Range(1, 150, ErrorMessage = "Age must be between 1 and 150.")]
|
||||
public double? Age { get; set; }
|
||||
|
||||
[Required(ErrorMessage = "Birth date is required.")]
|
||||
public DateOnly? BirthDate { get; set; }
|
||||
|
||||
[Required(ErrorMessage = "Preferred time is required.")]
|
||||
public TimeOnly? PreferredTime { get; set; }
|
||||
|
||||
[Required(ErrorMessage = "Appointment is required.")]
|
||||
public DateTime? Appointment { get; set; }
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
@page "/"
|
||||
|
||||
<PageTitle>Home</PageTitle>
|
||||
|
||||
<div class="space-y-4">
|
||||
<h1 class="text-3xl font-bold tracking-tight">Welcome</h1>
|
||||
<p class="text-muted-foreground">This is the Enciphered Blazor UI Components demo app.</p>
|
||||
</div>
|
||||
@@ -0,0 +1,64 @@
|
||||
@page "/weather"
|
||||
@attribute [StreamRendering]
|
||||
|
||||
<PageTitle>Weather</PageTitle>
|
||||
|
||||
<h1>Weather</h1>
|
||||
|
||||
<p>This component demonstrates showing data.</p>
|
||||
|
||||
@if (forecasts == null)
|
||||
{
|
||||
<p><em>Loading...</em></p>
|
||||
}
|
||||
else
|
||||
{
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th aria-label="Temperature in Celsius">Temp. (C)</th>
|
||||
<th aria-label="Temperature in Farenheit">Temp. (F)</th>
|
||||
<th>Summary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach (var forecast in forecasts)
|
||||
{
|
||||
<tr>
|
||||
<td>@forecast.Date.ToShortDateString()</td>
|
||||
<td>@forecast.TemperatureC</td>
|
||||
<td>@forecast.TemperatureF</td>
|
||||
<td>@forecast.Summary</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
|
||||
@code {
|
||||
private WeatherForecast[]? forecasts;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
// Simulate asynchronous loading to demonstrate streaming rendering
|
||||
await Task.Delay(500);
|
||||
|
||||
var startDate = DateOnly.FromDateTime(DateTime.Now);
|
||||
var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
|
||||
forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
|
||||
{
|
||||
Date = startDate.AddDays(index),
|
||||
TemperatureC = Random.Shared.Next(-20, 55),
|
||||
Summary = summaries[Random.Shared.Next(summaries.Length)]
|
||||
}).ToArray();
|
||||
}
|
||||
|
||||
private class WeatherForecast
|
||||
{
|
||||
public DateOnly Date { get; set; }
|
||||
public int TemperatureC { get; set; }
|
||||
public string? Summary { get; set; }
|
||||
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user