New to Telerik UI for ASP.NET CoreStart a free 30-day trial

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:

  1. Specify the Read, Create, Update, and Destroy options of the DataSource in the Columns and TaskBoard configurations . The URL in each of these options must refer to the method name in the PageModel.

    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"))
            )
        )
  2. Add an AntiForgeryToken at the top of the page.

    C#
        @inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
        @Html.AntiForgeryToken()
  3. 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>
  4. Within the cshtml.cs file, add a handler method for each data operation.

    Index.cshtml.cs
    
        private 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;
        }

See Also

In this article
Getting StartedSee Also
Not finding the help you need?
Contact Support