reactjs - 如何使用 Syncfusion React Scheduler 组件向服务器发送发布请求？

Question

我正在使用 syncfusion-react-scheduler 包并尝试在将事件添加到日历（没有外部按钮）并将事件添加到我的数据库时做出带有反应的发布请求。我想收到你们的解决方案，非常感谢！

Answer 1

来自 Syncfusion 支持的问候..！

我们已经根据您的共享查询准备了一个 CRUD 示例“<em>尝试在我将事件添加到日历（没有外部按钮）并将事件添加到我的数据库时做出反应的发布请求”，使用 UrlAdaptor 执行 CRUD 操作在调度程序约会上，可以从以下链接下载。

服务：https ://www.syncfusion.com/downloads/support/directtrac/308326/ze/Service2137417074 示例：https ://stackblitz.com/edit/react-scheduler-crud-sample?file= index.js UGlink：https://ej2.syncfusion.com/react/documentation/schedule/data-binding/#scheduler-crud-actions

服务器端片段：

ScheduleDataDataContext db = new ScheduleDataDataContext();
public ActionResult Index()
{
    return View();
}
public JsonResult LoadData(Params param)  // Here we get the Start and End Date and based on that can filter the data and return to Scheduler
{
    var data = db.ScheduleEventDatas.Where(app => (app.StartTime >= param.StartDate && app.StartTime <= param.EndDate) || (app.RecurrenceRule != null && app.RecurrenceRule != "")).ToList();  // Here filtering the events based on the start and end date value.
    return Json(data, JsonRequestBehavior.AllowGet);
}
public class Params
{
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
}
[HttpPost]
public JsonResult UpdateData(EditParams param)
{
    if (param.action == "insert" || (param.action == "batch" && param.added != null)) // this block of code will execute while inserting the appointments
    {
        var value = (param.action == "insert") ? param.value : param.added[0];
        int intMax = db.ScheduleEventDatas.ToList().Count > 0 ? db.ScheduleEventDatas.ToList().Max(p => p.Id) : 1;
        DateTime startTime = Convert.ToDateTime(value.StartTime);
       DateTime endTime = Convert.ToDateTime(value.EndTime);
        ScheduleEventData appointment = new ScheduleEventData()
        {
            Id = intMax + 1,
            StartTime = startTime,
            EndTime = endTime,
            Subject = value.Subject,
            Location = value.Location,
            Description = value.Description,
            IsAllDay = value.IsAllDay,
            StartTimezone = value.StartTimezone,
            EndTimezone = value.EndTimezone,
            RecurrenceRule = value.RecurrenceRule,
            RecurrenceID = value.RecurrenceID,
            RecurrenceException = value.RecurrenceException,
            GroupID = value.GroupID
        };
        db.ScheduleEventDatas.InsertOnSubmit(appointment);
        db.SubmitChanges();
    }
    if (param.action == "update" || (param.action == "batch" && param.changed != null)) // this block of code will execute while updating the appointment
    {
        var value = (param.action == "update") ? param.value : param.changed[0];
        var filterData = db.ScheduleEventDatas.Where(c => c.Id == Convert.ToInt32(value.Id));
        if (filterData.Count() > 0)
        {
            DateTime startTime = Convert.ToDateTime(value.StartTime);
            DateTime endTime = Convert.ToDateTime(value.EndTime);
            ScheduleEventData appointment = db.ScheduleEventDatas.Single(A => A.Id == Convert.ToInt32(value.Id));
            appointment.StartTime = startTime;
            appointment.EndTime = endTime;
            appointment.StartTimezone = value.StartTimezone;
            appointment.EndTimezone = value.EndTimezone;
            appointment.Subject = value.Subject;
            appointment.Location = value.Location;
            appointment.Description = value.Description;
            appointment.IsAllDay = value.IsAllDay;
            appointment.RecurrenceRule = value.RecurrenceRule;
            appointment.RecurrenceID = value.RecurrenceID;
            appointment.RecurrenceException = value.RecurrenceException;
            appointment.GroupID = value.GroupID;
        }
        db.SubmitChanges();
    }
    if (param.action == "remove" || (param.action == "batch" && param.deleted != null)) // this block of code will execute while removing the appointment
    {
        if (param.action == "remove")
        {
            int key = Convert.ToInt32(param.key);
            ScheduleEventData appointment = db.ScheduleEventDatas.Where(c => c.Id == key).FirstOrDefault();
            if (appointment != null) db.ScheduleEventDatas.DeleteOnSubmit(appointment);
        }
        else
        {
            foreach (var apps in param.deleted)
            {
                ScheduleEventData appointment = db.ScheduleEventDatas.Where(c => c.Id == apps.Id).FirstOrDefault();
                if (apps != null) db.ScheduleEventDatas.DeleteOnSubmit(appointment);
            }
        }
        db.SubmitChanges();
    }
    var data = db.ScheduleEventDatas.ToList();
    return Json(data, JsonRequestBehavior.AllowGet);
}

public class EditParams
{
    public string key { get; set; }
    public string action { get; set; }
    public List<ScheduleEventData> added { get; set; }
    public List<ScheduleEventData> changed { get; set; }
    public List<ScheduleEventData> deleted { get; set; }
    public ScheduleEventData value { get; set; }
}

客户端片段：

this.dataManger = new DataManager({
  url: "http://localhost:54738/Home/LoadData", // Here need to mention the web api sample running path
  crudUrl: "http://localhost:54738/Home/UpdateData",
  crossDomain: true,
  adaptor: new UrlAdaptor()
});

请尝试上述 CRUD 示例，如果您需要任何进一步的帮助，请与我们联系。

问候，

哈雷什