Easily Synchronize Blazor Resource Scheduler with RESTful Services
Tags: blazor, csharp, dotnet, webdev
Published: 2021-11-17 12:01:59

---
title: Easily Synchronize Blazor Resource Scheduler with RESTful Services
published: true
date: 2021-11-17 11:00:44 UTC
tags: blazor, csharp, dotnet, webdev
canonical_url: https://www.syncfusion.com/blogs/post/easily-synchronize-blazor-resource-scheduler-with-restful-services.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t3cj9geocalwcc4mwtcg.png
---

[RESTful services](https://en.wikipedia.org/wiki/Representational_state_transfer "Link to the Wikipedia page for Representational state transfer") have become the de facto standard for writing web applications. They help us expose resources on the internet using simple HTTP requests. REST (representational state transfer) is an architectural style that enables developers to create web services that are easy to build, read, and maintain. This approach allows the developers to focus on the business logic of their application instead of worrying about how data is transmitted over the network.

Our Syncfusion [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler "Link to the Blazor Scheduler") is a fully-featured calendar component. It allows users to manage their time efficiently. It facilitates easy resource scheduling, rescheduling appointments through editor pop-ups, drag and drop, and resizing actions.

This blog explains the steps to synchronize data between the Syncfusion Blazor Scheduler and RESTful services.

Let’s get started!

## Project setup

First, create a simple Blazor-hosted(WebAssembly) application. Refer to the [Getting started with Blazor ASP.NET Core-hosted apps in the Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-core-hosted "Documentation link to getting started with Blazor ASP.NET Core Hosted App in Visual Studio") page for the introduction and project creation steps.

The project will look like in the following screenshot.

![Created Blazor Server-Side Project](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Created-Blazor-Server-Side-Project.png)Now, refer to the [Adding a component package to the application](https://blazor.syncfusion.com/documentation/scheduler/getting-started#adding-component-package-to-the-application "Documentation link to adding component package to the application") page to add the Blazor Scheduler component to your application.

We are going to use Entity Framework Core and data migration commands to create an SQL database and table. So, install the [Microsoft.EntityFrameworkCore](https://www.nuget.org/packages/Microsoft.EntityFrameworkCore/ "Link to the Microsoft.EntityFrameworkCore NuGet package") and  [Microsoft.EntityFrameworkCore.SqlServer](https://www.nuget.org/packages/Microsoft.EntityFrameworkCore.SqlServer/ "Link to the Microsoft.EntityFrameworkCore.SqlServer NuGet package") NuGet packages to perform these actions in the server project.

## Creating models

Let’s create the required database models for the application.

Create a new folder from the project shared directory under the name **Models**.

![Create a new folder from the project shared directory under the name Models](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Create-a-new-folder-from-the-project-shared-directory-under-the-name-Models.png)

Then, create an event model class named **EventModel** inside the **Models** folder. Refer to the following code example.  
**EventModel.cs**

```csharp
public class EventModel
{
    public int Id { get; set; }
    public string Subject { get; set; }
    public DateTime? StartTime { get; set; }
    public DateTime? EndTime { get; set; }
    public string StartTimezone { get; set; }
    public string EndTimezone { get; set; }
    public string Location { get; set; }
    public string Description { get; set; }
    public bool? IsAllDay { get; set; }
    public bool? IsBlock { get; set; }
    public bool? IsReadOnly { get; set; }
    public int? FollowingID { get; set; }
    public int? RecurrenceID { get; set; }
    public string RecurrenceRule { get; set; }
    public string RecurrenceException { get; set; }
    public int? OwnerId { get; set; }
}
```

Now, create a resource model class named **ResourceModel** inside the **Models** folder_._

**ResourceModel.cs**

```csharp
public class ResourceModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Color { get; set; }
}
```

**Note: ** Refer to the [Create a data model](https://docs.microsoft.com/en-us/aspnet/core/data/ef-mvc/intro?view=aspnetcore-5.0#create-the-data-model "Documentation link to create the data model") documentation to learn more about EntityFramework data model creation.

## Creating a database and context

Here, we will create an SQL database based on the models in this application. Refer to the documentation on [creating the database](https://docs.microsoft.com/en-us/sql/relational-databases/databases/create-a-database?view=sql-server-ver15#SSMSProcedure "Documentation link to create a database using SQL Server Management Studio") and [tables](https://docs.microsoft.com/en-us/sql/relational-databases/tables/create-tables-database-engine?view=sql-server-ver15#using-table-designer "Documentation link to create a table using Table Designer") based on the models.

After creating the database, we have to add the resource table data to it to retrieve the resource initially. In this app, the local SQL database is named  **ScheduleData.mdf**  and is available under the **App\_Data** folder for reference.

The next step is to [creating a context for the database](https://docs.microsoft.com/en-us/aspnet/core/data/ef-mvc/intro?view=aspnetcore-5.0#create-the-database-context "Documentation link to create the database context"). Create a **SchedulerContext** class under the data folder in the server project. Refer to the following screenshot.

![Create a SchedulerContext class under the data folder in the server project](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Create-a-SchedulerContext-class-under-the-data-folder-in-the-server-project.png)In the **SchedulerContext** class,  configure the database models into a database table like in the following code example.

```csharp
public class SchedulerContext : DbContext
{
    public SchedulerContext(DbContextOptions<SchedulerContext> options) : base(options) { }

    public virtual DbSet<EventModel> EventModels { get; set; }
    public virtual DbSet<ResourceModel> ResourceModels { get; set; }

    protected override void OnModelCreating(ModelBuilder modelBuilder)
    {
        modelBuilder.Entity<EventModel>().ToTable("EventData");
        modelBuilder.Entity<ResourceModel>().ToTable("ResourceData");
    }
}
```

Thus, we have successfully created the database and its context.

## Configuring the database

Next, register the **SchedulerContext** class in the **startup** class of the **ConfigureServices** section.

Refer to the following code.

```csharp
services.AddDbContext<SchedulerContext>(context => context.UseSqlServer("<database connection string>"));
```

Now, we have successfully connected the app with the database.

## Adding API controllers

Then, we create API controllers to perform CRUD actions with the RESTful services. Create the **ScheduleController** and **ResourceController** APIs under the **Controllers** folder in the server project to easily retrieve, update, and remove events data in the database.

**ScheduleController.cs**

```csharp
[Route("api/[controller]")]
[ApiController]
public class ScheduleController : ControllerBase
{
    private readonly SchedulerContext _context;

    public ScheduleController(SchedulerContext context)
    {
        _context = context;
    }

    [HttpGet]
    public IEnumerable<EventModel> Get()
    {
        return _context.EventModels.ToList();
    }

    [HttpPost]
    public void Post([FromBody] EventModel eventModel)
    {
        if (ModelState.IsValid)
        {
            try
            {
                _context.EventModels.Add(eventModel);
                _context.SaveChanges();
            }
            catch
            {
                throw;
            }
        }
    }

    [HttpPut("{id}")]
    public void Put(int id, [FromBody] EventModel eventModel)
    {
        if (ModelState.IsValid)
        {
            try
            {
                _context.Entry(eventModel).State = EntityState.Modified;
                _context.SaveChanges();
            }
            catch
            {
                throw;
            }
        }
    }

    [HttpDelete("{id}")]
    public void Delete(int id)
    {
        if (ModelState.IsValid)
        {
            try
            {
                EventModel eventModel = _context.EventModels.Find(id);
                _context.EventModels.Remove(eventModel);
                _context.SaveChanges();
            }
            catch
            {
                throw;
            }
        }
    }

}
```

**ResourceController.cs**

```csharp
[Route("api/[controller]")]
[ApiController]
public class ResourceController : ControllerBase
{
    private readonly SchedulerContext _context;

    public ResourceController(SchedulerContext context)
    {
        _context = context;
    }

    [HttpGet]
    public IEnumerable<ResourceModel> Get()
    {
        return _context.ResourceModels.ToList();
    }
}
```

**Note:** Refer to the [Add Web API Controllers](https://docs.microsoft.com/en-us/aspnet/web-api/overview/data/using-web-api-with-entity-framework/part-2#add-web-api-controllers "Documentation link to add Web API Controllers") documentation to synchronize data between the app and server.

## Configure RESTful services into Blazor Scheduler

Finally, render the Syncfusion Blazor Scheduler component in the **index.razor** file in the client project with the RESTful API services. Use the [Data Manager](https://blazor.syncfusion.com/documentation/data/getting-started "Documentation link to getting Started with Blazor DataManager Component") to perform data processing between the Blazor Scheduler and RESTful services.

Refer to the following example code.

**Index.razor**

```js
@using BlazorScheduler.Shared.Models
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.Schedule

<SfSchedule TValue="EventModel" Width="100%" Height="650px" CurrentView="View.Month" SelectedDate="new DateTime(2021, 9, 1)">
    <ScheduleGroup Resources="@GroupData"></ScheduleGroup>
    <ScheduleResources>
        <ScheduleResource TItem="ResourceModel" TValue="int" Field="OwnerId" Title="Choose Owner" Name="Owners" IdField="Id" TextField="Name" ColorField="Color">
            <SfDataManager Url="/api/Resource" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>
        </ScheduleResource>
    </ScheduleResources>
    <ScheduleEventSettings TValue="EventModel">
        <SfDataManager Url="/api/Schedule" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>
    </ScheduleEventSettings>
</SfSchedule>

@code{
    private string[] GroupData = new string[] { "Owners" };
}
```

After synchronizing the RESTful services with the Blazor Scheduler, we can easily retrieve data from the RESTful services even at the initial load of the Blazor Scheduler.

For every CRUD action in the Blazor Scheduler, the data will properly synchronize with the database using the RESTful services.

![Synchronize Blazor Scheduler with RESTful Services](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Synchronize-Blazor-Scheduler-with-RESTful-Services.png)
<figcaption>Synchronize Blazor Scheduler with RESTful Services</figcaption>

## GitHub reference

You can check out the complete GitHub demo for [Synchronizing Blazor Scheduler events and resource data with RESTful services](https://github.com/SyncfusionExamples/synchronizing-blazor-scheduler-events-and-resource-data-in-restful-services "Link to synchronizing Blazor Scheduler events and resource data in RESTful Services demo on GitHub").

## Summary

Thanks for reading! This blog provided the easy steps to synchronize events and resource data in the Syncfusion [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler "Link to Blazor Scheduler") with RESTful services. This will help you integrate your app with RESTful services and enjoy its benefits. So, try out the steps in this blog post and leave your feedback in the comments section below.

[Syncfusion Essential Studio for Blazor](https://www.syncfusion.com/blazor-components "Link to the Syncfusion Blazor UI controls") offers over 65 high-performance, lightweight, and responsive UI components for the web, including file-format libraries, in a single package. Use them to enhance your app’s look!

For existing customers, the latest version is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "Link to license and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Link to the free evaluation of the Syncfusion Essential Studio") to check out the available features. Also, try out our other demos from this [GitHub](https://github.com/syncfusion "Link to the Syncfusion examples on GitHub") location.

You can also contact us through our [support forums](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents "Link to the Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/blazor-components "Link to Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [4 Easy Steps to Embed a JavaScript Control into a Blazor App](https://dev.to/syncfusion/4-easy-steps-to-embed-a-javascript-control-into-a-blazor-app-h6f "Link to 4 Easy Steps to Embed a JavaScript Control into a Blazor App blog")
- [Easy Steps to Synchronize JIRA Calendar Tasks with the Blazor Scheduler](https://dev.to/karthickramasamy08/easy-steps-to-synchronize-jira-calendar-tasks-with-the-blazor-scheduler-59ff-temp-slug-1504815 "Link to Easy Steps to Synchronize JIRA Calendar Tasks with the Blazor Scheduler blog")
- [Synchronize Google Calendar with Syncfusion Blazor Scheduler](https://dev.to/karthickramasamy08/how-to-synchronize-google-calendar-with-syncfusion-blazor-scheduler-2c6j-temp-slug-7714852 "Link to How to Synchronize Google Calendar with Syncfusion Blazor Scheduler blog")
- [Access Microsoft Graph Calendar Events with Syncfusion Blazor Scheduler](https://dev.to/karthickramasamy08/how-to-access-microsoft-graph-calendar-events-with-syncfusion-blazor-scheduler-gmo-temp-slug-5642119 "Link to How to Access Microsoft Graph Calendar Events with Syncfusion Blazor Scheduler blog")