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.WebApi() .RouteName("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 System.Web.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; namespace DevExtreme.MVC.Demos.Controllers { public class DiagramController : Controller { public ActionResult WebAPIService() { return View(); } } }

using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models.Diagram; using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Http; using System.Net.Http.Formatting; using System.Web.Http; namespace DevExtreme.MVC.Demos.Controllers.ApiControllers { [Route("api/DiagramEmployees/{action}", Name = "DiagramEmployees")] public class DiagramEmployeesController : ApiController { InMemoryEmployeesDataContext db = new InMemoryEmployeesDataContext(); [HttpGet] public HttpResponseMessage Employees(DataSourceLoadOptions loadOptions) { return Request.CreateResponse(DataSourceLoader.Load(db.Employees, loadOptions)); } [HttpPost] public HttpResponseMessage InsertEmployee(FormDataCollection form) { var values = form.Get("values"); var newEmployee = new Employee(); JsonConvert.PopulateObject(values, newEmployee); Validate(newEmployee); if(!ModelState.IsValid) return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState.GetFullErrorMessage()); db.Employees.Add(newEmployee); db.SaveChanges(); return Request.CreateResponse(HttpStatusCode.Created, newEmployee); } [HttpPut] public HttpResponseMessage UpdateEmployee(FormDataCollection form) { var key = Convert.ToInt32(form.Get("key")); var values = form.Get("values"); var employee = db.Employees.First(e => e.ID == key); JsonConvert.PopulateObject(values, employee); Validate(employee); if(!ModelState.IsValid) return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState.GetFullErrorMessage()); db.SaveChanges(); return Request.CreateResponse(HttpStatusCode.OK, employee); } [HttpDelete] public void DeleteEmployee(FormDataCollection form) { var key = Convert.ToInt32(form.Get("key")); var employee = db.Employees.First(e => e.ID == key); db.Employees.Remove(employee); db.SaveChanges(); } } }

using System; using System.ComponentModel.DataAnnotations; namespace DevExtreme.MVC.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 System; using System.Collections.Generic; namespace DevExtreme.MVC.Demos.Models.Diagram { public class InMemoryEmployeesDataContext : InMemoryDataContext<Employee> { 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; }