Confirm?

Are you sure you want to proceed?
B
Bharath M

Flight Schedule App with Booking

Clone & Customize via AI

This Blazor Flight Schedule module provides a paginated QuickGrid for listing flights, filtering by origin and destination, and booking via a modal form with validation. Bootstrap styling applied.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Paginated flight schedule table using QuickGrid - Column sorting and search filters for origin/destination - Modal booking form with client-side validation - EditForm, InputText, InputNumber, DataAnnotationsValidator, ValidationSummary - Custom modal and backdrop (Bootstrap classes) ## Key components - QuickGrid (with PropertyColumn, TemplateColumn) - EditForm with DataAnnotationsValidator - InputText, InputNumber - Bootstrap modal classes (`modal`, `container`, `btn`, `form-control`) - .razor.css for modal/backdrop styling ## How it works - Flight data shown in QuickGrid; supports sorting and filtering by text inputs - Pagination managed via Paginator and PaginationState - Clicking 'Book Now' opens modal bound to BookingModel, validated by EditForm and DataAnnotations - Booking form supports validation for name, email, phone, seats ## Styling - Uses Bootstrap grid and form control classes for responsive design - Custom CSS for modal backdrop - No external dependencies beyond Bootstrap ## Reuse steps 1. Add `Microsoft.AspNetCore.Components.QuickGrid` NuGet package 2. Register Bootstrap stylesheet in your project 3. Place model and page in your Blazor app 4. Update mock data with service/data source 5. Wire up booking action to backend/service ## Limitations & next steps - Demo only shows static mock flight data; connect real data and backend logic for booking - Integrate with identity/auth for user flow - Extend grid (sorting, paging) by linking to domain services - One page generated by Instruct UI; adapt for larger apps