Lesson 1 - Add the Query Builder to a Project

Oct 29, 2020
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
Add a Query Builder
Save Generated Queries
View the Result

Create a New Application

Create a new project by selecting FILE | New | Project… in the main menu or by pressing CTRL+SHIFT+N.
In the invoked New Project dialog, expand the Installed category, select a programming language ( Visual C# or Visual Basic ) in the Templates section and select the DevExpress v20.1 Template Gallery. Specify the application’s name and click OK.
In the invoked DevExpress Template Gallery, select Empty Web Application under the ASP.NET MVC category and click Create Project.
Leave the default settings on the DevExpress ASP.NET MVC Project Wizard‘s first page. 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 sheet and script extensions the Query Builder requires in the _Layout.cshtml file.

Razor

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

Declare your database’s connection string in the Web.config file (with the name specified before) to provide the Query Builder with data.

xml

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

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

xml

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

Alternatively, you can declare an empty resources section and attach all the required DevExtreme resources and third-party libraries as described in Embedding Third-Party 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:

Pass the next lesson to use the generated query to provide data to the Grid View. See the Saving Queries topic for more information about obtaining and processing 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 the desired 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 result in a tabular form.

Use the Save toolbar button to save the constructed query.