Diagram - Web API Service

This example demonstrates the Diagram UI component communicating with a Web API service.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

@(Html.DevExtreme().Diagram() .ID("diagram") .Nodes(ns => ns .DataSource(d => d.Mvc() .Controller("DiagramEmployees") .LoadAction("Employees") .InsertAction("InsertEmployee") .UpdateAction("UpdateEmployee") .DeleteAction("DeleteEmployee") .Key("ID") .OnInserting("onInserting") ) .KeyExpr("ID") .TextExpr("Title") .ParentKeyExpr("HeadID") .AutoLayout(al => al .Type(DiagramDataLayoutType.Tree) ) ) .ContextToolbox(ct => ct .ShapeIconsPerRow(2) .Width(100) .Shapes(new[] { DiagramShapeType.Rectangle }) ) .Toolbox(t => t .Groups(g => g .Add().Title("Items").Shapes(new[] { DiagramShapeType.Rectangle }) ) .ShowSearch(false) .ShapeIconsPerRow(2) ) ) <script type="text/javascript"> function onInserting(values) { values["ID"] = 0; values["Title"] = values["Title"] || "New Position"; values["Prefix"] = "Mr"; values["FullName"] = "New Employee"; values["City"] = "LA"; values["State"] = "CA"; values["HireDate"] = new Date(); } </script>

using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; namespace DevExtreme.NETCore.Demos.Controllers { public class DiagramController : Controller { public IActionResult WebAPIService() { return View(); } } }

using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.NETCore.Demos.Models.Diagram; using Newtonsoft.Json; using System; using Microsoft.AspNetCore.Mvc; using System.Linq; using Microsoft.AspNetCore.Http; using Microsoft.Extensions.Caching.Memory; namespace DevExtreme.NETCore.Demos.Controllers.ApiControllers { [Route("api/[controller]/[action]")] public class DiagramEmployeesController : Controller { InMemoryEmployeesDataContext db; public DiagramEmployeesController(IHttpContextAccessor httpContextAccessor, IMemoryCache memoryCache) { db = new InMemoryEmployeesDataContext(httpContextAccessor, memoryCache); } [HttpGet] public object Employees(DataSourceLoadOptions loadOptions) { return DataSourceLoader.Load(db.Employees, loadOptions); } [HttpPost] public IActionResult InsertEmployee(string values) { var newEmployee = new Employee(); JsonConvert.PopulateObject(values, newEmployee); if(!TryValidateModel(newEmployee)) return BadRequest(ModelState.GetFullErrorMessage()); db.Employees.Add(newEmployee); db.SaveChanges(); return Created(Request.Path, newEmployee); } [HttpPut] public IActionResult UpdateEmployee(int key, string values) { var employee = db.Employees.First(e => e.ID == key); JsonConvert.PopulateObject(values, employee); if(!TryValidateModel(employee)) return BadRequest(ModelState.GetFullErrorMessage()); db.SaveChanges(); return Ok(employee); } [HttpDelete] public void DeleteEmployee(int key) { var employee = db.Employees.First(e => e.ID == key); db.Employees.Remove(employee); db.SaveChanges(); } } }

using System; using System.ComponentModel.DataAnnotations; namespace DevExtreme.NETCore.Demos.Models.Diagram { public class Employee { public int ID { get; set; } [Display(Name = "Head")] public int? HeadID { get; set; } [Required] public string FullName { get; set; } [Required] [Display(Name = "Title")] public string Prefix { get; set; } [Required] [Display(Name = "Position")] public string Title { get; set; } [Required] public string City { get; set; } [Required] public string State { get; set; } public string Email { get; set; } public string Skype { get; set; } public string MobilePhone { get; set; } public DateTime BirthDate { get; set; } [Required] public DateTime HireDate { get; set; } } }

using Microsoft.AspNetCore.Http; using Microsoft.Extensions.Caching.Memory; using System; using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.Models.Diagram { public class InMemoryEmployeesDataContext : InMemoryDataContext<Employee> { public InMemoryEmployeesDataContext(IHttpContextAccessor contextAccessor, IMemoryCache memoryCache) : base(contextAccessor, memoryCache) { } public ICollection<Employee> Employees => ItemsInternal; protected override IEnumerable<Employee> Source => SampleData.SampleData.DiagramEmployees; protected override int GetKey(Employee item) => item.ID; protected override void SetKey(Employee item, int key) => item.ID = key; } }

#diagram { height: 725px; }