Save the Resulting Query

• Sep 09, 2024
• 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.

Index.cshtml

@(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:

Index.cshtml

    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:

• SelectQuery object. Use the ResultQuery property. You can add the SelectQuery object to the Queries collection of your data source.

• SQL string. Use the SelectStatement property.