Getting started with EasyQuery ASP.NET MVC (old way)

First of all we need jQuery and jQuery UI scripts and CSS files since EasyQuery controls are implemented as jQuery widgets. Secondly, the EasyQuery scripts themself. The best place for them is at the bottom of your page before closing </body> tag. You can use the scripts from our CDN:

    <script src="http://cdn.korzh.com/eq/eq.all.min.js" type="text/javascript"></script>
    <script src="http://cdn.korzh.com/eq/eq.view.js" type="text/javascript"></script>

or local scripts:

    <script src="@Url.Content("~/Scripts/eq.all.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/eq.view.js")" type="text/javascript"></script>

To add local scripts into your project use the files placed in \JS sub-folder of EasyQuery's installation folder.

Then you need to add CSS files as well:

    <link href="http://cdn.korzh.com/eq/themes/default/easyquery.css" rel="stylesheet" type="text/css />
 
    <link href="http://cdn.korzh.com/eq/themes/default/eqview.css" rel="stylesheet" type="text/css" />

Finally we need to define our visual widgets on the web-page and connect them with our server-side service. First of all we need to define the placeholders for our widgets:

<div id="EntitiesPanel" class="entities-panel"></div>
.  .  .  .  .  .  .  .  .  .    
<div id="ColumnsPanel" class="columns-panel"></div>
.  .  .  .  .  .  .  .  .  .    
<div id="QueryPanel" class="query-panel"></div>

It's better to give them the same IDs as in example above since in this case they will be automatically accessible by EasyQuery's client-side scripts (without additional configuration). That's all.

Additionally you may need to specify some options for EasyQuery widgets. To do that you need to define one more <script> section on our page and initialize EasyQuery widgets:

<script type="text/javascript">
    $(document).ready(function () {
        EQ.client.init({
            serviceUrl: "/EasyQuery",
            modelName: "NWind",
            queryPanel: {},
            columnsPanel: { allowAggrColumns: false}
        });
    });
</script>

The script above initializes the widgets. You can set different parameter of those widgets using queryPanel, columnsPanel or entitiesPanel properties of the object passed in the parameter to init() method. Finally you need some code which passes the query built by use to the server and processes the results (SQL statement and/or result dataset).

<script>
    function buildQuery() {
        var QueryPanelBlock = $("#QueryPanel");
        var query = QueryPanelBlock.QueryPanel('option', 'query');
 
        EQ.client.buildQuery({
            "query": query,
            success: function (result) {
                BuildQuerySuccess(result.statement);
            },
            error: function (jqXHR, textStatus, errorThrown) {
            }
        });
    }
 
 
    function buildAndExecute() {
        var QueryPanelBlock = $("#QueryPanel");
        var query = QueryPanelBlock.QueryPanel('option', 'query');
 
        EQ.client.buildAndExecute({
            "query": query,
            success: function (result) {
                BuildQuerySuccess(result.statement);
                ExecuteSQLSuccess(result.resultSet);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert("Error: " + errorThrown);
            }
        });
    }
 
    function BuildQuerySuccess(sqlText) {
       window.alert(sqlText);
    }
 
 
    function ExecuteSQLSuccess(gridJson) {
       window.alert(gridJson);
    }
 
 
</script>

Here is an article which describes how to make such modifications.