• Material 3
  • Fluent
  • Fluent 2
  • Bootstrap 5
  • Tailwind CSS
  • High Contrast
  • Fluent 2 High Contrast
Preferences
Mode Selection
Touch
Mouse
Theme Selection
Theme Mode
Localization
*Translated by Google Translator.
Currency

Example of Ticket Booking in ASP.NET Core Diagram Control

This sample implements a functional movie ticket booking interface using the Syncfusion® ASP.NET Core Diagram component, providing an intuitive visual representation of a cinema hall's seating arrangement with real-time price updates and a complete booking workflow.

DEMO
SOURCE

F1: The Movie

| Velvet Aurora Cinematheque

  • 11:50 AM
    4K DOLBY ATMOS
  • 02:25 PM
    4K DOLBY ATMOS
  • 6:20 PM
    4K DOLBY ATMOS
  • 9:15 PM
    4K DOLBY ATMOS
Available
Selected
Booked
$0
0 Tickets Selected

This interactive cinema seat booking experience begins with users selecting a showtime, which dynamically updates the seating layout to reflect real-time availability. Users can highlight and select seats (up to 10 within a single tier), while the booking summary panel instantly updates prices and fees. Tooltip provide seat details, and a "Proceed" button leads to a confirmation screen with a unique booking ID.

Transform your ASP.NET Core web apps today with Syncfusion® ASP.NET Core components
100+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE
opens in a new tab