+
+ -
diff --git a/blazor/tutorials/build-a-blazor-stay-reservation-app.md b/blazor/tutorials/build-a-blazor-stay-reservation-app.md
new file mode 100644
index 0000000000..03296ba1a7
--- /dev/null
+++ b/blazor/tutorials/build-a-blazor-stay-reservation-app.md
@@ -0,0 +1,601 @@
+---
+layout: post
+title: Build a Blazor Stay Reservation App - Syncfusion
+description: Step by step tutorial to build a Blazor Stay Reservation Application using Syncfusion Blazor components.
+platform: Blazor
+component: Tutorials
+documentation: ug
+---
+
+# Build a Blazor Stay Reservation App with Syncfusion Blazor Components
+
+In this tutorial, we'll walk through the process of building a "Stay Reservation" application. This demonstrates how to use the **Syncfusion Blazor Scheduler** component as the centerpiece of a booking system, complete with filtering, booking form and a responsive layout.
+
+By the end of this tutorial, you will have learned how to:
+* Set up a Blazor project with Syncfusion components.
+* Configure the Blazor Scheduler for a reservation system.
+* Manage application state using a dependency-injected service.
+* Build a filterable sidebar with Checkboxes and Accordions.
+* Combine multiple components to create a polished, final application.
+
+Let's get started!
+
+## Prerequisites
+
+* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
+
+## Create the Blazor Web App
+
+First, let's create a new Blazor Web App.
+
+```bash
+dotnet new blazor -o StayReservation
+cd StayReservation
+```
+
+Choose the "Blazor Web App" template. For this project, we'll use the **Interactive Server** render mode for simplicity.
+
+## Add and Configure Syncfusion Blazor Components
+
+Next, we need to add the Syncfusion Blazor libraries to our project. We'll need packages for the Scheduler, navigation elements (like the Sidebar and Accordion), and various input components.
+
+Install the essential Syncfusion Blazor NuGet packages:
+
+```bash
+dotnet add package Syncfusion.Blazor.Schedule
+dotnet add package Syncfusion.Blazor.Notifications
+dotnet add package Syncfusion.Blazor.Themes
+```
+
+Now, let's configure the app to recognize and style the Syncfusion components.
+
+1. **Register Syncfusion Services**
+
+ In your `Program.cs` file, register the Syncfusion Blazor service.
+
+ ```csharp Program.cs
+ // Add the following line before builder.Build()
+ builder.Services.AddSyncfusionBlazor();
+ ```
+
+2. **Add Theme and Script References**
+
+ Open `Components/App.razor`. We need to add the Syncfusion theme stylesheet and the necessary script reference for component interactivity. We'll use the modern `tailwind.css` theme.
+
+ ```html Components/App.razor
+
+
+
+
+
+
+
Stay Reservation ++ + + + + + + + + + + ... + + + ``` + +3. **Add Namespace Imports** + + To avoid having to add `@using` directives in every component, add the most common Syncfusion namespaces to your `_Imports.razor` file. + + ```csharp _Imports.razor + @using StayReservation + @using StayReservation.Components + @using Syncfusion.Blazor.Schedule + @using Syncfusion.Blazor.Navigations + @using Syncfusion.Blazor.Buttons + @using Syncfusion.Blazor.Calendars + @using Syncfusion.Blazor.Inputs + @using Syncfusion.Blazor.DropDowns + ``` + +## Define the Data and State Management Service + +A real-world app needs a way to manage its data and state. For this, we'll create an `AppointmentService` to act as a central hub for our reservation data and UI state. This service will be injected into the components that need to share information. + +First, define your data model in `Data/AppointmentData.cs`: + +```csharp Data/AppointmentData.cs +public class AppointmentData +{ + public int Id { get; set; } + public string Subject { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public int? FloorId { get; set; } // Represents the resource + // Add other relevant properties like notes, guest name, etc. +} +``` + +Now, create the `AppointmentService.cs` in the `Data` folder. This service will hold the appointment list and references to our components. + +```csharp Data/AppointmentService.cs +public class AppointmentService +{ + // Holds all reservation data + public List appointmentData { get; set; } = new List (); + + // References to UI components to allow interaction + public SfSchedule ScheduleRef { get; set; } + public SfSidebar SidebarRef { get; set; } + + // State for filters + public DateTime CurrentDate { get; set; } = DateTime.Now; + public bool SelectAllChecked { get; set; } = true; + public bool GroundFloorChecked { get; set; } = true; + // ... add bools for other floors +} +``` + +Register this service as a singleton in `Program.cs`: + +```csharp Program.cs +builder.Services.AddSingleton (); +``` + +## Build the UI Components + +Our application has three main UI parts: the sidebar for calendar date navigation and filtering the rooms (`Sidebar.razor`), the scheduler view (`Schedule.razor`), and the main page (`Index.razor`) that puts it all together. + +### The Filtering Sidebar (`Sidebar.razor`) + +This component uses an ` ` to contain calendar and filters. An ` `allows the user to select the date desired date in scheduler. +An ` ` organizes the filters, ` ` component used to controls which floors are displayed. ` ` is used to filter the price range. + +```html Components/Pages/Sidebar.razor +@using StayReservation.Data +@inject AppointmentService Service + + + + +``` + +When a checkbox is clicked, its state is updated in the `AppointmentService`. We'll use this shared state in our main page to filter the floor resources shown in the scheduler. + +### The Scheduler View (`Schedule.razor`) + +This is the core of our application. Here, we'll configure the `+ + ++ +++ ++ ++ ++ ++++++ ++ ++ + ++ ++++ + ++ + + ++ +++++ ++ ` component to display reservations grouped by floor. + +First, let's create a new file: `Components/Pages/Schedule.razor`. + +The Scheduler needs two main pieces of data: +1. A list of **resources**—in our case, the hotel floors. +2. A list of **events** (or appointments)—the actual reservations. + +The appointment and resource data will come from `AppointmentService`. + +```html Components/Pages/Schedule.razor +@inject AppointmentService Service + + ++ +``` + +Key configuration points: +* `+ ++ + + + ++ + + ++ ++ + ++ ++++ @context.Date.ToString("dd",CultureInfo.InvariantCulture) +++ @context.Date.ToString("ddd",CultureInfo.InvariantCulture) +++ @if ((ElementType)(context as TemplateContext).Type == ElementType.MonthCells) + { + ++ $@GetRoomPrice((context as TemplateContext)?.GroupIndex ?? 0) ++ } ++ @{ + var resourceData = (context as TemplateContext).ResourceData as ResourceData; + +++ } +++@(resourceData.FloorText)+++@(resourceData.RoomText)+@(resourceData.Description)+`: Binds the scheduler's events to the list in our `AppointmentService`. +* ` `: We tell the scheduler to group by the resource named "Floors". +* ` `: We define our "Floors" resource. This maps the `FloorId` field in our `AppointmentData` to the `FloorId` in our `floorData` list, automatically assigning colors and text to the resource groups headers. +* ` `: We use templates to customize the date header, cell, and resource header. + +## Assemble the Main Page + +Now, let's bring it all together in the main `Index.razor` page. This component will host the sidebar and the schedule, along with a header to control the UI. + +Update `Components/Pages/Index.razor` with the following code: + +```html Components/Pages/Index.razor +@page "/" + + ++``` + +## Implement the Filtering Logic + +We need to connect the checkboxes in the sidebar to the data displayed in the scheduler. Since we're using our `AppointmentService` to hold the state, we can detect changes to the checkbox values and re-filter the scheduler's resource data. Can bind the change event to checkbox and sliders to form the filter query and update the resource data. + +Refer the following code to implement the filtering logic in `Components/Pages/Sidebar.razor`: +```csharp Components/Pages/Sidebar.razor +@code { + // ... existing code ... + + public void FloorHandler() + { + dynamic predicate = null; + if (Service.GroundFloorChecked) + { + if (predicate != null) + { + predicate = predicate.Or("Id", "equal", Convert.ToInt32(Service.GroundFloorId)); + } + else + { + predicate = new WhereFilter() { Field = "Id", Operator = "equal", value = Convert.ToInt32(Service.GroundFloorId) }; + } + } + if (Service.FirstFloorChecked) + { + if (predicate != null) + { + predicate = predicate.Or("Id", "equal", Convert.ToInt32(Service.FirstFloorId)); + } + else + { + predicate = new WhereFilter() { Field = "Id", Operator = "equal", value = Convert.ToInt32(Service.FirstFloorId) }; + } + } + if (Service.SecondFloorChecked) + { + if (predicate != null) + { + predicate = predicate.Or("Id", "equal", Convert.ToInt32(Service.SecondFloorId)); + } + else + { + predicate = new WhereFilter() { Field = "Id", Operator = "equal", value = Convert.ToInt32(Service.SecondFloorId) }; + } + } + if (Service.ThirdFloorChecked) + { + if (predicate != null) + { + predicate = predicate.Or("Id", "equal", Convert.ToInt32(Service.ThirdFloorId)); + } + else + { + predicate = new WhereFilter() { Field = "Id", Operator = "equal", value = Convert.ToInt32(Service.ThirdFloorId) }; + } + } + if (Service.FourthFloorChecked) + { + if (predicate != null) + { + predicate = predicate.Or("Id", "equal", Convert.ToInt32(Service.FourthFloorId)); + } + else + { + predicate = new WhereFilter() { Field = "Id", Operator = "equal", value = Convert.ToInt32(Service.FourthFloorId) }; + } + } + if (predicate == null) + { + predicate = new WhereFilter() { Field = "Id", Operator = "notequal", value = Convert.ToInt32(Service.GroundFloorId) }.And("Id", "notequal", Convert.ToInt32(Service.FirstFloorId)).And("Id", "notequal", Convert.ToInt32(Service.SecondFloorId)).And("Id", "notequal", Convert.ToInt32(Service.ThirdFloorId)).And("Id", "notequal", Convert.ToInt32(Service.FourthFloorId)); + } + Service.ResourceQuery = new Query().Where(predicate); + Service.SchedulerPageRef?.StateChanged(); + } +``` + +Now, whenever a user clicks a checkbox, it triggers the `OnChange` event, which calls the `FloorHandler` method. This method updates the `ResourceQuery` property on the `Service` object, which is used to filter the resources in the scheduler. The `StateChanged` method is called to refresh the scheduler with the new resource data. + +Build and run the app by executing the `dotnet watch run`command in the command shell from the `StayReservation` folder. + +## Implement the Appointment Booking form +Bind the Scheduler's Editor Template to a custom form for creating and editing appointments. This form will include fields for the appointment's subject, start and end times, and a dropdown list for selecting the room. The form will be displayed when a user double clicks on an empty cell in the scheduler or on an existing appointment. The form will be displayed in a popup window. + +We can validate the form fields using the `ValidationMessage` component. The `ValidationMessage` component displays an error message when the validation fails. The `ValidationMessage` component is bound to the `Subject` property of the `AppointmentData` object. The `Subject` property is required, so the `ValidationMessage` component displays an error message when the `Subject` property is empty. + +We can apply the following code to the `Schedule.razor` file to create the custom form. + +```html Components/Pages/Schedule.razor ++ +BookmyRooms
++ ++
+ Hi, John David
+ + + ++ +``` +More details about editor template can be found in the [Editor Template](https://blazor.syncfusion.com/documentation/scheduler/editor-template#customizing-event-editor-using-template) documentation. + +## Adding Toast Notifications + +Integrate `SfToast` for user notifications throughout the application. When a user creates or deletes a reservation, a toast notification will appear. + +```csharp ++ ++ ++++++ + + @{ + if (UpdateStartTime) + { + (context as AppointmentData).StartTime = (context as AppointmentData).StartTime.AddHours(12); + (context as AppointmentData).EndTime = (context as AppointmentData).EndTime.AddHours(12); + UpdateStartTime = false; + } + } +++ ++ +++ ++ + + @{ + if (IsFloorDropDownChanged) + { + (context as AppointmentData).RoomId = Service.RoomsDdlValue; + IsFloorDropDownChanged = false; + } + } +++ ++ + + @{ + TimeSpan differenceInDays = (context as AppointmentData).EndTime.Subtract((context as AppointmentData).StartTime); + int noOfDays = Convert.ToInt32(differenceInDays.TotalDays); + (context as AppointmentData).Price = (Service.RoomPrice * noOfDays).ToString(); + } +++ + @{ + TimeSpan difference = (context as AppointmentData).EndTime.Subtract((context as AppointmentData).StartTime); + int totalDays = Convert.ToInt32(difference.TotalDays); + (context as AppointmentData).Nights = totalDays; + } +++ +++ +++ + @{ + if (IsStartTimeUpdated || IsintialLoad) + { + if((context as AppointmentData).Id < 1) + { + (context as AppointmentData).EndTime = (context as AppointmentData).StartTime.AddDays(1); + IsStartTimeUpdated = false; + IsintialLoad = false; + } + + } + } +++ ++ +++ + + @{ + if (IsProofDropDownChanged) + { + (context as AppointmentData).Proof = Service.ProofDdlValue; + IsProofDropDownChanged = false; + } + + } +++ ++ + + +++ + +++ + +++ + + +``` + +We can bind the `OnActionBegin` event of the `SfSchedule` component to a method that will handle the toast notifications. + +```csharp + public async Task OnActionBegin(ActionEventArgs+ args) + { + bool availability = true; + if (args.ActionType == ActionType.EventCreate || args.ActionType == ActionType.EventChange || args.ActionType == ActionType.EventRemove) + { + var records = args.AddedRecords ?? args.ChangedRecords ?? args.DeletedRecords; + if (records == null) + { + return; + } + availability = await Service.ScheduleRef.IsSlotAvailableAsync(records.First()); + if (availability) + { + if (args.ActionType == ActionType.EventCreate) + { + Service.ToastContent = "Reservation booked successfully"; + Service.ToastObj.CssClass = "e-toast-success"; + StateChanged(); + await Service.ToastObj.ShowAsync(); + } + else if (args.ActionType == ActionType.EventChange) + { + Service.ToastContent = "Reservation updated successfully"; + Service.ToastObj.CssClass = "e-toast-success"; + StateChanged(); + await Service.ToastObj.ShowAsync(); + } + else if (args.ActionType == ActionType.EventRemove) + { + Service.ToastContent = "Reservation removed successfully"; + Service.ToastObj.Content= "Reservation removed successfully"; + Service.ToastObj.CssClass = "e-toast-success"; + StateChanged(); + await Service.ToastObj.ShowAsync(); + } + } + else + { + Service.ToastContent = "Room not available for reservation on the selected Dates."; + Service.ToastObj.CssClass = "e-toast-warning"; + StateChanged(); + await Service.ToastObj.ShowAsync(); + } + } + args.Cancel = !availability; + } +``` + +## GitHub and demo references +You can find the complete code for this example on our [GitHub repository](https://github.com/syncfusion/blazor-showcase-stay-reservation). + +You can try the demo of this example in [this link](https://blazor.syncfusion.com/showcase/stay-reservation). + +## Summary + +We've successfully built a functional and interactive stay reservation application. We've seen how to compose a complex UI by combining multiple Syncfusion Blazor components like the **Scheduler**, **Sidebar**, **AppBar**, **Accordion**, **Inputs**, and **Dropdowns**. + +Most importantly, we've implemented a clean state management pattern using a singleton service, allowing our components to communicate and share data seamlessly. This architecture is scalable and makes the application easy to maintain and extend with new features.