Help us shape the 2021 DevExtreme Roadmap.
Take our 5 minute survey.
Web API Service
Documentation
This example demonstrates the Diagram UI component communicating with a Web API service.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
@(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;
}