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.
Configure a Visual Studio Project
Install NuGet Packages
Perform the following steps to install the NuGet packages required for the Query Builder control:
Right-click the Dependencies node in the Solution Explorer and select Manage NuGet Packages in the invoked context menu.
Select DevExpress 24.2 Local in the Package source drop-down list and go to the Browse page. Locate the DevExpress.AspNetCore.Reporting package and install it.
Select All in the Package source drop-down list, go to the Browse page, and install the following packages:
Configure the Project
If your project already has the
package.jsonfile, 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.Open the
package.jsonfile and add the following dependencies:"devDependencies": { "bootstrap": "^4.3.1", "devextreme-dist": "24.2-next", "@devexpress/analytics-core": "24.2-next", }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/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", "node_modules/ace-builds/css/ace.css", "node_modules/ace-builds/css/theme/dreamweaver.css" "node_modules/ace-builds/css/theme/ambiance.css" ], "minify": { "enabled": false, "adjustRelativePaths": false } }, { "outputFileName": "wwwroot/js/thirdparty.bundle.js", "inputFiles": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/knockout/build/output/knockout-latest.js", "node_modules/bootstrap/dist/js/bootstrap.min.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 } ]Right-click the project in Solution Explorer and select Manage Client-Side Libraries to open the
libman.jsonfile. 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.
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.
Add the following code to the Program.cs file to configure the application:
builder.Services.AddDevExpressControls(); // ... app.UseDevExpressControls();
Register Static Resources
Add the following directive to the _ViewImports.cshtml file:
@using DevExpress.AspNetCoreOpen 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>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>
Add the Database
Query Builder requires a data connection to automatically obtain database schema information and generate data provider-specific SQL.
Create the DataSources folder in the project. Copy the SQLite database nwind.db from the C:\Users\Public\Documents\DevExpress Demos 24.2\Components\Data folder to the DataSources folder. Add an XPO connection string for the database to the appsettings.json file:
// ...
"ConnectionStrings": {
"NWindConnection": "XpoProvider=SQLite;Data Source=|DataDirectory|/Database/nwind.db",
// ...
}
// ...
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);
}
Implement Default Controllers
Create the ReportControllers.cs file in the Controllers folder with the following content:
using DevExpress.AspNetCore.Reporting.QueryBuilder;
using DevExpress.AspNetCore.Reporting.QueryBuilder.Native.Services;
using DevExpress.AspNetCore.Reporting.ReportDesigner;
using DevExpress.AspNetCore.Reporting.ReportDesigner.Native.Services;
using DevExpress.AspNetCore.Reporting.WebDocumentViewer;
using DevExpress.AspNetCore.Reporting.WebDocumentViewer.Native.Services;
public class CustomWebDocumentViewerController : WebDocumentViewerController {
public CustomWebDocumentViewerController(IWebDocumentViewerMvcControllerService controllerService) : base(controllerService) {
}
}
public class CustomReportDesignerController : ReportDesignerController {
public CustomReportDesignerController(IReportDesignerMvcControllerService controllerService) : base(controllerService) {
}
}
public class CustomQueryBuilderController : QueryBuilderController {
public CustomQueryBuilderController(IQueryBuilderMvcControllerService controllerService) : base(controllerService) {
}
}
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: