Diagram 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 Diagram for ASP.NET MVC in Razor Pages applications.
This article describes how to configure the Diagram component in a Razor Pages scenario.
For the complete project, refer to the Diagram in Razor Pages example.
Getting Started
To enable CRUD operation in the Telerik UI Diagram within a RazorPage
:
-
Setup CRUD URLs in the
DataSource
andConnectionsDataSource
along with aModel.Id
. The URL in these methods must refer to the name of the method in thePageModel
..DataSource(d => d .ShapeDataSource() .Model(m => { m.Id(s => s.Id); m.Field(s => s.Id).Editable(false); m.Field(s => s.JobTitle); m.Field(s => s.Color); }) .Read(r => r.Url("/Diagram/DiagramEditing?handler=ReadShapes").Data("forgeryToken")) .Create(r => r.Url("/Diagram/DiagramEditing?handler=CreateShape").Data("forgeryToken")) .Destroy(r => r.Url("/Diagram/DiagramEditing?handler=DestroyShape").Data("forgeryToken")) .Update(r => r.Url("/Diagram/DiagramEditing?handler=UpdateShape").Data("forgeryToken")) ) .ConnectionsDataSource(d => d .Model(m => { m.Id(c => c.Id); m.Field(c => c.Id).Editable(false); m.From(c => c.FromShapeId); m.To(c => c.ToShapeId); }) .Read(r => r.Url("/Diagram/DiagramEditing?handler=ReadConnections").Data("forgeryToken")) .Create(r => r.Url("/Diagram/DiagramEditing?handler=CreateConnection").Data("forgeryToken")) .Destroy(r => r.Url("/Diagram/DiagramEditing?handler=DestroyConnection").Data("forgeryToken")) .Update(r => r.Url("/Diagram/DiagramEditing?handler=UpdateConnection").Data("forgeryToken")) )
-
Add an AntiForgeryToken on top of the
RazorPage
.@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf @Html.AntiForgeryToken()
-
Send the AntiForgeryToken with each POST request of the page. Additional paratemers can also be supplied.
<script> function forgeryToken() { return kendo.antiForgeryTokens(); } </script>
-
Within the
.cs
file, introduce ActionMethod for each of the CRUD operations.public JsonResult OnPostReadShapes([DataSourceRequest] DataSourceRequest request) { return new JsonResult(DiagramShapes.ToDataSourceResult(request)); } public JsonResult OnPostCreateShape([DataSourceRequest] DataSourceRequest request, OrgDiagramShape shape) { shape.Id = DiagramShapes.Count + 2; DiagramShapes.Add(shape); return new JsonResult(new[] { shape }.ToDataSourceResult(request, ModelState)); } public JsonResult OnPostUpdateShape([DataSourceRequest] DataSourceRequest request, OrgDiagramShape shape) { DiagramConnections.Where(x => x.Id == shape.Id).Select(x => shape); return new JsonResult(new[] { shape }.ToDataSourceResult(request, ModelState)); } public JsonResult OnPostDestroyShape([DataSourceRequest] DataSourceRequest request, OrgDiagramShape shape) { DiagramShapes.Remove(DiagramShapes.FirstOrDefault(x => x.Id == shape.Id)); return new JsonResult(new[] { shape }.ToDataSourceResult(request, ModelState)); }