Data Binding

NOTE
At the time of version 16.1, DevExtreme ASP.NET MVC Wrappers were in the Community Technology Preview (CTP) status. Currently, this product changed its status to Release Candidate (RC). Renewed documentation is available since version 16.2.

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();
        }
    }
}
NOTE
"Get", "Post", "Put" and "Delete" are conventional names for actions that perform CRUD operations. However, you can use other names if you need to, for example, when the controller has multiple "Get" actions. In this case, specify the particular action to be used using one of the methods described further.

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.