Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

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 Toolbar Save Button 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: