Confirm?

Are you sure you want to proceed?
M
Michael Kaufman

Help Screen Design

Clone & Customize via AI

The Blazor Help Screen provides a searchable FAQ and a contact form with EditForm validation. Uses a Bootstrap accordion and Bootstrap form classes for layout and responsiveness.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Search box for filtering FAQs using an InputText bound oninput. - FAQ list rendered as a Bootstrap accordion with collapse toggles. - Contact form implemented with EditForm, DataAnnotationsValidator and ValidationMessage components. - Success state that shows an alert after form submission and resets the model. ## Key components - EditForm, DataAnnotationsValidator, ValidationMessage - InputText (search and form fields), InputTextArea - Bootstrap accordion markup (accordion, accordion-item, accordion-button) - Input group for the search box and Bootstrap form classes (form-control, btn, card) ## How it works - The searchQuery string is @bind-Value on the InputText with @bind-Value:event="oninput" so filtering runs as the user types. - FilteredFaqs evaluates against the in-memory allFaqs collection using case-insensitive Contains checks on Question and Answer. - The contact form model uses DataAnnotation attributes (Required, EmailAddress, StringLength) and the EditForm triggers HandleValidSubmit on valid submission. - HandleValidSubmit currently logs to console, flips formSubmitted to true and resets contactModel; server-side wiring is not implemented in this page. ## Styling - Uses Bootstrap utility and layout classes (container, row, col-lg-10, input-group, btn, card, form-control) for responsive layout. - A scoped HelpScreen.razor.css file tweaks accordion-button active and focus styles using CSS variables tied to Bootstrap theme. ## Reuse steps 1. Add the ContactFormModel class to the shared/models folder and reference System.ComponentModel.DataAnnotations. 2. Ensure Bootstrap and Font Awesome are loaded in the host _Layout or index.html for the input-group and icons to render. 3. Import Microsoft.AspNetCore.Components.Forms where needed (EditForm, InputText are in the default Blazor SDK). 4. Copy HelpScreen.razor and HelpScreen.razor.css into a Pages folder and register the route or link from navigation. 5. Replace the HandleValidSubmit stub with an injected service (email, support ticket API) and add server-side validation and anti-spam measures. ## Limitations & next steps - This is a single client-side page generated by Instruct UI and uses in-memory FAQ data; an API or database is required for dynamic content. - No backend email/ticket integration is provided; implement a server endpoint or email service and secure it with authentication. - Validation relies on DataAnnotations only; add server-side validation and error handling for robustness. - Consider accessibility improvements for accordion semantics and keyboard focus, plus localization for FAQ content.