When the Query Builder should be loaded on demand and/or called several times on the page without memory leakage on both the client and server sides, you can fire its load and destroy via AQB JavaScript API or using the Partial Views concept. Both ways are described below.

1. Using AQB JavaScript API:

This method is suitable for use in an MVC project as well as when working in the client-side rendering mode. 

Put the initial HTML layout on the page once and then call the following JavaScript code to start/stop the component:

<script>
    var script = null;
    var link = null;

    $(function() {
        $('.create').click(function() { // call to start the component
            loadScript();
            loadStyle();

            $(this).hide();
            $('.destroy').show();

            setTimeout(function() {
                AQB.startApplication();
            }, 1000);
        });

        $('.destroy').click(function() { // call to release the component
            $(this).hide();
            $('.create').show();

            AQB.Web.dispose();

            if (script)
                script.remove();
        });
    });

    function loadScript() {
        script = document.createElement('script');
        script.setAttribute('src', '/queryBuilder.js');

        document.body.appendChild(script);
    }

    function loadStyle() {
        if (link)
            return;

        link = document.createElement('link');
        link.setAttribute('href', '/ActiveQueryBuilder/Handler/resources/style/qb');
        link.setAttribute('type', 'text/css');
        link.setAttribute('rel', 'stylesheet');

        document.body.appendChild(link);
    }
</script>

 

This way is illustrated in the "Deferred Load and Explicit Release" demo from the MVC demo project.

2. Using Partial Views:

This method is suitable only for MVC projects.

This way you put the component's HTML layout into a partial view and load it each time the component starts:

<script>
    $('.change').click(function() {
        $.ajax({
            type: 'POST',
            url: '/ChangeConnection/ChangePartial',
            data: {
                name: this.innerText
            },
            success: function (data) {
                if (window.AQB != null) 
                    AQB.Web.dispose(); // Disposing a namespace which leads to the release of all allocated memory on both client and server.

                $('.query-builder-container').html(data); // Anticipating all the necessary code and scripts returned from the partial view.

                AQB.Web.onQueryBuilderReady(function (qb) {
                    qb.on(qb.Events.SqlChanged, function () { // sample subscription to query changes made in the UI.
                        isQueryChanged = true;
                    });
                    qb.on(qb.Events.SQLTextChanged, function () { // sample subscription to SQL text changes made by the user.
                        isQueryChanged = true;
                    });
                });

                AQB.startApplication(); // Subscribing to changes first, then running the application.
            }
        });
    });
</script>

Don't forget to call the AQB.startApplication() method after loading the layout.

This way is illustrated in the "Switch Database Connections using Partial Views" demo from the MVC demo project.

--

We believe that the first way has less overload, as you don't have to load the HTML code again for each component load, so we prefer it, but the choice is up to you.