WebAPI Binding
Web API is an application programming interface for a web application or server which utilizes the HTTP protocol for communication. It enables you to make the server-side of the application more monolithic when it comes to establishing communication between clients and websites to have data access.
For a runnable example, refer to the demo on WebAPI binding of the Scheduler component.
Adding a Web API Controller
To support writing and reading data using WebAPI endpoints, the ControllerBase base class needs to be inherited for a given controller instance.
[Route("api/[controller]")]
public class TaskController : Controller
{
private readonly ISchedulerEventService<TaskViewModel> service;
public TaskController(
ISchedulerEventService<TaskViewModel> schedulerTaskService)
{
service = schedulerTaskService;
}
// GET api/task
[HttpGet]
public DataSourceResult Get([DataSourceRequest]DataSourceRequest request)
{
return service.GetAll().ToDataSourceResult(request);
}
// POST api/task
[HttpPost]
public IActionResult Post(TaskViewModel task)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState.Values.SelectMany(v => v.Errors).Select(error => error.ErrorMessage));
}
service.Insert(task, null);
return new ObjectResult(new DataSourceResult { Data = new[] { task }, Total = 1 });
}
// PUT api/task/5
[HttpPut("{id}")]
public IActionResult Put(int id, TaskViewModel task)
{
if (ModelState.IsValid && id == task.TaskID)
{
try
{
service.Update(task, null);
}
catch (DbUpdateConcurrencyException)
{
return new NotFoundResult();
}
return new StatusCodeResult(200);
}
else
{
return BadRequest(ModelState.Values.SelectMany(v => v.Errors).Select(error => error.ErrorMessage));
}
}
// DELETE api/task/5
[HttpDelete("{id}")]
public IActionResult Delete(int id)
{
try
{
service.Delete(new TaskViewModel { TaskID = id }, null);
}
catch (DbUpdateConcurrencyException)
{
return new NotFoundResult();
}
return new StatusCodeResult(200);
}
}
Configuring the Scheduler DataSource for Web API Binding
To configure CRUD operations that support Web API Binding, explicitly add a WebApi() configuration method within the DataSource.
Note that a unique identifier for both the
UpdateandDeleteoperations is passed as aRouteValueDictionarywhich is then processed on the server-side through theHttpMethodAttribute.
@(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.TaskViewModel>()
.Name("scheduler")
.Date(new DateTime(2022, 6, 13))
.StartTime(new DateTime(2022, 6, 13, 7, 00, 00))
.Height(600)
.Views(views =>
{
views.DayView();
views.WeekView(weekView => weekView.Selected(true));
views.MonthView();
views.AgendaView();
views.TimelineView();
})
.Timezone("Etc/UTC")
.DataSource(d => d
.WebApi()
.Model(m =>
{
m.Id(f => f.TaskID);
m.Field(f => f.Title).DefaultValue("No title");
m.RecurrenceId(f => f.RecurrenceID);
})
.Read(read => read.Action("Get", "Task"))
.Create(create => create.Action("Post", "Task"))
.Update(update => update.Action("Put", "Task", new { id = "{0}" })) // Id of the to-be-updated record that will be processed on the server-side.
.Destroy(destroy => destroy.Action("Delete", "Task", new { id = "{0}" })) // Id of the to-be-deleted record that will be processed on the server-side.
)
)
<kendo-scheduler name="scheduler"
date="new DateTime(2022, 6, 13)"
start-time="new DateTime(2022, 6, 13, 7, 00, 00)"
height="600"
timezone="Etc/UTC">
<views>
<view type="day"></view>
<view type="week" selected="true"></view>
<view type="month"></view>
<view type="agenda"></view>
<view type="timeline"></view>
</views>
<scheduler-datasource type="@DataSourceTagHelperType.WebApi">
<transport>
<read url="/api/Task" action="get"/>
<create url="/api/Task" action="post"/>
<update url="/api/Task/{0}" action="put"/>
<destroy url="/api/Task/{0}" action="delete"/>
</transport>
<schema data="Data" total="Total" errors="Errors">
<scheduler-model id="TaskID">
<fields>
<field name="TaskID" type="number"></field>
<field name="title" from="Title" type="string" default-value="@defaultTitle"></field>
<field name="start" from="Start" type="date"></field>
<field name="end" from="End" type="date"></field>
<field name="description" from="Description" type="string"></field>
<field name="recurrenceId" from="RecurrenceID" type="number" default-value=null></field>
<field name="recurrenceRule" from="RecurrenceRule" type="string" ></field>
<field name="recurrenceException" from="RecurrenceException" type="string"></field>
<field name="startTimezone" from="StartTimezone" type="string"></field>
<field name="endTimezone" from="EndTimezone" type="string"></field>
<field name="isAllDay" from="IsAllDay" type="boolean"></field>
</fields>
</scheduler-model>
</schema>
</scheduler-datasource>
</kendo-scheduler>