Important:

This guide is for MVC 3 and higher, ASPX view engine only!

Please refer to the appropriate guides for other environments:
Follow the steps below to install Active Query Builder ASP.NET Edition to your project. If you already have the component installed in your project and need further information about getting or setting the SQL query text, please refer to the How to get and set SQL text in ASP.NET Edition: ASPX View engine article.

Easy installation
by using the NuGet package:

  1. Add the NuGet Package Manager Visual Studio extension.
  2. Add the "Active Query Builder ASP.NET Edition" NuGet package to your project.
  3. Add typical HTML code and the component's initialization code to your web page.

Traditional installation
by following the steps of this guide:

  1. Add the necessary assemblies.
  2. Add the necessary modules according to your IIS version and routes.
  3. Add the necessary JavaScript and CSS files.
  4. Load JavaScript libraries manually or using the BundleConfig.
  5. Add typical HTML code and the component's initialization code to your web page.
  1. Create a new solution and add a new project - ASP.NET MVC 4 Web Application, select the "ASPX" option for the "View engine" setting.
    The steps below can be skipped in case of using the "Active Query Builder ASP.NET Edition" NuGet package.
    Proceed to the final steps in case of using it.
  2. Add the following assembly references to your project:
    • \assemblies\.NET 2.0\ActiveDatabaseSoftware.ActiveQueryBuilder2.dll
    • \assemblies\.NET 2.0\ActiveDatabaseSoftware.ActiveQueryBuilder2.Web.dll
    • \assemblies\.NET 2.0\ActiveDatabaseSoftware.ActiveQueryBuilder2.Web.Control.dll
    • \assemblies\.NET 2.0\ActiveDatabaseSoftware.ActiveQueryBuilder2.Web.Server.dll
    • \assemblies\third-party\Net40\Newtonsoft.Json.dll
    • \assemblies\third-party\log4net.dll
    You may also need to add the assemblies for specific metadata providers to retrieve metadata from a database, e.g.:
    • \assemblies\.NET 2.0\ActiveDatabaseSoftware.OLEDBMetadataProvider.dll
    Is it necessary to set the CopyLocal property of "ActiveDatabaseSoftware.ActiveQueryBuilder2.*" assemblies to True. This isn't done automatically in case of instructing to install the component to the Toolbox because assemblies are installed to GAC in this case.
  3. Apply the necessary changes to the "web.config" file according to your web server version.
    • For IIS 6 or Visual Studio Development Server, add the following module to the "configuration/system.web/modules" section:
      <add name="HttpModule"
          type="ActiveDatabaseSoftware.ActiveQueryBuilder.Web.Server.HttpModule,
          ActiveDatabaseSoftware.ActiveQueryBuilder2.Web.Server"/>
      and the following assembly to the "configuration/system.web/compilation" section:
      <assemblies>
          <add assembly="System.Windows.Forms, Version=2.0.0.0, Culture=neutral,
          PublicKeyToken=B77A5C561934E089" />
      </assemblies>
    • For IIS 7 and higher, add the following module to the "configuration/system.webServer/modules" section:
      <remove name="Session" />
      <add name="Session" type="System.Web.SessionState.SessionStateModule"
          preCondition="managedHandler" />
      <add name="HttpModule" preCondition="integratedMode"
          type="ActiveDatabaseSoftware.ActiveQueryBuilder.Web.Server.HttpModule,
          ActiveDatabaseSoftware.ActiveQueryBuilder2.Web.Server" />
      and the following assembly to the "configuration/system.web/compilation" section:
      <assemblies>
          <add assembly="System.Windows.Forms, Version=2.0.0.0, Culture=neutral,
          PublicKeyToken=B77A5C561934E089" />
      </assemblies>
  4. Add the following route to the RegisterRoutes method in the RouteConfig file:
    routes.Add(ActiveDatabaseSoftware.ActiveQueryBuilder.Web.Mvc.Routing.GetRoute());
    If you want to change the default HTTP handler URL for this route ("/ActiveQueryBuilderHandler.axd"), you can specify it as a parameter for the GetRoute method.
  5. Get the content from the "web_parts" directory ("css", "img" and "js" sub-folders) and put it in the directory of the web page or the parent control.
  6. To load the necessary JavaScript libraries and stylesheets set the QueryBuilderControl.LoadJScript property to False and add the following code to the <HEAD> tag of your master page:
    <%: Scripts.Render("~/bundles/ActiveQueryBuilder") %>
    <%: Styles.Render("~/css/ActiveQueryBuilder") %>
    Add the following code to the RegisterBundles method of the BundleConfig class if your project already uses the jQuery and jQueryUI JavaScript libraries:
    bundles.Add(new ScriptBundle("~/bundles/ActiveQueryBuilder").Include(
        "~/js/release/usr_vX_X_X.js"));
    bundles.Add(new StyleBundle("~/css/ActiveQueryBuilder").Include(
        "~/css/qb-theme.css"));
    Or the following code if your project does not use the jQuery library:
    bundles.Add(new ScriptBundle("~/bundles/ActiveQueryBuilder").Include(
        "~/js/release/jquery.js",
        "~/js/release/jquery-ui.js",
        "~/js/release/usr_vX_X_X.js"));
    bundles.Add(new StyleBundle("~/css/ActiveQueryBuilder").Include(
        "~/css/qb-theme.css",
        "~/css/themes/jquery-ui.css"));
    Note: Replace "X_X_X" in the "usr_vX_X_X.js" file name with the actual version number, for example "usr_v2_9_0.js" for version 2.9.0.
    • Active Query Builder ASP.NET Edition requires jQuery 1.11 or higher, and jQueryUI 1.10.4 or higher, latest versions of the 2.x branch are recommended.
    • The default CSS theme allows for flex layout of controls, but limits support of web browsers (details). To get Active Query Builder compatible with legacy web browsers (IE 8-9), use the old CSS files contained the "web_parts\legacy_css" folder.
  7. Add the following content to your \Views\SomeController\SomeAction.aspx file. Also you can find typical HTML code in the "web_parts\!MVC" folder.
    <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
    <%@ Import Namespace="System.Data.OleDb" %>
    <%@ Import Namespace="ActiveDatabaseSoftware.ActiveQueryBuilder" %>
    <%@ Register Assembly="ActiveDatabaseSoftware.ActiveQueryBuilder.Web.Control" Namespace="ActiveDatabaseSoftware.ActiveQueryBuilder.Web.Control" TagPrefix="AQB" %>
    
    <script runat="server">
    public void QueryBuilderControl1_Init(object sender, EventArgs e)
    {
        // Get instance of the QueryBuilder object
        var queryBuilder = QueryBuilderControl1.QueryBuilder;
    
        // create an instance of the proper syntax provider for your database server.
        // - use the AutoSyntaxProvider if you want to detect your database server automatically
        //   (autodetection works in case of live database connection only);
        // - use one of the ANSI-compatible or Generic syntax provider only if you can't find 
        //   the right syntax provider for your database server.
    
        var syntaxProvider = new MSSQLSyntaxProvider();
        queryBuilder.SyntaxProvider = syntaxProvider;
    
        // Metadata source definition. Choose a) or b):
        // 
        // a) you can load metadata from live database connection
    
        var connection = new OleDbConnection {ConnectionString = "<your connection string here>"};
        queryBuilder.MetadataProvider = new OLEDBMetadataProvider {Connection = connection};
    
        // b) or you can load metadata from the pre-generated XML file
    
        // Deny metadata loading requests from the metadata provider
        queryBuilder.OfflineMode = true;
    
        var pathToXml = Server.MapPath("~\Path\to\file.xml");
        queryBuilder.MetadataContainer.ImportFromXML(pathToXml);
    
        // end of b)
    
        // Initialization of the Metadata Structure object that's
        // responsible for representation of metadata in a tree-like form
        try
        {
            // Clear and load the first level of the metadata structure tree
            queryBuilder.MetadataStructure.Refresh();
        }
        catch (Exception ex)
        {
            Logger.Error("Error loading metadata", ex);
        }
    }
    </script>
    
    <asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
        Home Page - My ASP.NET MVC Application
    </asp:Content>
    <asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
    
        <AQB:QueryBuilderControl ID="QueryBuilderControl1" runat="server" OnInit="QueryBuilderControl1_Init"/>
        <div id="all">
            <div id="content-container">
                <div id="qb-ui">
                    <AQB:ObjectTreeView ID="ObjectTree1" runat="server" />
                    <div id="center">
                        <AQB:SubQueryNavigationBar ID="SubQueryNavigationBar1" runat="server" />
                        <div class="qb-ui-canvas-container block-flat">
                            <AQB:Canvas ID="Canvas1" runat="server" />
                            <AQB:StatusBar ID="StatusBar1" runat="server" />
                            <AQB:Grid ID="Grid1" runat="server" />
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            <AQB:SqlEditor ID="SQLEditor1" runat="server"></AQB:SqlEditor>
        </div>
    
    </asp:Content>
    The initialization code should be placed in the QueryBuilderControl.Init event handler. There you should create Metadata and Syntax provider components and link these providers to the QueryBuilder object by setting the MetadataProvider and SyntaxProvider properties. Define a proper database connection object as a source for the Metadata provider or load metadata from the XML file.
    The server side of the component is based on the WinForms .NET Edition of Active Query Builder. There are two object references available to get access to their methods and properties: QueryBuilderControl.QueryBuilder and QueryBuilderControl.PlainTextSQLBuilder.
    Targeting the project for .NET Framework 4.5, it is necessary to set the QueryBuilderControl.HttpCompressionEnabled property to False.
  8. That's all! Now you can run your application.

Is this article helpful for you?