Using jquery-Query builder

Question

Hi, I'm new to jquery and I came across a product called "jquery-QueryBuilder" and please find its URL below

http://mistic100.imtqy.com/jQuery-QueryBuilder/demo.html

I want to implement this in my asp.net mvc project. Anyone can help me implement this or provide some useful url regarding someone who uses this

Answer 1

I just used this component with MVC. These steps will help you get started.

Include query-builder.standalone.min.js in your scripts. NB, if you put it in your BundleConfig, use the Bundle not ScriptBundle, since, as a rule, a ScriptBundle Minification fails, it causes an error.

bundles.Add(new Bundle("~/bundles/queryBuilder").Include("~/Content/js/query-builder.standalone.min.js")); 

Next, I created the QueryBuilderSettings class, which contains all the settings for the control after it is serialized in JSON

 public class QueryBuilderSettings { public List<Filter> filters { get; set; } public bool allow_empty { get; set; } public int allow_groups { get; set; } } public class Filter { public string id { get; set; } public string label { get; set; } [JsonConverter(typeof(StringEnumConverter))] public FilterType? type { get; set; } [JsonProperty(ItemConverterType = typeof(StringEnumConverter))] public List<FilterOperators> operators { get; set; } [JsonConverter(typeof(StringEnumConverter))] public InputType? input { get; set; } public List<object> values { get; set; } } public enum FilterType { @string, @integer, @double, @date, @time, @datetime, @boolean } public enum FilterOperators { equal, not_equal, @in, not_in, less, less_or_equal, greater, greater_or_equal, between, not_between, begins_with, not_begins_with, contains, not_contains, ends_with, not_ends_with, is_empty, is_not_empty, is_null, is_not_null } public enum InputType { text, textarea, radio, checkbox, select } 

This is an abridged version to give you an idea of ​​the need for other settings, and then add them to this object.

Create a model object containing a string for the parameters and a string for the input returned. In your controller you can create settings and serialize them in JSON

 public ActionResult Index() { QueryScreen query = new QueryScreen(); QueryBuilderSettings settings = new QueryBuilderSettings(); settings.allow_empty = true; settings.allow_groups = 1; settings.filters = new List<Models.Filter>(); settings.filters.Add(new Models.Filter() { id = "Sku", label = "Sku", type = FilterType.@string , operators = new List<FilterOperators>() { FilterOperators.equal, FilterOperators.not_equal, FilterOperators.begins_with, FilterOperators.not_begins_with } }); settings.filters.Add(new Models.Filter() { id = "EnglishDesc", label = "English Desc", type = FilterType.@string , operators = new List<FilterOperators>() { FilterOperators.contains, FilterOperators.not_contains } }); query.QuerySetup = Newtonsoft.Json.JsonConvert.SerializeObject(settings) return View(query); } 

Now your view needs to apply the settings to the control.

 <script> $(function () { $(document).ready(function () { $('#builder').queryBuilder(@Html.Raw(Model.QuerySetup)); }) $("form").submit(function () { $('#Query').val(JSON.stringify($('#builder').queryBuilder('getRules', { get_flags: true }), undefined, 2)); return true; }) }); </script> <div class="col-md-12 col-lg-10 col-lg-offset-1"> <div id="builder"></div> @using (Ajax.BeginForm("GetResults", "Home", new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "Post", UpdateTargetId = "results", LoadingElementId = "loading" }, new { @class = "form-inline", role = "form" })) { @Html.HiddenFor(m => m.Query) <button class="btn btn-primary" type="submit">Go</button> } <div id="results"></div> <div id="loading"></div> </div> 

Also on the submit form, I put the JSON line in the hiddenFor line on the model.

