Data Binding
All DevExtreme widgets that operate with data collections have the DataSource() method, which configures data access for the widget. This topic provides an overview of data sources accepted by this method.
See Also
Static Collections
A static collection will be serialized to JSON and embedded into the widget configuration.
@(Html.DevExtreme().SelectBox()
.DataSource(new[] { "red", "green", "blue" })
)ASP.NET Web API
DevExtreme ASP.NET MVC Wrappers are fully integrated with Web API. Leveraging the DevExtreme.AspNet.Data library, DevExtreme ASP.NET MVC Wrappers enable you to write short but powerful controllers on the base of Web API that, for example, support remote operations in the DataGrid widget.
Actions in a Web API controller for DevExtreme ASP.NET MVC Wrappers implement CRUD operations: all or just the needed ones. For example, the following code demonstrates a controller whose actions implement all CRUD operations on the "Orders" collection from the Northwind database.
namespace ProjectName.Controllers {
public class GridDataController : ApiController {
NorthwindContext _nwind = new NorthwindContext();
const string validationErrorMessage = "The record cannot be saved due to a validation error";
// Fetching items from the "Orders" collection
[HttpGet]
public HttpResponseMessage Get(DataSourceLoadOptions loadOptions) {
return Request.CreateResponse(DataSourceLoader.Load(_nwind.Orders, loadOptions));
}
// Inserting a new record into the "Orders" collection
[HttpPost]
public HttpResponseMessage Post(FormDataCollection form) {
// Extracting a JSON came from the client side
var values = form.Get("values");
// Converting the JSON into an "Order" object that belongs to the model
var newOrder = new Order();
JsonConvert.PopulateObject(values, newOrder);
// Validating the object
Validate(newOrder);
if(!ModelState.IsValid)
return Request.CreateErrorResponse(HttpStatusCode.BadRequest, validationErrorMessage);
// Adding the object to the database
_nwind.Orders.Add(newOrder);
_nwind.SaveChanges();
return Request.CreateResponse(HttpStatusCode.Created);
}
// Updating a record in the "Orders" collection
[HttpPut]
public HttpResponseMessage Put(FormDataCollection form) {
// Extracting a JSON came from the client side
var key = Convert.ToInt32(form.Get("key"));
var values = form.Get("values");
// Finding the object to be updated by its key
var order = _nwind.Orders.Find(key);
// Populating the found object with the changed values
JsonConvert.PopulateObject(values, order);
// Validating the updated object
Validate(order);
if(!ModelState.IsValid)
return Request.CreateErrorResponse(HttpStatusCode.BadRequest, validationErrorMessage);
// Saving changes in the database
_nwind.SaveChanges();
return Request.CreateResponse(HttpStatusCode.OK);
}
// Removing a record from the "Orders" collection
[HttpDelete]
public void Delete(FormDataCollection form) {
// Getting the key of the record to be removed
var key = Convert.ToInt32(form.Get("key"));
// Finding the object to be removed by its key
var order = _nwind.Orders.Find(key);
// Removing the found object
_nwind.Orders.Remove(order);
// Saving changes in the database
_nwind.SaveChanges();
}
}
}To access the GridDataController from a server-side wrapper, use the following construction.
@(Html.DevExtreme().DataGrid()
.DataSource(ds => ds
.WebApi()
.Controller("GridData")
.Key("OrderID")
)
)The WebApi() method acts as an entry point for other methods that configure data access. To specify, for example, actions with nonconventional names for CRUD operations, use the LoadAction(), InsertAction(), UpdateAction() and DeleteAction() methods exposed by WebApi().
@(Html.DevExtreme().DataGrid()
.DataSource(ds => ds
.WebApi()
.Controller("GridData")
.Key("OrderID")
.LoadAction("GetAllOrders")
.InsertAction("InsertOrder")
.UpdateAction("UpdateOrder")
.DeleteAction("RemoveOrder")
)
)For more examples of Web API controllers and accessing them from a server-side wrapper, see our sample application.
Read-Only Data in JSON Format
A server-side wrapper can access JSON data returned from a resource by an AJAX request. For this purpose, pass the URL of the resource to the DataSource() method. This URL may specify an absolute or a relative path to the resource.
@(Html.DevExtreme().SelectBox()
.DataSource("http://www.example.com/dataservices/jsondata")
)@(Html.DevExtreme().SelectBox()
.DataSource(@Url.Content("~/dataservices/jsondata"))
)Also, you can use a JSONP callback parameter supported by jQuery.ajax().
@(Html.DevExtreme().SelectBox()
.DataSource("http://www.example.com/dataservices/jsonpdata?callback=?")
)OData
Also, DevExtreme ASP.NET MVC Wrappers operate with an OData service out of the box. To address an OData service, call the DataSource() method and pass a lambda expression to it. The lambda parameter exposes the OData() method that configures access to the OData service.
@(Html.DevExtreme().DataGrid()
.DataSource(ds => ds
.OData()
.Version(4)
.Url("http://services.odata.org/V4/Northwind/Northwind.svc/Products")
.JSONP(true)
.Key("ProductID")
.Expand("Category")
)
)For an example of a widget getting data from an OData service, refer to our sample application.