Data Visualization ▸ Web API Service

@(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;
}