jquery-Query builder usage

Question

Hi I am new to jquery and I came across a product named "jquery-QueryBuilder" and please find its url below

http://mistic100.github.io/jQuery-QueryBuilder/demo.html

I want to implement that in my asp.net mvc project.can any one help me to implement this or provide some useful url regarding if anyone using this

Answer 1

I've just used this component with MVC. These steps should get you started.

Include query-builder.standalone.min.js in your scripts. NB if you put it in your BundleConfig use Bundle not ScriptBundle as the ScriptBundle Minification seems to cause an error.

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

Next I created a QueryBuilderSettings class that holds all the settings for the control once it's serialised into 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 a cut down version to give you the idea if you need other settings then add them to this object.

Make a model object that contains a string for the settings and a string for the returned input. In your controller you can create the settings and serialize them into 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);
}

Your view now 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 form submit I'm putting the JSON string into a hiddenFor string 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's a group
    public string condition { get; set; }
    public List<RuleOrGroup> rules { get; set; }

    //Fields if it's 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; } }
}

Hope that's some use to anyone who stumbles upon this as I couldn't find any examples of using this with MVC out there. Also be kind if it's a poorly constructed answer, it's hard to know how much to put in and what can be cut out.