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 their server-side wrappers.
Installation
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
The client-side part is the dx.aspnet.data.js script. Install it using bower in one of the following ways.
-
With the following command in the bower command line.
bower install devextreme-aspnet-data -
By adding
devextreme-aspnet-datato the bower.json file into thedependenciessection."dependencies": { ... "devextreme-aspnet-data": "^1" }
After installation, link the dx.aspnet.data.js script after the DevExtreme scripts on your page.
<script src="bower_components/devextreme-aspnet-data/js/dx.aspnet.data.js"></script>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.
NOTE: If you use DevExtreme.AspNet.Data along with DevExtreme ASP.NET MVC Wrappers, you do not need to implement the custom model binder, because it is already done in the ASP.NET MVC Wrappers library.
Controller Example
Client-Side Method
To reach the controller from the client side, use the DevExpress.data.AspNet.createStore method. It accepts an object with the following fields.
key- the key property;loadUrl- the URL to the GET method;loadParams- parameters that should be passed to the GET method (if there are any);updateUrl- the URL to the POST method;insertUrl- the URL to the PUT method;deleteUrl- the URL to the DELETE method;onBeforeSend- a function that customizes the query before it is sent.
You can find an example here.
DevExtreme ASP.NET MVC Wrappers 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")
)
)