dhtmlxScheduler с ASP.NET MVC
Это руководство описывает процесс создания планировщика с помощью ASP.NET и REST API на серверной стороне.
Если вас интересуют другие серверные интеграции с Scheduler, ознакомьтесь с этими руководствами:
- dhtmlxScheduler с ASP.NET Core
- dhtmlxScheduler с Node.js
- dhtmlxScheduler с PHP
- dhtmlxScheduler с PHP: Slim
- dhtmlxScheduler с PHP:Laravel
- dhtmlxScheduler с SalesForce LWC
- dhtmlxScheduler с Ruby on Rails
- dhtmlxScheduler с dhtmlxConnector
В этом примере мы используем ASP.NET MVC 5 вместе с контроллером Web API для реализации REST API и создания приложения с планировщиком. Для работы с базой данных будет использоваться Entity Framework. Разработка ведётся в среде Visual Studio.
Полный исходный код доступен на GitHub.
Шаг 1. Создание проекта
Запустите Visual Studio 2022 и выберите Create a new project.

Затем выберите "ASP.NET Web Application" и задайте имя DHX.Scheduler.Web. Если шаблон отсутствует, обратитесь к разделу Troubleshooting.


Выберите шаблон "Empty project" и отметьте опции MVC и Web API справа:

Шаг 2. Добавление планировщика на страницу
Создание контроллера
После создания пустого проекта следующим шагом будет добавление MVC-контроллера, который отобразит страницу с планировщиком.
Кликните правой кнопкой мыши по папке Controllers, выберите Add -> Controller. В открывшемся окне выберите MVC 5 Controller -> Empty и нажмите Add. Назовите контроллер "HomeController".

В HomeController уже присутствует метод Index() класса ActionResult, поэтому дополнительная логика не требуетс я. Нужно лишь добавить представление для этого метода.
using System.Web.Mvc;
namespace DHX.Scheduler.Web.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
}
Создание представления
Далее создайте страницу index. Перейдите в Views/Home и добавьте пустое представление с именем Index:

Откройте новое представление и вставьте следующий код:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width="device-width"" />
<title>Index</title>
<link href="https://cdn.dhtmlx.com/scheduler/edge/dhtmlxscheduler.css"
rel="stylesheet" type="text/css" />
<script src="https://cdn.dhtmlx.com/scheduler/edge/dhtmlxscheduler.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
// initializing scheduler
scheduler.init("scheduler_here", new Date(2022,0,15));
// initiating data loading
scheduler.load("/api/scheduler");
// initializing dataProcessor
var dp = scheduler.createDataProcessor("/api/scheduler");
// and attaching it to scheduler
dp.init(scheduler);
// setting the REST mode for dataProcessor
dp.setTransactionMode("REST");
});
</script>
</head>
<body>
<div id="scheduler_here" className="dhx_cal_container">
<div className="dhx_cal_navline">
<div className="dhx_cal_prev_button"> </div>
<div className="dhx_cal_next_button"> </div>
<div className="dhx_cal_today_button"></div>
<div className="dhx_cal_date"></div>
<div className="dhx_cal_tab" name="day_tab"></div>
<div className="dhx_cal_tab" name="week_tab"></div>
<div className="dhx_cal_tab" name="month_tab"></div>
</div>
<div className="dhx_cal_header"></div>
<div className="dhx_cal_data"></div>
</div>
</body>
</html>
Что здесь происходит:
- создаётся базовый макет страницы для приложения с планировщиком
- подключаются JS и CSS dhtmlx scheduler через CDN-ссылки
- создаётся сам планировщик на странице
Также планировщик настраивается для работы с RESTful API по адресу "/api/scheduler/" для загрузки данных и как основной маршрут:
scheduler.load("/api/scheduler");
// initializing dataProcessor
var dp = scheduler.createDataProcessor("/api/scheduler");
// and attaching it to scheduler
dp.init(scheduler);
// setting the REST mode for dataProcessor
dp.setTransactionMode("REST");
Реализация серверной части будет рассмотрена далее. Пока что вы можете запустить приложение и увидеть отображение планировщика.
