You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: blazor/tutorials/build-a-blazor-stay-reservation-app.md
+55-54Lines changed: 55 additions & 54 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,43 +1,43 @@
1
1
---
2
2
layout: post
3
-
title: Build a Blazor Stay Reservation App - Syncfusion
4
-
description: Step by step tutorial to build a Blazor Stay Reservation Application using Syncfusion Blazor components.
3
+
title: Build a Blazor stay reservation app - Syncfusion
4
+
description: Learn here about step-by-step tutorial to build a Blazor stay reservation application using Syncfusion Blazor components like Scheduler, Sidebar, and Toast.
5
5
platform: Blazor
6
-
component: Tutorials
6
+
control: Tutorials
7
7
documentation: ug
8
8
---
9
9
10
-
# Build a Blazor Stay Reservation App with Syncfusion® Blazor Components
10
+
# Build a Blazor stay reservation app with Syncfusion® Blazor components
11
11
12
-
In this tutorial, we'll walk through the process of building a "Stay Reservation" application. This demonstrates how to use the **Syncfusion<supstyle="font-size:70%">®</sup> Blazor Scheduler** component as the centerpiece of a booking system, complete with filtering, booking form and a responsive layout.
12
+
This tutorial explains how to build a stay reservation application. It demonstrates how to use the **Syncfusion<supstyle="font-size:70%">®</sup> Blazor Scheduler** component as the centerpiece of a booking system, with filtering, a booking form, and a responsive layout.
13
+
14
+
By the end of this tutorial, the reader will be able to:
15
+
* Set up a Blazor project with Syncfusion<supstyle="font-size:70%">®</sup> components.
16
+
* Configure the Blazor Scheduler for a reservation system.
17
+
* Manage application state using a dependency-injected service.
18
+
* Build a filterable sidebar with checkboxes and accordions.
19
+
* Combine multiple components to create a polished application.
13
20
14
-
By the end of this tutorial, you will have learned how to:
15
-
* Set up a Blazor project with Syncfusion<supstyle="font-size:70%">®</sup> components.
16
-
* Configure the Blazor Scheduler for a reservation system.
17
-
* Manage application state using a dependency-injected service.
18
-
* Build a filterable sidebar with Checkboxes and Accordions.
19
-
* Combine multiple components to create a polished, final application.
20
21
21
-
Let's get started!
22
22
23
23
## Prerequisites
24
24
25
25
*[System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
26
26
27
27
## Create the Blazor Web App
28
28
29
-
First, let's create a new Blazor Web App.
29
+
Create a new Blazor Web App.
30
30
31
31
```bash
32
32
dotnet new blazor -o StayReservation
33
33
cd StayReservation
34
34
```
35
35
36
-
Choose the "Blazor Web App" template. For this project, we'll use the **Interactive Server** render mode for simplicity.
36
+
Choose the "Blazor Web App" template. For this project, use the **Interactive Server** render mode for simplicity.
37
37
38
-
## Add and Configure Syncfusion<supstyle="font-size:70%">®</sup> Blazor Components
38
+
## Add and configure Syncfusion<supstyle="font-size:70%">®</sup> Blazor components
39
39
40
-
Next, we need to add the Syncfusion<supstyle="font-size:70%">®</sup> Blazor libraries to our project. We'll need packages for the Scheduler, navigation elements (like the Sidebar and Accordion), and various input components.
40
+
Next, add the Syncfusion<supstyle="font-size:70%">®</sup> Blazor libraries to the project. Packages are required for the Scheduler, navigation elements (such as Sidebar and Accordion), and input components.
41
41
42
42
Install the essential Syncfusion<supstyle="font-size:70%">®</sup> Blazor NuGet packages:
In your `Program.cs` file, register the Syncfusion<supstyle="font-size:70%">®</sup> Blazor service.
54
+
In `Program.cs`, register the Syncfusion<supstyle="font-size:70%">®</sup> Blazor service.
55
55
56
56
```csharp
57
57
// Add the following line before builder.Build()
58
58
builder.Services.AddSyncfusionBlazor();
59
59
```
60
60
61
-
2. **AddThemeandScriptReferences**
61
+
2. **Addthemeandscriptreferences**
62
62
63
-
Open `Components/App.razor`. WeneedtoaddtheSyncfusion<supstyle="font-size:70%">®</sup>themestylesheetandthenecessaryscriptreferencefor component interactivity. We'll use the modern `tailwind.css` theme.
63
+
Open `Components/App.razor`. AddtheSyncfusion<supstyle="font-size:70%">®</sup>themestylesheetandthescriptreferencefor component interactivity. The example uses the `tailwind.css` theme.
64
64
65
65
```html
66
66
<!DOCTYPE html>
@@ -86,9 +86,9 @@ Now, let's configure the app to recognize and style the Syncfusion<sup style="fo
86
86
</html>
87
87
```
88
88
89
-
3. **Add Namespace Imports**
89
+
3. **Add namespace imports**
90
90
91
-
To avoid having to add `@using` directives in every component, add the most common Syncfusion<sup style="font-size:70%">®</sup>namespacestoyour `_Imports.razor` file.
91
+
To avoid adding `@using` directives in each component, add the commonly used Syncfusion<sup style="font-size:70%">®</sup>namespacestothe `_Imports.razor` file.
92
92
93
93
```csharp
94
94
@usingStayReservation
@@ -101,7 +101,9 @@ Now, let's configure the app to recognize and style the Syncfusion<sup style="fo
101
101
@usingSyncfusion.Blazor.DropDowns
102
102
```
103
103
104
-
## Define the Data and State Management Service
104
+
## Define the data and state management service
105
+
106
+
Areal-worldappneedsawaytomanageitsdataandstate. Createan `AppointmentService` toactasacentralhubfor reservation data and UI state. Inject this service into components that need to share information.
105
107
106
108
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.
107
109
@@ -141,7 +143,7 @@ public class AppointmentData
141
143
}
142
144
```
143
145
144
-
Now, create the `AppointmentService.cs` in the `Data` folder. This service will hold the appointment list and references to our components.
146
+
Create `AppointmentService.cs` in the `Data` folder. This service holds the appointment list and references to components.
145
147
146
148
The complete code for `AppointmentService.cs` is available in the GitHub repository at the following link: [`AppointmentService.cs`](https://github.com/syncfusion/blazor-showcase-stay-reservation/blob/master/webapp/Stay-Reservation/Data/AppointmentService.cs). You may reuse the full code as needed.
147
149
@@ -169,14 +171,13 @@ Register this service as a singleton in `Program.cs`:
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.
176
+
The application has three main UI parts: the sidebar for calendar date navigation and filtering rooms (`Sidebar.razor`), the scheduler view (`Schedule.razor`), and the main page (`Index.razor`) that assembles them.
175
177
176
178
### The Filtering Sidebar (`Sidebar.razor`)
177
179
178
-
This component uses an `<SfSidebar>` to contain calendar and filters. An `<SfCalendar>`allows the user to select the date desired date in scheduler.
179
-
An `<SfAccordion>` organizes the filters, `<SfCheckBox>` component used to controls which floors are displayed. `<SfSlider>` is used to filter the price range.
180
+
This component uses an `<SfSidebar>` to contain the calendar and filters. An `<SfCalendar>` allows the user to select the desired date in the scheduler. An `<SfAccordion>` organizes the filters, `<SfCheckBox>` component which floors are displayed. `<SfSlider>` filters the price range.
180
181
181
182
```html
182
183
@using StayReservation.Data
@@ -242,15 +243,15 @@ When a checkbox is clicked, its state is updated in the `AppointmentService`. We
242
243
243
244
### The Scheduler View (`Schedule.razor`)
244
245
245
-
This is the core of our application. Here, we'll configure the `<SfSchedule>` component to display reservations grouped by floor.
246
+
This is the core of the application. Configure the `<SfSchedule>` component to display reservations grouped by floor.
246
247
247
-
First, let's create a new file: `Components/Pages/Schedule.razor`.
248
+
Create a new file: `Components/Pages/Schedule.razor`.
248
249
249
250
The Scheduler needs two main pieces of data:
250
251
1. A list of **resources**—in our case, the hotel floors.
251
252
2. A list of **events** (or appointments)—the actual reservations.
252
253
253
-
The appointment and resource data will come from `AppointmentService`.
254
+
The appointment and resource data come from `AppointmentService`.
254
255
255
256
The complete code for `Schedule.razor` is available in the GitHub repository at the following link: [`Schedule.razor`](https://github.com/syncfusion/blazor-showcase-stay-reservation/blob/master/webapp/Stay-Reservation/Components/Pages/Schedule.razor). You may reuse the full code as needed.
256
257
@@ -311,14 +312,14 @@ The complete code for `Schedule.razor` is available in the GitHub repository at
311
312
```
312
313
313
314
Key configuration points:
314
-
*`<ScheduleEventSettings>`: Binds the scheduler's events to the list in our`AppointmentService`.
315
-
*`<ScheduleGroup>`: We tell the scheduler to group by the resource named "Floors".
316
-
*`<ScheduleResource>`: 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.
317
-
*`<ScheduleTemplates>`: We use templates to customize the date header, cell, and resource header.
315
+
*`<ScheduleEventSettings>`: Binds the scheduler's events to the list in `AppointmentService`.
316
+
*`<ScheduleGroup>`: Groups by the resource named "Floors".
317
+
*`<ScheduleResource>`: Defines the "Floors" resource. This maps the `FloorId` field in `AppointmentData` to the `FloorId` in the`floorData` list, assigning colors and text to resource group headers.
318
+
*`<ScheduleTemplates>`: Uses templates to customize the date header, cell, and resource header.
318
319
319
320
## Assemble the Main Page
320
321
321
-
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.
322
+
Bring it together in the main `Index.razor` page. This component hosts the sidebar and the schedule, along with a header to control the UI.
322
323
323
324
Update `Components/Pages/Index.razor` with the following code:
324
325
@@ -346,11 +347,11 @@ Update `Components/Pages/Index.razor` with the following code:
346
347
</div>
347
348
```
348
349
349
-
## Implement the Filtering Logic
350
+
## Implement the filtering logic
350
351
351
-
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.
352
+
Connect the checkboxes in the sidebar to the data displayed in the scheduler. Since `AppointmentService`holds the state, detect changes to the checkbox and slider values, form the filter query, and update the resource data.
352
353
353
-
Refer the following code to implement the filtering logic in `Components/Pages/Sidebar.razor`:
354
+
Use the following code to implement the filtering logic in `Components/Pages/Sidebar.razor`:
354
355
355
356
The complete code for `Sidebar.razor` is available in the GitHub repository at the following link: [`Sidebar.razor`](https://github.com/syncfusion/blazor-showcase-stay-reservation/blob/master/webapp/Stay-Reservation/Components/Pages/Sidebar.razor). You may reuse the full code as needed.
356
357
@@ -425,16 +426,16 @@ The complete code for `Sidebar.razor` is available in the GitHub repository at t
BindtheScheduler's Editor Template to a custom form for creating and editing appointments. This form includes fields for the appointment subject, start and end times, and a drop-down list for selecting the room. The form is displayed when a user double-clicks an empty cell in the scheduler or an existing appointment, in a popup window.
434
435
435
-
Wecanvalidatetheformfieldsusingthe `ValidationMessage` component. The `ValidationMessage` componentdisplaysanerrormessagewhenthevalidationfails. The `ValidationMessage` componentisboundtothe `Subject` propertyofthe `AppointmentData` object. The `Subject` propertyisrequired, sothe `ValidationMessage` componentdisplaysanerrormessagewhenthe `Subject` propertyisempty.
0 commit comments