mirror of
https://github.com/dotnet/skills.git
synced 2026-09-20 09:49:54 +08:00
198e58c983
* Add dotnet-blazor plugin and convert-blazor-server-to-webapp skill Add the dotnet-blazor plugin with 9 skills covering Blazor Web App development: - plan-ui-change: Plan and scaffold UI features in Blazor Web Apps - create-blazor-project: Create new Blazor projects with proper render mode setup - author-component: Author Razor components with parameters, events, lifecycle - coordinate-components: Share state across components using CascadingValueSource/scoped services - use-js-interop: Call JavaScript from Blazor and vice versa - fetch-and-send-data: HTTP data access with proper service patterns - configure-auth: Set up ASP.NET Core Identity and authorization in Blazor - collect-user-input: Build forms with EditForm, validation, and file uploads - support-prerendering: Handle prerendering lifecycle and state persistence Add convert-blazor-server-to-webapp skill to the dotnet-aspnet plugin for migrating .NET 7 Blazor Server apps to .NET 8+ Blazor Web App architecture. All 10 skills pass evaluation with quality improvements ranging from 12-50% and overfitting scores within acceptable thresholds. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * Update eng/allowed-external-deps.txt * Update .gitignore --------- Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
103 lines
5.3 KiB
YAML
103 lines
5.3 KiB
YAML
scenarios:
|
|
- name: "Event registration with custom validation"
|
|
setup: &blazor_project
|
|
commands:
|
|
- "dotnet new blazor --interactivity server --no-https --force"
|
|
prompt: |
|
|
I have an existing Blazor Web App with Interactive Server (per-page).
|
|
|
|
I need an interactive /register page for event registration:
|
|
- Attendee name (required)
|
|
- Email (required, valid email)
|
|
- Number of guests (0-5)
|
|
- Preferred session (Morning, Afternoon, Evening)
|
|
- Special dietary requirements (free text, optional)
|
|
|
|
Here's the catch: after the user fills everything in and clicks Register,
|
|
I need to check with the server whether that email is already registered
|
|
for this event. If it is, show an error message on the email field saying
|
|
"This email is already registered" — not a generic error, but a field-specific
|
|
error that appears right next to the email input. The user should be able to
|
|
change the email and try again.
|
|
|
|
Create a RegistrationService with a stub ValidateAsync method that returns
|
|
field-specific errors (simulate the email already being registered for a
|
|
hardcoded test email like "taken@example.com").
|
|
assertions:
|
|
- type: "file_exists"
|
|
path: "**/Register.razor"
|
|
- type: "file_contains"
|
|
path: "**/Register.razor"
|
|
value: "EditForm"
|
|
- type: "file_contains"
|
|
path: "**/Register.razor"
|
|
value: "ValidationMessage"
|
|
- type: "file_contains"
|
|
path: "**/Register.razor"
|
|
value: "DataAnnotationsValidator"
|
|
rubric:
|
|
- "Uses a custom validator component (or ValidationMessageStore directly) to display server-returned field-specific errors — the email duplicate error appears next to the email field via ValidationMessage, not as a generic message"
|
|
- "Model uses data annotation attributes for basic validation (Required, EmailAddress, Range) with DataAnnotationsValidator"
|
|
- "Submit handler calls the registration service, checks for server-returned errors, and displays them on the correct fields without losing the user's input"
|
|
- "The form lets the user correct the email and resubmit — errors clear when the field changes"
|
|
- "Uses InputText, InputNumber, InputSelect or InputRadioGroup for the respective fields"
|
|
timeout: 600
|
|
|
|
|
|
- name: "Multi-step booking form with cross-field validation"
|
|
setup: *blazor_project
|
|
prompt: |
|
|
I have a Blazor Web App with per-page interactivity (Server mode).
|
|
|
|
I need a /book-appointment page for scheduling medical appointments.
|
|
The form has two steps on the same page (not separate routes):
|
|
|
|
STEP 1 (always visible):
|
|
- Patient name (required)
|
|
- Email (required, valid format)
|
|
- Phone (required)
|
|
- Insurance provider (dropdown: Aetna, BlueCross, Cigna, UnitedHealth, None)
|
|
|
|
STEP 2 (appears after step 1 validation passes):
|
|
- Preferred doctor (dropdown: loaded from an AppointmentService)
|
|
- Date (required, must be in the future)
|
|
- Time slot (dropdown: available slots from AppointmentService based on doctor + date)
|
|
- Reason for visit (required, max 500 chars)
|
|
|
|
When the user clicks "Check Availability" between steps, call
|
|
AppointmentService.ValidatePatientAsync which checks server-side rules:
|
|
- If the email belongs to a patient with an outstanding balance, return
|
|
an error on the Email field: "Account has outstanding balance"
|
|
- If the insurance provider is "None" and the selected doctor doesn't
|
|
accept self-pay, return an error on the Doctor field: "Selected doctor
|
|
does not accept self-pay patients"
|
|
- If the selected time slot was just taken (race condition), return an
|
|
error on the TimeSlot field: "This slot is no longer available"
|
|
|
|
These server errors must appear next to the specific fields — not as
|
|
a generic error banner. The user should be able to correct the field
|
|
and try again without losing other form data.
|
|
|
|
Create stub AppointmentService that simulates these validations:
|
|
reject "taken@example.com" for balance, reject "None" insurance
|
|
with doctor "Dr. Smith", and reject timeslot "10:00 AM" as taken.
|
|
|
|
Make this page interactive with @rendermode InteractiveServer.
|
|
assertions:
|
|
- type: "file_exists"
|
|
path: "**/BookAppointment.razor"
|
|
- type: "file_contains"
|
|
path: "**/BookAppointment.razor"
|
|
value: "EditForm"
|
|
- type: "file_contains"
|
|
path: "**/BookAppointment.razor"
|
|
value: "ValidationMessage"
|
|
rubric:
|
|
- "Server-returned errors appear next to the specific field via ValidationMessage — uses ValidationMessageStore or equivalent to add field-level errors from the service response, not manual conditional divs"
|
|
- "After server validation failure, the user can change the flagged field and resubmit — errors clear on the relevant field without losing other form data"
|
|
- "Uses data annotation attributes for client-side validation (Required, EmailAddress, MaxLength, custom date validator) with DataAnnotationsValidator"
|
|
- "Multi-step progression — step 2 fields only appear after step 1 validates successfully, providing progressive disclosure"
|
|
- "Time slots load dynamically based on doctor and date selection — cascading dropdown behavior within the form"
|
|
timeout: 900
|
|
|