[Obsolete] Getting started with AQB 2 ASP.NET Edition in MVC 3+ project with Razor view engine

Last modified: 6 years ago

Important:

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

Please refer to the appropriate guides for other environments:

Follow the steps below to install Active Query Builder ASP.NET Edition to your project.

Easy installation by using the NuGet package:	Traditional installation by following the steps of this guide:
Add the NuGet Package Manager Visual Studio extension. Add the "Active Query Builder 2 ASP.NET Edition" NuGet package to your project. Add typical HTML code and the component's initialization code to your web page.	Add the necessary assemblies. Add the necessary modules according to your IIS version and routes. Add the necessary JavaScript and CSS files. Load JavaScript libraries manually or using the BundleConfig. Add typical HTML code and the component's initialization code to your web page.

Create a new solution and add a new project - ASP.NET MVC 3 (4, 5) Web Application, select the "Razor" option for the "View engine" setting.

The steps below can be skipped in case of using the "Active Query Builder 2 ASP.NET Edition" NuGet package.

Proceed to the final steps in case of using it.
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.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
<p">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.

Apply the necessary changes to the "web.config" file according to your web server version.

Add the following module to the "configuration/system.web/httpModules" 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>

Add the following modules 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>

Additionally, you can define the HttpCompressionEnabled and MultipleQueriesPerSession options in the 'web.config' file as follows:

<appSettings>
    <add key="HttpCompressionEnabled" value="false" />
    <add key="MultipleQueriesPerSession" value="false" />
</appSettings>

Targeting the project for .NET Framework 4.5, you must set the HttpCompressionEnabled option to False (this is the default value). You can turn on HTTP compression by means of IIS as described here.

Add the following line to the to the beginning of 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.
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.

Add the following directives to the <head> tag of the layout file (for example, "_Layout.cshtml").

@using ActiveDatabaseSoftware.ActiveQueryBuilder.Web.Mvc.UI

@Html.ActiveQueryBuilder().GetCSS(settings =>
    {
        // Instructs to load the jQueryUI CSS files
        settings.LoadJQuery = true;
        // Determines path to the component's CSS files
        settings.Path = "~/css/";
    })

@Html.ActiveQueryBuilder().GetScripts(settings =>
    {
        // Instructs to load the jQuery and jQueryUI JavaScript libraries
        settings.LoadJQuery = true;
        // Determines path to the component's JavaScript libraries
        settings.Path = "~/js/release/";
    })

Alternatively, you can use the "script" and "style" HTML tags to load the necessary files.

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.

Add the following code to your CSHTML file. Also, you can find typical HTML code in the "web_parts\!Razor" folder.

@using System.Data.SqlClient
@using System.Web.UI.WebControls
@using ActiveDatabaseSoftware.ActiveQueryBuilder
@using ActiveDatabaseSoftware.ActiveQueryBuilder.Web.Mvc.UI
@using ActiveDatabaseSoftware.ActiveQueryBuilder.Web.Server  

@Html.ActiveQueryBuilder(settings =>
    {
        settings.PersistentConnection = false;
        settings.Language = "auto";
        settings.UseCustomLanguageFiles = false;
        settings.CustomLanguagePath = "~/Language Files/";
    }).GetHtml()

<div id="all">
    <div id="content-container">
        <div id="qb-ui">
            @Html.ActiveQueryBuilder().ObjectTreeView(settings =>
            {
                settings.ShowFields = false;
                settings.ShowDescriptons = false;
                settings.SortingType = ObjectsSortingType.None;
            }).GetHtml()
            <div id="center">
                @Html.ActiveQueryBuilder().SubQueryNavigationBar(settings >
                {
                    settings.UnionNavBarVisible = true;
                }).GetHtml()
                <div class="qb-ui-canvas-container block-flat">
                    @Html.ActiveQueryBuilder().Canvas(settings =>
                    {
                        settings.DefaultDatasourceWidth = "auto";
                        settings.DisableDatasourcePropertiesDialog = false;
                        settings.DisableLinkPropertiesDialog = false;
                        settings.DisableQueryPropertiesDialog = false;
                        settings.MaxDefaultDatasourceHeight = "144";
                        // settings.FieldListOptions
                    }).GetHtml()
                    @Html.ActiveQueryBuilder().StatusBar().GetHtml()
                    @Html.ActiveQueryBuilder().Grid(settings =>
                    {
                        settings.OrColumnCount = 2;
                    }).GetHtml()
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    @Html.ActiveQueryBuilder().SqlEditor().GetHtml()
</div>

The settings.* properties provided in the code above are initialized with their default values; they are listed here for reference, so you can remove them in your code unless you want to initialize them with some other value. The complete property reference is available here. Note that the reference has been generated for the ASPX view engine. The properties and events of the QueryBuilderControl ASPX control can be accessed via the ActiveQueryBuilder helper in Razor.

The initialization code must be placed in the Init method in inheritor of the InitializeQueryBuilderAttribute filter applied to the controller method. There you should create Metadata and Syntax providers and link them to the QueryBuilder object via 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 Init event handler can get access to two important object references: item.QueryBuilder and item.PlainTextSQLBuilder.

public class InitializeQBAttribute : InitializeQueryBuilderAttribute
    {
        protected override void Init(ActionExecutingContext filterContext, SessionStoreItem item)
        {
            // Get instance of the QueryBuilder object
            var queryBuilder = item.QueryBuilder;

            // =======================================
            // create an instance of the proper syntax provider for your database server.
            // - use the AutoSyntaxProvider 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;

            // =======================================
            // End of the necessary part of initialization.
            // If you plan to change connection or reload metadata upon user actions, 
            // you can execute the code below at a later stage.
            
            // =======================================
            // 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 = filterContext.HttpContext.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);
            }
        }
    }

public class HomeController : Controller
    {
        [InitializeQB]
        public ActionResult Index()
        {
            return View(); // this view will render the component
        }
    }

That's all! Now you can run your application.

Active Query Builder support area

[Obsolete] Getting started with AQB 2 ASP.NET Edition in MVC 3+ project with Razor view engine

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