New to Telerik UI for ASP.NET Core? Download free 30-day trial

Telerik UI Diagram in Razor Pages

Razor Pages are an alternative to the MVC pattern. Razor Pages make page-focused coding easier and more productive. This approach consists of a cshtml file and a cs file (generally, the two files have the same name). You can seamlessly integrate the Telerik UI Diagram for ASP.NET Core in Razor Pages applications.

For a runnable example, refer to the Diagram in RazorPages example.

Getting Started

To enable CRUD operation in the Telerik UI Diagram within a RazorPage:

  1. Setup CRUD URLs in the DataSource and ConnectionsDataSource along with a Model.Id. The URL in these methods must refer to the name of the method in the PageModel.

        .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"))
          )
    
        <kendo-diagram name="diagram">
            <hierarchical-datasource server-operation="false" type="DataSourceTagHelperType.Ajax">
                <transport>
                    <read url="@Url.Page("DiagramData", "ReadShapes")" />
                    <create url="@Url.Page("DiagramData", "CreateShape")" />
                    <destroy url="@Url.Page("DiagramData", "DestroyShape")" />
                    <update url="@Url.Page("DiagramData", "UpdateShape")" />
                </transport>
                <schema>
                    <hierarchical-model id="Id">
                        <fields>
                            <field name="Id" editable="false" type="number"></field>
                            <field name="JobTitle" type="string"></field>
                            <field name="Color" type="string"></field>
                        </fields>
                    </hierarchical-model>
                </schema>
            </hierarchical-datasource>
            <connections-datasource server-operation="false" type="DataSourceTagHelperType.Ajax">
                <transport>
                    <read url="@Url.Page("DiagramData", "ReadShapes")" />
                    <create url="@Url.Page("DiagramData", "CreateShape")" />
                    <destroy url="@Url.Page("DiagramData", "DestroyShape")" />
                    <update url="@Url.Page("DiagramData", "UpdateShape")" />
                </transport>
                <schema>
                    <model id="id">
                        <fields>
                            <field name="id" editable="false" type="number"></field>
                            <field name="text" editable="false" type="string"></field>
                            <field name="from" from="FromShapeId" type="number"></field>
                            <field name="to" from="ToShapeId" type="number"></field>
                            <field name="fromX" from="FromPointX" type="number"></field>
                            <field name="fromY" from="FromPointY" type="number"></field>
                            <field name="toX" from="ToPointX" type="number"></field>
                            <field name="toY" from="ToPointY" type="number"></field>
                        </fields>
                    </model>
                </schema>
            </connections-datasource>
    
        </kendo-diagram>
    
  2. Add an AntiForgeryToken on top of the RazorPage.

        @inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
        @Html.AntiForgeryToken()
    
  3. Send the AntiForgeryToken with each POST request of the page. Additional paratemers can also be supplied.

        <script>
            function forgeryToken() {
                return kendo.antiForgeryTokens();
            }
        </script>
    
  4. 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));
        }
    

See Also

In this article