React Lookup - Web API Service

DevExtreme provides the DevExtreme.AspNet.Data extension to access an ASP.NET Web API service. This extension consists of two parts: the server-side part implements data processing on the server according to the protocol the Lookup uses; the client-side part creates and configures a CustomStore to access the server from the client. The following code shows how to use the extension's client-side createStore method.

  • import React from 'react';
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { Lookup } from 'devextreme-react/lookup';
  • import { createStore } from "devextreme-aspnet-data-nojquery";
  •  
  • const serviceUrl = "http://url/to/my/service";
  •  
  • class App extends React.Component {
  •     constructor(props) {
  •         super(props);
  •  
  •         this.store = createStore({
  •             key: "ID",
  •             loadUrl: serviceUrl + "/GetAction"
  •         });
  •     }
  •  
  •     render() {
  •         return (
  •             <Lookup ...
  •                 dataSource={this.store}
  •             />
  •         );
  •     }
  • }
  •  
  • export default App;