Syncfusion.AspNetCore.QueryBuilder 34.1.31

Prefix Reserved
There is a newer version of this package available.
See the version list below for details.
dotnet add package Syncfusion.AspNetCore.QueryBuilder --version 34.1.31
                    
NuGet\Install-Package Syncfusion.AspNetCore.QueryBuilder -Version 34.1.31
                    
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="Syncfusion.AspNetCore.QueryBuilder" Version="34.1.31" />
                    
For projects that support PackageReference, copy this XML node into the project file to reference the package.
<PackageVersion Include="Syncfusion.AspNetCore.QueryBuilder" Version="34.1.31" />
                    
Directory.Packages.props
<PackageReference Include="Syncfusion.AspNetCore.QueryBuilder" />
                    
Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.
paket add Syncfusion.AspNetCore.QueryBuilder --version 34.1.31
                    
#r "nuget: Syncfusion.AspNetCore.QueryBuilder, 34.1.31"
                    
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
#:package Syncfusion.AspNetCore.QueryBuilder@34.1.31
                    
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.
#addin nuget:?package=Syncfusion.AspNetCore.QueryBuilder&version=34.1.31
                    
Install as a Cake Addin
#tool nuget:?package=Syncfusion.AspNetCore.QueryBuilder&version=34.1.31
                    
Install as a Cake Tool

Syncfusion® ASP.NET Core QueryBuilder Component

A UI component for building complex SQL-like queries through an intuitive rule editor. Ideal for filter builders, report configurators, and search interfaces without requiring manual query syntax entry.

Key Features

  • Visual condition builder with groups and rules
  • Supports all common operators: equal, not equal, contains, starts with, between, etc.
  • Generates SQL, MongoDB, and JSON query outputs
  • Import existing query rules back into the UI
  • Custom templates for rule value inputs
  • Integration with DataGrid and other data components
  • Accessibility and keyboard navigation

Common Setup

All Syncfusion ASP.NET Core controls share the same foundational setup steps:

1. Install NuGet Package

Install-Package Syncfusion.AspNetCore.QueryBuilder

2. Register Tag Helper

Add the following to ~/Pages/_ViewImports.cshtml or ~/Views/_ViewImports.cshtml:

@addTagHelper *, Syncfusion.AspNetCore.QueryBuilder

3. Add Stylesheet & Script References

In your layout file (~/Pages/Shared/_Layout.cshtml):

<head>
    
    <link rel="stylesheet" href="_content/Syncfusion.AspNetCore.Themes/styles/fluent2.css" />
    
    
    <script src="_content/Syncfusion.AspNetCore.QueryBuilder/scripts/sf-query-builder.min.js"></script>
</head>

4. Register Script Manager

In your layout file (~/Pages/Shared/_Layout.cshtml), At the end of your <body> tag:

<ejs-scripts></ejs-scripts>

Quick Start

Step 1: Create a PageModel

Create ~/Pages/Index.cshtml.cs:

using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Collections.Generic;

public class IndexModel : PageModel
{
    public List<FilterField> Fields { get; set; } = new List<FilterField>
    {
        new FilterField { Text = "Age", Value = "Age", Type = "number" },
        new FilterField { Text = "Status", Value = "Status", Type = "string" },
        new FilterField { Text = "Department", Value = "Department", Type = "string" }
    };

    public void OnGet()
    {
        // Initialize query builder
    }
}

public class FilterField
{
    public string Text { get; set; }
    public string Value { get; set; }
    public string Type { get; set; }
}

Step 2: Create the View

Create ~/Pages/Index.cshtml:

@page
@model IndexModel

<div class="container mt-5">
    <h2>Query Builder Demo</h2>

    <ejs-querybuilder id="querybuilder" rule="@(new Rule { condition = "and", rules = new List<Rule>() })" columns="@Model.Fields">
    </ejs-querybuilder>

    <div class="mt-3">
        <button class="btn btn-primary" onclick="getQuery()">Get Query</button>
    </div>
</div>

<script>
function getQuery() {
    const querybuilder = document.getElementById('querybuilder').ej2_instances[0];
    const query = querybuilder.getRule();
    console.log(JSON.stringify(query));
}
</script>

Step 3: Run the Application

Press Ctrl+F5 to run the application in your browser.

Documentation

Support

License

This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA

About Syncfusion®

Syncfusion® provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:

Web:  Blazor |  ASP.NET Core |  ASP.NET MVC |  JavaScript |  Angular |  React |  Vue

Mobile:  Flutter |  MAUI |  UWP

Desktop:  WinForms |  WPF |  WinUI

Learn more at www.syncfusion.com

sales@syncfusion.com | Toll Free: 1-888-9-DOTNET

Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed.  net9.0 is compatible.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 is compatible.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (1)

Showing the top 1 NuGet packages that depend on Syncfusion.AspNetCore.QueryBuilder:

Package Downloads
Syncfusion.AspNetCore.FormBuilder

Syncfusion® ASP.NET Core FormBuilder package provides a comprehensive suite of FormBuilder control. This control offer extensive customization options such as RTL support, accessibility compliance, and theme support. They are designed to deliver a consistent and interactive user interface across all modern browsers in ASP.NET Core applications.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
35.1.40 0 10/13/2026
35.1.39 89 10/6/2026
35.1.37 127 9/29/2026
34.2.9 106 9/21/2026
34.2.8 116 9/14/2026
34.2.7 121 9/8/2026
34.2.6 109 8/31/2026
34.2.5 126 8/25/2026
34.2.4 208 8/17/2026
34.2.3 123 8/11/2026
34.2.2 150 8/5/2026
34.1.33 141 7/27/2026
34.1.32 132 7/21/2026
34.1.31 135 7/14/2026
34.1.30 133 7/9/2026
34.1.29 182 7/6/2026