Model Binding in ASP.NET MVC Query Builder

27 Aug 20262 minutes to read

Model binding allows you to bind properties for the components used in field, operator, and value columns. To implement model binding, assign the FieldModel, OperatorModel, and ValueModel properties in the QueryBuilder.

CSHTML

@Html.EJS().QueryBuilder("querybuilder").Width("72%").Columns(col =>
   {
       col.Field("EmployeeID").Label("Employee ID").Type("number").Add();
       col.Field("FirstName").Label("First Name").Type("string").Add();
       col.Field("TitleOfCourtesy").Label("Title Of Courtesy").Type("boolean").Values(new List<string> { "Mr.", "Mrs." }).Add();
       col.Field("Title").Label("Title").Type("string").Add();
       col.Field("HireDate").Label("Hire Date").Type("date").Format("dd/MM/yyyy").Add();
       col.Field("Country").Label("Country").Type("string").Add();
       col.Field("City").Label("City").Type("string").Add();
   }).FieldModel(ViewBag.fieldModel).OperatorModel(ViewBag.operatorModel).ValueModel(ViewBag.valueModel).Render()

Default.cs

public ActionResult Index()
    {
            List<string> values = new List<string> { "Mr.", "Mrs." };
            ViewBag.values = values;
            var fieldModel = new { allowFiltering = true, popupHeight = "380px" };
            var operatorModel = new { allowFiltering = true, popupHeight = "380px" };
            var valueModel = new { numericTextBoxModel = new { cssClass = "e-custom" } };
            ViewBag.fieldModel = fieldModel;
            ViewBag.operatorModel = operatorModel;
            ViewBag.valueModel = valueModel;
            return View();
    }