DevExtreme ASP.NET Data

This extension enables DevExtreme client-side widgets to consume data from the server in ASP.NET applications. A widget communicates with the server in the following manner: the widget sends data loading options (filtering, grouping, sorting, and other options) to the server, the server processes data according to these options and then sends processed data back to the widget. In this way, you delegate all intensive data operations from the client to the server, thus significantly improving the performance of DevExtreme widgets. This extension can be used directly with the widgets as well as with ASP.NET MVC Controls.

Installation

Server Side

The server-side part of the extension is the DevExtreme.AspNet.Data.dll assembly. Install it from NuGet with the following command.

Install-Package DevExtreme.AspNet.Data

Client Side

The client-side part is the dx.aspnet.data.js script. You can install it in one of the following ways.

• Using npm.

  Run the following command in the command line.

    npm install devextreme-aspnet-data
  

• Using bower.

  Run the following command in the command line...

    bower install devextreme-aspnet-data
  

  ... or add devextreme-aspnet-data to the bower.json file into the dependencies section.

  "dependencies": {
      ...
      "devextreme-aspnet-data": "^1"
  }
  

After installation, link the dx.aspnet.data.js script after the DevExtreme scripts on your page.

<!-- if you have used npm -->
<script src="/node_modules/devextreme-aspnet-data/js/dx.aspnet.data.js"></script>
<!-- if you have used bower -->
<script src="/bower_components/devextreme-aspnet-data/js/dx.aspnet.data.js"></script>

See Also

• Install DevExtreme Using npm
• Install DevExtreme Using Bower

Custom Model Binder

The server needs a custom model binder that will receive data loading options from the client and bind them to the model. The following links show how to implement it.

• Web API
• ASP.NET MVC 5
• ASP.NET Core MVC

NOTE: If you use DevExtreme.AspNet.Data along with DevExtreme ASP.NET MVC Controls, you do not need to implement the custom model binder, because it is already done in the ASP.NET MVC Controls library.

Controller Example

• Web API
• ASP.NET MVC 5
• ASP.NET Core MVC

API Reference

Client Side

The client-side API consists of a single method, DevExpress.data.AspNet.createStore, used to reach the controller from the client side. This method accepts an object with the following fields:

• key - the key property;
• loadUrl - the URL used to load data;
• loadParams - additional parameters that should be passed to loadUrl;
• updateUrl - the URL used to update data;
• insertUrl - the URL used to insert data;
• deleteUrl - the URL used to delete data;
• updateMethod - the HTTP method for update requests; "PUT" by default;
• insertMethod - the HTTP method for insert requests; "POST" by default;
• deleteMethod - the HTTP method for delete requests; "DELETE" by default;
• onBeforeSend - a function that customizes the request before it is sent; accepts the following parameters:
  • operation: string
    The operation to be performed by the request. Can be "load", "update", "insert" or "delete".
  • jQueryAjaxSettings: object
    Settings configuring the request. For details, refer to the jQuery.ajax() description.

You can find an example here.

DevExtreme ASP.NET MVC Controls call the DevExpress.data.AspNet.createStore method internally. To configure the parameters, use the lambda expression of the DataSource() method.

@(Html.DevExtreme().DataGrid()
    .DataSource(ds => ds.WebApi()
        .Controller("NorthwindContext")
        .Key("OrderID")
        .LoadAction("GetAllOrders")
        .InsertAction("InsertOrder")
        .UpdateAction("UpdateOrder")
        .DeleteAction("RemoveOrder")
    )
)

Server Side

The server-side API is documented here.

See Also

• Sample project
• DataGrid and Web API example
• PivotGrid and Web API example
• DataGrid in an MVC 5 App example
• KB T334360 - How to implement a data service that supports remote operations for dxDataGrid
• DataGrid - Use CustomStore
• PivotGrid - Use CustomStore