Data Binding

NOTE
Currently, DevExtreme ASP.NET MVC Wrappers are in the Release Candidate (RC) status, meaning that although this product is stable, significant bugs may emerge. In case you find one, please report to our Support Center.

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" })
)

View Demo

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 technical demos and sample applications.

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")
    )
)

View Demo

OLAP Cube

An OLAP cube is a multi-dimensional dataset that allows for data mining and analysis. For displaying data from an OLAP cube, DevExtreme provides the PivotGrid widget. You can access the OLAP cube by calling the DataSource() method as shown in the following code. The lambda expression passed to this method configures the XmlaStore data store.

@(Html.DevExtreme().PivotGrid()
    .DataSource(ds => ds
        .Store(s => s.Xmla()
            .Url("http://my-web-srv01/OLAP/msmdpump.dll")
            .Catalog("AdventureWorksDW2012")
            .Cube("Adventure Works")
        )
    )
)

View Demo