Lesson 1 - Add the Query Builder to a Project

Jun 21, 2024
5 minutes to read

This lesson illustrates how to create a new ASP.NET MVC application in Microsoft Visual Studio and add a Query Builder control to it.

Create a New Application

Create a new project by selecting FILE | New | Project… in the main menu or by pressing CTRL+SHIFT+N.
Select the DevExpress v25.2 Web App Template Gallery and click Next.
Specify the project name and location and click Create.
In the invoked DevExpress Template Gallery, select Web Application under the ASP.NET MVC category and click Run Wizard.
In the DevExpress ASP.NET MVC Project Wizard, switch to the Suites page, enable the Query Builder suite, and click Create Project.

This creates an application that can use DevExpress ASP.NET MVC Extensions and registers the styles and scripts in the _Layout.cshtml file.

_Layout.cshtml

cshtml

@Html.DevExpress().GetStyleSheets(
    ...
    new StyleSheet { ExtensionSuite = ExtensionSuite.QueryBuilder }
)
@Html.DevExpress().GetScripts( 
    ...
    new Script { ExtensionSuite = ExtensionSuite.QueryBuilder }
)

Add a Query Builder

Insert the QueryBuilder MVC extension in one of the following ways:

Use the DevExpress MVC Extension Wizard
Manually Register the Extension

Controller and HTTP Handler

In the code above, the QueryBuilderSettings.RouteValues property specifies a route to the controller that the QueryBuilder component uses to perform certain actions, such as fetching the database schema or Select statement execution.

The DevExpress ASP.NET MVC components are developed based on the DevExpress WebForms components and use the same code and logic. This means that the Query Builder component can use the HTTP Handler specified in the Web.config file as the default backend. The built-in handler is an HTTP module whose type is ASPxHttpHandlerModule and name is DXQB.axd.

In most situations, your application can use either the built-in handler or the default controller. A custom controller is necessary when you implement custom routing, authorization, or anti-forgery support.

Database Connection

Declare your database’s connection string in the Web.config file to supply the Query Builder with data. The name of the connection string is the name specified earlier in the Insert DevExpress Extension dialog.

xml

<connectionStrings>
  <add name="NorthwindConnection" connectionString="data source=localhost;integrated security=SSPI;initial catalog=NORTHWND" providerName="System.Data.SqlClient" />
</connectionStrings>

External Libraries

For the Query Builder to work correctly, make sure that the Web.config file contains the following resources section to load all required libraries automatically:

xml

<devExpress>
    <!-- ... -->
    <resources>
        <add type="ThirdParty" />
        <add type="DevExtreme" />
    </resources>
</devExpress>

Alternatively, you can declare an empty resources section and attach all required DevExtreme resources and third-party libraries as described in the following help topic: External Client Libraries.

Save Generated Queries

In the Query Builder extension’s declaration, use the QueryBuilderSettings.SaveCallbackRouteValues property to specify the names of the controller and action that handle callbacks for saving queries.
Add a new Save action (specified in the View code above) to the Query Builder controller. Use the QueryBuilderExtension.GetSaveCallbackResult method to obtain the result object with the following properties:

The next lesson describes how to use the generated query to supply data to the Grid View. See the following topic for more information about how to obtain and process queries: Saving Queries.

View the Result

Run the application to view the result in a web browser. The Query Builder displays all the tables and views obtained from a database. You can drop a table from a table list on the design surface.

Enable check boxes of the table columns you want to include in the query result set.

Click the Preview Results toolbar button to display the query execution results in a tabular form.

Use the Save toolbar button to save the constructed query.