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

问题描述

我正在使用 syncfusion-react-scheduler 包并尝试在我向日历添加事件(没有外部按钮)并将事件添加到我的数据库时使用 react 发出发布请求。 我想从你们那里得到解决方案,非常感谢!

解决方法

来自 Syncfusion 支持的问候..!

我们已经根据您的共享查询准备了一个 CRUD 示例“尝试在将事件添加到日历(没有外部按钮)并将事件添加到我的数据库时,使用 react 发出发布请求”使用 UrlAdaptor 对 Scheduler 约会执行 CRUD 操作,可从以下链接下载。

服务https://www.syncfusion.com/downloads/support/directtrac/308326/ze/Service2137417074 示例https://stackblitz.com/edit/react-scheduler-crud-sample?file=index.js UGlinkhttps://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 示例,如果您需要任何进一步的帮助,请联系我们。

问候,

哈雷什