Blazor 리소스 스케줄러를 RESTful 서비스와 쉽게 동기화

RESTful services은 웹 응용 프로그램을 작성하는 사실의 표준이 되었다.그것들은 우리가 간단한 HTTP를 사용하여 인터넷상의 자원을 공개하도록 도와준다.REST(representational state transfer)는 개발자가 구축, 읽기, 유지보수가 쉬운 웹 서비스를 만들 수 있도록 하는 아키텍처 양식이다.이런 방법은 데이터가 어떻게 네트워크를 통해 전송되는지 걱정하지 않고 개발자들이 응용 프로그램의 업무 논리에 전념할 수 있게 한다.
Syncfusion Blazor Scheduler은 모든 기능이 포함된 캘린더 구성 요소입니다.사용자가 시간을 효율적으로 관리할 수 있습니다.편집기 팝업 창, 드래그, 크기 조정 등을 통해 자원 스케줄링, 데이트 재배치를 편리하게 할 수 있다.
이 블로그는 Syncfusion Blazor 스케줄러와 RESTful 서비스 간에 데이터를 동기화하는 절차를 설명합니다.
우리 시작합시다!

프로젝트 설정

먼저 간단한 Blazor 호스팅(WebAssembly) 응용 프로그램을 만듭니다.소개 및 프로젝트 작성 절차는 Getting started with Blazor ASP.NET Core-hosted apps in the Visual Studio페이지를 참조하십시오.
이 항목은 아래 화면 캡처와 같습니다.
이제 Blazor 스케줄러 구성 요소를 응용 프로그램에 추가하려면 페이지를 참조하십시오.
솔리드 프레임워크 코어 및 데이터 마이그레이션 명령을 사용하여 SQL 데이터베이스와 테이블을 작성합니다.따라서 서버 프로젝트에서 이러한 작업을 수행할 수 있도록 Adding a component package to the application 및 Microsoft.EntityFrameworkCore NuGet 패키지를 설치합니다.

마이크로소프트.EntityFrameworkCore。SqlServer 모델 생성하기

응용 프로그램에 필요한 데이터베이스 모델을 만듭니다.
프로젝트 공유 디렉토리에서 Models라는 새 폴더를 생성합니다.

그런 다음 Models 폴더에 EventModel이라는 이벤트 모델 클래스를 생성합니다.아래의 코드 예시를 참고하시오.
이벤트 모델.대테러 엘리트

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; }
}

이제 Models 폴더에 ResourceModel이라는 자원 모델 클래스를 만듭니다
자원 모델.대테러 엘리트

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

*참고: * EntityFramework 데이터 모델 생성에 대한 자세한 내용은 설명서를 참조하십시오.

데이터 모델 생성 데이터베이스 및 컨텍스트 작성

여기서는 이 응용 프로그램의 모델을 기반으로 SQL 데이터베이스를 만듭니다.모델 기반 및 creating the database 설명서를 참조하십시오.
데이터베이스를 만든 후, 우리는 자원을 최초로 검색할 수 있도록 자원표 데이터를 추가해야 한다.이 응용 프로그램에서 로컬 SQL 데이터베이스의 이름은 ScheduleData입니다.mdf 및 App 데이터 폴더에서 확인할 수 있습니다.
다음은 tables입니다.서버 항목의 데이터 폴더 아래에 SchedulerContext 클래스를 만듭니다.아래 화면 캡처를 참조하십시오.
creating a context for the database은 SchedulerContext 클래스에서 데이터베이스 모델을 데이터베이스 테이블로 설정합니다. 아래의 코드 예시와 같습니다.

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");
    }
}

그래서 우리는 데이터베이스와 상하문을 성공적으로 만들었다.

구성 데이터베이스

그런 다음 Configure Services 섹션의 startup 클래스에 SchedulerContext 클래스를 등록합니다.
다음 코드를 참조하십시오.

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

현재, 우리는 이미 응용 프로그램과 데이터베이스를 성공적으로 연결했다.

API 컨트롤러 추가

그런 다음 API 컨트롤러를 생성하여 RESTful 서비스로 CRUD 작업을 수행합니다.서버 항목의 Controllers 폴더 아래에 Schedule Controller 및 ResourceController API를 생성하여 데이터베이스에서 이벤트 데이터를 손쉽게 검색, 업데이트 및 삭제할 수 있습니다.
스케줄러대테러 엘리트

[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;
            }
        }
    }

}

자원 통제원.대테러 엘리트

[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();
    }
}

참고: 어플리케이션과 서버 간의 데이터를 동기화하려면 설명서를 참조하십시오.

웹 API 컨트롤러 추가 Blazor 스케줄러에서 RESTful 서비스 구성

마지막으로 색인에 Syncfusion Blazor 스케줄러 구성 요소가 표시됩니다.RESTful API 서비스를 사용하여 클라이언트 프로젝트에 razor 파일을 생성합니다. 을 사용하여 Blazor 스케줄러와 RESTful 서비스 사이에서 데이터 처리를 실행합니다.
다음 예제 코드를 참조하십시오.
색인면도칼

@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" };
}

RESTful 서비스와 Blazor 스케줄러를 동기화한 후 Blazor 스케줄러의 초기 부하에서도 RESTful 서비스에서 데이터를 쉽게 검색할 수 있습니다.
Blazor 스케줄러의 모든 CRUD 작업에 대해 데이터는 RESTful 서비스를 사용하여 데이터베이스와 정확하게 동기화됩니다.
Data Manager
Blazor 스케줄러와 RESTful 서비스 동기화

GitHub 참조

의 전체 GitHub 데모를 볼 수 있습니다.

Blazor 스케줄러 이벤트 및 리소스 데이터를 RESTful 서비스와 동기화 요약

읽어주셔서 감사합니다!이 블로그는 Syncfusion 의 이벤트와 자원 데이터를 RESTful 서비스와 동기화하는 간단한 절차를 제공합니다.이렇게 하면 RESTful 서비스와 어플리케이션을 통합하고 이점을 누릴 수 있습니다.그래서 이 블로그의 절차를 시도해 보고 다음 평론 부분에 피드백을 남겨주세요.
Blazor Scheduler은 하나의 소프트웨어 패키지에서 65여 개의 고성능, 경량, 응답이 빠른 웹 UI 구성 요소를 제공하는데, 파일 형식 라이브러리를 포함한다.그것들을 사용하여 응용 프로그램의 외관을 강화합니다!
기존 고객의 경우 Syncfusion Essential Studio for Blazor페이지에서 최신 버전을 다운로드할 수 있습니다.Syncfusion 고객이 아닌 경우 사용 가능한 기능을 보려면 30일간 License and Downloads을 사용하십시오.또한 이 free trial에서 다른 프레젠테이션을 시도해 보십시오.
또한 GitHub, support forums 또는 Direct-Trac을 통해 문의하실 수 있습니다.우리는 언제든지 기꺼이 당신을 돕겠습니다!

피드백 포털 관련 블로그