Skip to main content
BuyLog In
ASP.NET Core Controls
Search in…
Docs > Query Builder > Add the Query Builder to an Application
A newer version of this page is available. .
All docs
V21.1
ASP.NET Core Controls
Prerequisites and Installation
Demos and Sample Apps
DevExtreme-Based Controls
Reporting
Query Builder
Add the Query Builder to an Application
Save the Resulting Query
Rich Text Editor
Spreadsheet
Web Dashboard
API Reference
Client API Reference
Download CHM

Add the Query Builder to an Application

  • 4 minutes to read

This topic describes how to integrate the Query Builder into an ASP.NET Core application.

View Example: How to Use the Query Builder Control in an ASP.NET Core Application

Configure a Visual Studio Project

Install NuGet Packages

Perform the following steps to install the NuGet packages required for the Query Builder control:

  1. Right-click the Dependencies node in the Solution Explorer and select Manage NuGet Packages in the invoked context menu.

    Manage NuGet Packages

  2. Select DevExpress 21.1 Local in the Package source drop-down list and go to the Browse page. Locate the DevExpress.AspNetCore.Reporting package and install it.

    Install DevExpress.AspNetCore.Reporting Package

  3. Select All in the Package source drop-down list, go to the Browse page, and install the following packages:

Configure the Project

  1. If your project already has the package.json file, skip this step. Otherwise, right-click the application’s name in the Solution Explorer and select Add | Add New Item. In the invoked Add New Item dialog, select the Installed | Visual C# | ASP.NET Core | Web category and the npm Configuration File item template. Click Add to add the package.json file to the project.

  2. Open the package.json file and add the following dependencies:

    "devDependencies": {
    "bootstrap": "^4.3.1",
    "cldrjs": "^0.5.0",
    "devextreme": "20.2-next",
    "@devexpress/analytics-core": "20.2-next",
    "globalize": "^1.3.0",
    "jquery-ui-dist": "^1.12.1"
}

  3. Add a new empty text file (bundleconfig.json) to the root directory. Open the newly created file, copy and paste the following content, and save the file:

    [
{
  "outputFileName": "wwwroot/css/thirdparty.bundle.css",
  "inputFiles": [
    "node_modules/jquery-ui-dist/jquery-ui.min.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "node_modules/devextreme/dist/css/dx.light.css"
  ],
  "minify": {
    "enabled": false,
    "adjustRelativePaths": false
  }
},
{
  "outputFileName": "wwwroot/css/querybuilder.part.bundle.css",
  "inputFiles": [
    "node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
    "node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css",
    "node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css"
  ],
  "minify": {
    "enabled": false,
    "adjustRelativePaths": false
  }
},
{
  "outputFileName": "wwwroot/js/thirdparty.bundle.js",
  "inputFiles": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/jquery-ui-dist/jquery-ui.min.js",
    "node_modules/knockout/build/output/knockout-latest.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js",
    "node_modules/cldrjs/dist/cldr.js",
    "node_modules/cldrjs/dist/cldr/event.js",
    "node_modules/cldrjs/dist/cldr/supplemental.js",
    "node_modules/cldrjs/dist/cldr/unresolved.js",
    "node_modules/globalize/dist/globalize.js",
    "node_modules/globalize/dist/globalize/message.js",
    "node_modules/globalize/dist/globalize/number.js",
    "node_modules/globalize/dist/globalize/currency.js",
    "node_modules/globalize/dist/globalize/date.js",
    "node_modules/devextreme/dist/js/dx.all.js",

    "node_modules/ace-builds/src-min-noconflict/ace.js",
    "node_modules/ace-builds/src-min-noconflict/ext-language_tools.js",
    "node_modules/ace-builds/src-min-noconflict/theme-dreamweaver.js",
    "node_modules/ace-builds/src-min-noconflict/theme-ambiance.js",
    "node_modules/ace-builds/src-min-noconflict/snippets/text.js"
  ],
  "minify": {
    "enabled": false
  },
  "sourceMap": false
},
{
  "outputFileName": "wwwroot/js/querybuilder.part.bundle.js",
  "inputFiles": [
    "node_modules/@devexpress/analytics-core/dist/js/dx-analytics-core.js",
    "node_modules/@devexpress/analytics-core/dist/js/dx-querybuilder.js"
  ],
  "minify": {
    "enabled": false
  },
  "sourceMap": false
}
]

  4. Right-click the project in Solution Explorer and select Manage Client-Side Libraries to open the libman.json file. Copy and paste the following content to the file and save it:

    {
"version": "1.0",
"defaultProvider": "filesystem",
"libraries": [
    {
    "library": "node_modules/devextreme/dist/css/icons/",
    "destination": "wwwroot/css/icons",
    "files": [
        "dxicons.ttf",
        "dxicons.woff2",
        "dxicons.woff"
    ]
    }
]
}

    For more information on LibMan, review the following article: Use LibMan with ASP.NET Core in Visual Studio.

  5. Right-click the package.json file and select Restore Packages. This adds the node_modules directory to the application folder, retrieves the dependencies, bundles them, and place the bundles in the wwwroot application directory.

  6. Add the following code to the Startup.cs file to configure the application:

    using DevExpress.AspNetCore;
// ...
    public void ConfigureServices(IServiceCollection services) {
        // ...
        services.AddDevExpressControls();
        // ...
    }
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env, ILoggerFactory loggerFactory) {
        app.UseDevExpressControls();
        // ...
    }

Register Static Resources

  1. Add the following directive to the _ViewImports.cshtml file:

    @using DevExpress.AspNetCore

  2. Open the _Layout.cshtml file and register resources in the header section:

    <head>
    @* ... *@
    <link rel="stylesheet" href="~/css/thirdparty.bundle.css" />
    @* ... *@
    <script src="~/js/thirdparty.bundle.js"></script>
</head>

  3. Create or open a view (the default view is the Index.cshtml file), and add resources to the page:

    <link href="~/css/querybuilder.part.bundle.css" rel="stylesheet" />
<script src="~/js/querybuilder.part.bundle.js"></script>

Modify the Controller Action

Add the code that generates the Query Builder model. The following code snippet is the Home controller’s Index action. The code uses the NWindConnection connection string defined in the appsettings.json file. 

using DevExpress.XtraReports.Web.QueryBuilder.Services;
// ...
    public IActionResult Index(
            [FromServices] IQueryBuilderClientSideModelGenerator queryBuilderClientSideModelGenerator)
    {
        var newDataConnectionName = "NWindConnection";
        var queryBuilderModel = queryBuilderClientSideModelGenerator.GetModel(newDataConnectionName);
        return View(queryBuilderModel);
    }

Add the Query Builder to a Page

Add the following code to the view that renders the Query Builder (the default view is the Index.html page):

@model DevExpress.XtraReports.Web.QueryBuilder.QueryBuilderModel


@(Html.DevExpress()
.QueryBuilder("webQueryBuilder")
.Height("600px")
.Bind(Model))

Pass the Query to the Server

The Query Builder allows you to create a query that selects and retrieves data from an external data source specified by a connection string. To pass the query to your application, you should handle the SaveQueryRequested event. Review the following help topic for more information:

See Also