DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Free Trial Buy

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 TagBox 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.

jQuery
JavaScript
$(function() {
    const serviceUrl = "http://url/to/my/service";
    $("#tagBoxContainer").dxTagBox({
        dataSource: DevExpress.data.AspNet.createStore({
            key: "ID",
            loadUrl: serviceUrl + "/GetAction",
            insertUrl: serviceUrl + "/InsertAction"
        }),
        // ...
    })
});
Angular
HTML
TypeScript
<dx-tag-box ...
    [dataSource]="store">
</dx-tag-box>
import { DxTagBoxModule } from "devextreme-angular";
import CustomStore from "devextreme/data/custom_store";
import { createStore } from "devextreme-aspnet-data-nojquery";
// ...
export class AppComponent {
    store: CustomStore;
    constructor() {
        const serviceUrl = "http://url/to/my/service";
        this.store = createStore({
            key: "ID",
            loadUrl: serviceUrl + "/GetAction",
            insertUrl: serviceUrl + "/InsertAction"
        })
    }
}
@NgModule({
    imports: [
        // ...
        DxTagBoxModule
    ],
    // ...
})
Vue
<template>
    <DxTagBox ...
        :data-source="dataSource"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxTagBox } from 'devextreme-vue/tag-box';
import { createStore } from "devextreme-aspnet-data-nojquery";

const serviceUrl = "http://url/to/my/service";

export default {
    components: {
        DxTagBox
    },
    data() {
        return {
            dataSource: createStore({
                key: "ID",
                loadUrl: serviceUrl + "/GetAction",
                insertUrl: serviceUrl + "/InsertAction"
            })
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { TagBox } from 'devextreme-react/tag-box';
import { createStore } from "devextreme-aspnet-data-nojquery";

const serviceUrl = "http://url/to/my/service";

const dataSource = createStore({
    key: "ID",
    loadUrl: serviceUrl + "/GetAction",
    insertUrl: serviceUrl + "/InsertAction"
});

class App extends React.Component {
    render() {
        return (
            <TagBox ...
                dataSource={dataSource}
            />
        );
    }
}

export default App;