Your search did not match any results.

Web API Service

Documentation

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

@(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) ) ) .Toolbox(t => t .Groups(g => g .Add().Category(DiagramShapeCategory.General).Title("General") ) ) ) <script type="text/javascript"> function onInserting(values) { values["ID"] = 0; values["HeadID"] = 0; 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 Ok(); } [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(); } [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; } [Required] [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; }