TaskBoard in Razor Pages
Razor Pages is an alternative to the MVC pattern that makes page-focused coding easier and more productive. This approach consists of a cshtml
file and a cshtml.cs
file (by design, the two files have the same name).
You can seamlessly integrate the Telerik UI TaskBoard for ASP.NET Core in Razor Pages applications.
This article describes how to configure the TaskBoard component in a Razor Pages scenario.
Getting Started
To configure the CRUD operations of the TaskBoard DataSource within a Razor Pages application, follow the next steps:
-
Specify the
Read
,Create
,Update
, andDestroy
options of theDataSource
in theColumns
and TaskBoard configurations . The URL in each of these options must refer to the method name in thePageModel
.HtmlHelper_Index.cshtml@page @model IndexModel @(Html.Kendo().TaskBoard<TaskViewModel, Column>() .Name("taskBoard") .ColumnSettings(columnSettings => columnSettings .DataTextField("Text") .DataStatusField("ID") ) .Columns(dataSource => dataSource .Ajax() .Model(model => model.Id(p => p.ID)) .Read(r => r.Url("/Index?handler=Editing_Columns_Read").Data("forgeryToken")) .Create(r => r.Url("/Index?handler=Editing_Columns_Create").Data("forgeryToken")) .Update(r => r.Url("/Index?handler=Editing_Columns_Update").Data("forgeryToken")) .Destroy(r => r.Url("/Index?handler=Editing_Columns_Destroy").Data("forgeryToken")) ) .DataTitleField("Title") .DataStatusField("OwnerID") .DataDescriptionField("Description") .DataCategoryField("ID") .TemplateId("card-template") .DataSource(dataSource => dataSource .Ajax() .Model(model => model.Id(p => p.TaskID)) .Read(r => r.Url("/Index?handler=Tasks_Read").Data("forgeryToken")) .Create(r => r.Url("/Index?handler=Tasks_Create").Data("forgeryToken")) .Update(r => r.Url("/Index?handler=Tasks_Update").Data("forgeryToken")) .Destroy(r => r.Url("/Index?handler=Tasks_Destroy").Data("forgeryToken")) ) )
-
Add an
AntiForgeryToken
at the top of the page.C#@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf @Html.AntiForgeryToken()
-
Send the
AntiForgeryToken
with the CRUD requests.JS<script> function forgeryToken() { return kendo.antiForgeryTokens(); } </script>
Additional parameters can also be supplied.
JS<script> function forgeryToken() { return { __RequestVerificationToken: kendo.antiForgeryTokens().__RequestVerificationToken, additionalParameter: "test" } } </script>
-
Within the
cshtml.cs
file, add a handler method for each data operation.Index.cshtml.csprivate ISchedulerEventService<TaskViewModel> taskService; public const string SessionKeyID = "ID"; private List<Column> columns = GetColumns() as List<Column>; public IndexModel(ISchedulerEventService<TaskViewModel> schedulerTaskService) { taskService = schedulerTaskService; } public virtual JsonResult OnPostTasks_Read([DataSourceRequest] DataSourceRequest request) { return new JsonResult(taskService.GetAll().ToDataSourceResult(request)); } public virtual JsonResult OnPostTasks_Destroy([DataSourceRequest] DataSourceRequest request, TaskViewModel task) { if (ModelState.IsValid) { taskService.Delete(task, ModelState); } return new JsonResult(new[] { task }.ToDataSourceResult(request, ModelState)); } public virtual JsonResult OnPostTasks_Create([DataSourceRequest] DataSourceRequest request, TaskViewModel task) { if (ModelState.IsValid) { taskService.Insert(task, ModelState); } return new JsonResult(new[] { task }.ToDataSourceResult(request, ModelState)); } public virtual JsonResult OnPostTasks_Update([DataSourceRequest] DataSourceRequest request, TaskViewModel task) { if (ModelState.IsValid) { taskService.Update(task, ModelState); } return new JsonResult(new[] { task }.ToDataSourceResult(request, ModelState)); } public virtual JsonResult OnPostEditing_Columns_Read([DataSourceRequest] DataSourceRequest request) { return new JsonResult(GetColumns().ToDataSourceResult(request)); } public virtual JsonResult OnPostEditing_Columns_Destroy([DataSourceRequest] DataSourceRequest request, Column column) { if (ModelState.IsValid) { columns.Remove(columns.Where(x => x.ID == column.ID).FirstOrDefault()); } return new JsonResult(new[] { column }.ToDataSourceResult(request, ModelState)); } public virtual JsonResult OnPostEditing_Columns_Create([DataSourceRequest] DataSourceRequest request, Column column) { if (ModelState.IsValid) { if (column.ID == 0) { column.ID = GetColumns().Last().ID + 1; HttpContext.Session.SetInt32(SessionKeyID, column.ID); } } return new JsonResult(new[] { column }.ToDataSourceResult(request, ModelState)); } public virtual JsonResult OnPostEditing_Columns_Update([DataSourceRequest] DataSourceRequest request, Column column) { if (ModelState.IsValid) { var taskToUpdate = columns.Where(x => x.ID == column.ID).FirstOrDefault(); if (taskToUpdate != null) { taskToUpdate = column; } } return new JsonResult(new[] { column }.ToDataSourceResult(request, ModelState)); } private static IList<Column> GetColumns() { IList<Column> taskBoardColumns = new List<Column>() { new Column { ID = 1, Text = "Pending", Status = "pending" }, new Column { ID = 2, Text = "Under Review", Status = "underReview" }, new Column { ID = 3, Text = "Scheduled", Status = "scheduled" } }; return taskBoardColumns; }