All docs
V20.2
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.

Save the Resulting Query

  • 2 minutes to read

This topic describes how to pass the SELECT query created with the Query Builder on the client side to the server.

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

Handle the SaveQueryRequested Event

When a user clicks the Save button in the Query Builder toolbar, the Query Builder raises the client-side SaveQueryRequested event.

@(Html.DevExpress()
    .QueryBuilder("webQueryBuilder")
    .ClientSideEvents( x => {
        x.SaveQueryRequested("SaveQueryRequested");
    })
    .Height("400px")
    .Bind(Model))

You must handle this event and call the GetSaveQueryModel method to retrieve the model with the serialized data and send the model to the server-side controller action:

    function SaveQueryRequested(sender) {
        var saveQueryModel = sender.GetSaveQueryModel();
        //...
        $.ajax({
            url: "/Home/SaveQuery",
            type: "POST",
            data: saveQueryModel,
            success: function(result) {
                window.location = "/";
            }
        });
    }

Implement a Controller Action

In the SaveQuery controller action you should use the IQueryBuilderInputSerializer service and the custom SaveQueryRequest contract to deserialize the model and obtain the QueryBuilderInput instance:

using DevExpress.DataAccess.Web.QueryBuilder;
using DevExpress.DataAccess.Sql
// ...
    [HttpPost]
    public async Task<IActionResult> SaveQuery(
    [FromServices] IQueryBuilderInputSerializer queryBuilderInputSerializer,
    [FromForm] DevExpress.DataAccess.Web.QueryBuilder.DataContracts.SaveQueryRequest saveQueryRequest)
    {
        try
        {
            var queryBuilderInput = queryBuilderInputSerializer.DeserializeSaveQueryRequest(saveQueryRequest);
            SelectQuery resultingQuery = queryBuilderInput.ResultQuery;
            string sql = queryBuilderInput.SelectStatement;
            return new RedirectToActionResult("Index", "Home", null);
        }
        catch (Exception ex)
        {
            // ...
        }
    }

The QueryBuilderInput instance allows you to obtain the resulting query in two variations: