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