Then in the controller you can take this JSON string and parse it into a C # object

 [HttpPost] public PartialViewResult GetResults(QueryScreen screen) { RuleOrGroup query = (RuleOrGroup)Newtonsoft.Json.JsonConvert.DeserializeObject(screen.Query, typeof(RuleOrGroup)); //do some stuff return a view. } public class RuleOrGroup { //Fields if it a group public string condition { get; set; } public List<RuleOrGroup> rules { get; set; } //Fields if it a Rule public string id { get; set; } public string field { get; set; } public FilterType type { get; set; } public string input { get; set; } public FilterOperators @operator { get; set; } public string value { get; set; } public bool IsAGroup { get { return condition != null; } } } 

Hopefully some of them will be used by anyone who stumbles upon this, as I could not find examples of using this with MVC there. Also, please, if this is a poorly constructed answer, it is difficult to understand how much to put and what can be cut.

Answer 2

Here is a simple fiddle.

https://jsfiddle.net/gbegley/k2f46297/

Look for dependencies, which can be a bit of a challenge to collect and provide to your users.

 <span id="getsql">Get SQL</span> <br/> <br/> <div id="queryBuilderGoesHere"></div> <div id="sql"></div> <script> $("#getsql").addClass("ltblue"); var myFilters = [{ id: 'column1', label: 'Column 1', type: 'string' }, { id: 'column2', label: 'Column 2', type: 'double' }, { id: 'column3', label: 'Column 3', type: 'boolean' }]; $("#queryBuilderGoesHere").queryBuilder({ filters: myFilters }); $("#getsql").on('click', function () { var sqlob = $("#queryBuilderGoesHere").queryBuilder("getSQL", false); $("#sql").text(sqlob.sql); }); </script> 

Answer 3

This is my implementation:

Class QueryBuilderSettings.cs

 using System; using System.Diagnostics; using System.Collections.Generic; using System.Linq; using System.Text; [Serializable] public class QueryBuilderSettings { public List<QueryBuilderFilter> filters { get; set; } public List<string> plugins { get; set; } public QueryBuilderSettings() { this.filters = new List<QueryBuilderFilter>(); this.plugins = new List<string>(); } } public class QueryBuilderFilter { public string id { get; set; } public string label { get; set; } public string type { get; set; } public List<string> operators { get; set; } public string input { get; set; } //public List<object> values { get; set; } public Dictionary<string, string> values { get; set; } public QueryBuilderFilter() { } public QueryBuilderFilter(string id, string label, QueryBuilderDataType type, List<QueryBuilderFilterOperators> ops, QueryBuilderInputType input, Dictionary<string, string> values) { this.id = id; this.label = label; this.type = type.ToString(); this.operators = new List<string>(); foreach (QueryBuilderFilterOperators op in ops) { this.operators.Add(op.ToString()); } this.input = input.ToString(); this.values = values; } public static QueryBuilderDataType GetQueryBuilderDataType(string PropertyInputType) { QueryBuilderDataType QBFilterType; switch(PropertyInputType) { case "bool": QBFilterType = QueryBuilderDataType.boolean; break; case "DateTime": QBFilterType = QueryBuilderDataType.datetime; break; case "Date": QBFilterType = QueryBuilderDataType.date; break; case "Time": QBFilterType = QueryBuilderDataType.time; break; case "double": QBFilterType = QueryBuilderDataType.@double ; break; case "int": QBFilterType = QueryBuilderDataType.integer; break; case "enum_dropdown": case "dropdown": case "html": case "stringChar": case "stringLine": QBFilterType = QueryBuilderDataType.@string ; break; default: QBFilterType = QueryBuilderDataType.@string ; break; } return QBFilterType; } public static QueryBuilderInputType GetQueryBuilderInputType(string PropertyType) { QueryBuilderInputType QBInputType; switch (PropertyType) { case "bool": QBInputType = QueryBuilderInputType.radio; break; case "enum": QBInputType = QueryBuilderInputType.select; break; case "DateTime": case "double": case "int": case "string": QBInputType = QueryBuilderInputType.text; break; default: QBInputType = QueryBuilderInputType.text; break; } return QBInputType; } public static List<QueryBuilderFilterOperators> GetQueryBuilderFilterOperator(QueryBuilderInputType? QBInputType ) { List<QueryBuilderFilterOperators> QBFilterOps = new List<QueryBuilderFilterOperators>(); switch (QBInputType) { case QueryBuilderInputType.text: QBFilterOps = DefaultTextOperators; break; case QueryBuilderInputType.textarea: QBFilterOps = DefaultTextAreaOperators; break; case QueryBuilderInputType.radio: QBFilterOps = DefaultRadioOperators; break; case QueryBuilderInputType.checkbox: QBFilterOps = DefaultCheckBoxOperators; break; case QueryBuilderInputType.select: QBFilterOps = DefaultSelectOperators; break; case null: QBFilterOps = DefaultBlankOperators; break; default: QBFilterOps = DefaultAllOperators; break; } return QBFilterOps; } 

// List of default operators for convenience

 public static List<QueryBuilderFilterOperators> DefaultTextOperators = new List<QueryBuilderFilterOperators> { QueryBuilderFilterOperators.equal, QueryBuilderFilterOperators.not_equal, QueryBuilderFilterOperators.@in , QueryBuilderFilterOperators.not_in, QueryBuilderFilterOperators.less, QueryBuilderFilterOperators.less_or_equal, QueryBuilderFilterOperators.greater, QueryBuilderFilterOperators.greater_or_equal, QueryBuilderFilterOperators.between, QueryBuilderFilterOperators.not_between, QueryBuilderFilterOperators.begins_with, QueryBuilderFilterOperators.not_begins_with, QueryBuilderFilterOperators.contains, QueryBuilderFilterOperators.not_contains, QueryBuilderFilterOperators.ends_with, QueryBuilderFilterOperators.not_ends_with, QueryBuilderFilterOperators.is_empty, QueryBuilderFilterOperators.is_not_empty, QueryBuilderFilterOperators.is_null, QueryBuilderFilterOperators.is_not_null }; public static List<QueryBuilderFilterOperators> DefaultTextAreaOperators = new List<QueryBuilderFilterOperators> { QueryBuilderFilterOperators.equal, QueryBuilderFilterOperators.not_equal, QueryBuilderFilterOperators.@in , QueryBuilderFilterOperators.not_in, QueryBuilderFilterOperators.less, QueryBuilderFilterOperators.less_or_equal, QueryBuilderFilterOperators.greater, QueryBuilderFilterOperators.greater_or_equal, QueryBuilderFilterOperators.between, QueryBuilderFilterOperators.not_between, QueryBuilderFilterOperators.begins_with, QueryBuilderFilterOperators.not_begins_with, QueryBuilderFilterOperators.contains, QueryBuilderFilterOperators.not_contains, QueryBuilderFilterOperators.ends_with, QueryBuilderFilterOperators.not_ends_with, QueryBuilderFilterOperators.is_empty, QueryBuilderFilterOperators.is_not_empty, QueryBuilderFilterOperators.is_null, QueryBuilderFilterOperators.is_not_null }; public static List<QueryBuilderFilterOperators> DefaultRadioOperators = new List<QueryBuilderFilterOperators> { QueryBuilderFilterOperators.equal, QueryBuilderFilterOperators.not_equal, QueryBuilderFilterOperators.is_empty, QueryBuilderFilterOperators.is_not_empty, QueryBuilderFilterOperators.is_null, QueryBuilderFilterOperators.is_not_null }; public static List<QueryBuilderFilterOperators> DefaultCheckBoxOperators = new List<QueryBuilderFilterOperators> { QueryBuilderFilterOperators.@in , QueryBuilderFilterOperators.not_in, QueryBuilderFilterOperators.is_empty, QueryBuilderFilterOperators.is_not_empty, QueryBuilderFilterOperators.is_null, QueryBuilderFilterOperators.is_not_null }; public static List<QueryBuilderFilterOperators> DefaultSelectOperators = new List<QueryBuilderFilterOperators> { QueryBuilderFilterOperators.equal, QueryBuilderFilterOperators.not_equal, QueryBuilderFilterOperators.is_empty, QueryBuilderFilterOperators.is_not_empty, QueryBuilderFilterOperators.is_null, QueryBuilderFilterOperators.is_not_null }; public static List<QueryBuilderFilterOperators> DefaultBlankOperators = new List<QueryBuilderFilterOperators>(); public static List<QueryBuilderFilterOperators> DefaultAllOperators = new List<QueryBuilderFilterOperators> { QueryBuilderFilterOperators.equal, QueryBuilderFilterOperators.not_equal, QueryBuilderFilterOperators.@in , QueryBuilderFilterOperators.not_in, QueryBuilderFilterOperators.less, QueryBuilderFilterOperators.less_or_equal, QueryBuilderFilterOperators.greater, QueryBuilderFilterOperators.greater_or_equal, QueryBuilderFilterOperators.between, QueryBuilderFilterOperators.not_between, QueryBuilderFilterOperators.begins_with, QueryBuilderFilterOperators.not_begins_with, QueryBuilderFilterOperators.contains, QueryBuilderFilterOperators.not_contains, QueryBuilderFilterOperators.ends_with, QueryBuilderFilterOperators.not_ends_with, QueryBuilderFilterOperators.is_empty, QueryBuilderFilterOperators.is_not_empty, QueryBuilderFilterOperators.is_null, QueryBuilderFilterOperators.is_not_null }; } 

// enumerations

 public enum QueryBuilderDataType { @string, @integer, @double, @date, @time, @datetime, @boolean } public enum QueryBuilderFilterOperators { equal, not_equal, @in, not_in, less, less_or_equal, greater, greater_or_equal, between, not_between, begins_with, not_begins_with, contains, not_contains, ends_with, not_ends_with, is_empty, is_not_empty, is_null, is_not_null } public enum QueryBuilderInputType { text, textarea, radio, checkbox, select } 

WebService

 [WebMethod(Description = "Get Query Builder Filter Option")] public QueryBuilderSettings GetQueryBuilderFilterOption() { string QBID; string QBLabel; string propertyInputType; QueryBuilderDataType QBDataType; List<QueryBuilderFilterOperators> QBFilterOperators; string propertyType; QueryBuilderInputType QBInputType; //List<object> dropdownValues = new List<object>(); Dictionary<string, string> dropdownValues = new Dictionary<string, string>(); QueryBuilderSettings settings = new QueryBuilderSettings(); // plugins settings.plugins.Add("bt-tooltip-errors"); settings.plugins.Add("not-group"); settings.plugins.Add("sortable"); // filters List<string> PropertyNames = GetPropertyList(); foreach(string propertyName in PropertyNames) { QBID = propertyName; QBLabel = PropertyTitle[propertyName]; propertyInputType = GetPropertyInputType(propertyName); QBDataType = QueryBuilderFilter.GetQueryBuilderDataType(propertyInputType); propertyType = GetPropertyType(propertyName); QBInputType = QueryBuilderFilter.GetQueryBuilderInputType(propertyType); QBFilterOperators = QueryBuilderFilter.GetQueryBuilderFilterOperator(QBInputType); dropdownValues = GetDropdownDictionary(propertyName); settings.filters.Add(new QueryBuilderFilter(QBID, QBLabel, QBDataType, QBFilterOperators, QBInputType, dropdownValues)); //dropdownValues = new List<object>(); dropdownValues = new Dictionary<string, string>(); //Clear the Dictionary or it will add up all dropdown from different properties } return settings; } 

Call from MyPage.cshtml web page

 <script src="../../Scripts/jQuery.extendext-master/jQuery.extendext.js"></script> <script src="../../Scripts/jquery.query-builder/js/query-builder.min.js"></script> <script src="../../Scripts/jquery.query-builder/js/query-builder.standalone.min.js"></script> <div class="query-builder form-inline"> <div id="builder"></div> </div> <script type="text/javascript"> $(function () { var settings=AjaxFromWebService("../../WS/YourWebService.ASMX/GetQueryBuilderFilterOption", ""); console.log(settings); // you can see the object when you press F12 on your web browser $(document).ready(function () { $('#builder').queryBuilder(settings); }) }); function AjaxFromWebService(Url,JsonData){ var returnData=""; $.ajax({ type: "post", contentType: "application/json; charset=utf-8", url: Url, data: JsonData, dataType: "json", async:false, success: function (result) { if(result.d){ returnData=result.d; } else { } }, error: function () { BootstrapDialog.alert({message:"Ajax failed",type:BootstrapDialog.TYPE_DANGER}); } }); return function(){ return returnData; }(); } </script> 

Answer 4

This is a demo project demonstrating jQuery Builder with dynamic filtering from the backend. Demo project