Table of Contents

This page has been moved, the new location is https://korzh.com/easyquery/docs/how-to/mvc-query-builder-view-in-your-app?.

How to add query builder page from our MVC sample project in your own app

The problem

You would like to add into your own project the same query builder page (or with some little modifications) as in our EQMvc3Demo sample project.

The solution

Below you will find step-by-step description how to achieve the desired goal. We use EQMvc3Demo project as a source but all instructions here can be applied to EQMvc4DemoEF project as well.

1. QueryBuilder.cshtml file

First of all you need the view file itself in your. 

public ActionResult QueryBuilder() {
    return View("QueryBuilder");
}

Run your project and check if this new page can be opened by /Home/QueryBuilder URL. New page will look quite ugly (since we haven't added any CSS files and scripts yet), but it must be opened without errors.

2. Style and scripts for the new page

Now we need to brush up the style of our new page. We have created a special CSS files with default styles for EasyQuery widgets and QueryBuilder page. You need to copy those file into your project's folder, include them into the project and then link to your view page. Additionally you will need to include some JavaScript files. First of all we need JQuery and JQuery-UI scripts. Secondly - eq-all-min.js file which contains all EasyQuery widgets. So:

Here are an example how your new view file may look like after all these changes: 

@{
    ViewBag.Title = "Advanced Search";
}
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
 
    <script src="@Url.Content("~/Scripts/eq-all-min.js")" type="text/javascript"></script>
 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" rel="stylesheet" type="text/css" />
 
    <link href="@Url.Content("~/Content/easyquery.css")" rel="stylesheet" type="text/css" media="screen" />
    <link href="@Url.Content("~/Content/eqview.css")" rel="stylesheet" type="text/css" media="screen" />
 
 
     .  .  .  .  .  .  .  .  .  .  .  .  .

After this step try to open QueryBuilder page once again. Now it must look much better but still does not provide any functionality since we haven't added any server-side code yet.

3. EasyQuery controller

EasyQuery JavaScript widgets make AJAX calls to your server-side code to perform the following tasks:

To implement all these tasks our sample project has special controller: EasyQueryController. You need to copy this controller into your own project and then modify it according to your need. So, your next steps will be:

Now try to run your project and open /Home/QueryBuilder page. Now it should look exactly like in our sample project. You can add columns and conditions and see the result SQL statement. [Execute] will not work since we don't have NWind database in your project. Now it's time to connect this page to your database and your model.

4. Connecting with your model and database

We specially used our demo model for NWind database on the previous step - just to make sure that everything works as expected and we don't have any problem in our server-side code, view markup or scripts. Now it's time to make the final modifications and connect this new query builder page to your project's data. 

        static EasyQueryController() {
 
            dataPath = System.Web.HttpContext.Current.Server.MapPath("~/App_Data");
            dataModelPath = System.IO.Path.Combine(dataPath, "MyModel.xml");
 
            connectionString = "Data Source=localhost;Initial Catalog=MyDatabase;Integrated Security=True"; 
            queriesPath = System.IO.Path.Combine(dataPath, "Queries");
 
            if (!Directory.Exists(queriesPath)) 
                Directory.CreateDirectory(queriesPath);
 
            Model = new DbModel();
            Model.LoadFromFile(dataModelPath);
        }
 
 
        protected override DataModel GainModel() { 
            return Model;
        }
 
        protected override Query CreateQuery() {
            DbQuery dbQuery = new DbQuery();
            dbQuery.Formats.SetDefaultFormats(FormatType.MsSqlServer);
 
            return dbQuery;
        }

That's all! Now your application has it's own form for advanced search!

5. Alternative ways of model loading

For some projects it's not necessary to create model “manually” using Data Model Editor. EasyQuery has several other options to load and fill data model. Here are some of them: 

    Model.LoadFromDBContext(myDbContext.GetType(), DbContextOptions.IncludeComplexTypesInParentEntity);