Model Binding in ASP.NET CORE 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.

@{
    ...
    List<string> values = new List<string> { "Mr.", "Mrs." };
	var fieldModel = new { allowFiltering = true, popupHeight = "380px" };
	var operatorModel = new { allowFiltering = true, popupHeight = "380px" };
	var valueModel = new { numericTextBoxModel = new { cssClass = "e-custom" } };
}

<ejs-querybuilder id="querybuilder" width="73%" fieldModel=fieldModel operatorModel="operatorModel" valueModel="valueModel">
	<e-querybuilder-columns>
		<e-querybuilder-column field="EmployeeID" label="Employee ID" type="number"></e-querybuilder-column>
		<e-querybuilder-column field="FirstName" label="First Name" type="string"></e-querybuilder-column>
		<e-querybuilder-column field="TitleOfCourtesy" label="Title Of Courtesy" type="boolean" values="values"></e-querybuilder-column>
		<e-querybuilder-column field="Title" label="Title" type="string"></e-querybuilder-column>
		<e-querybuilder-column field="HireDate" label="Hire Date" type="date" format="dd/MM/yyyy"></e-querybuilder-column>
		<e-querybuilder-column field="Country" label="Country" type="string"></e-querybuilder-column>
		<e-querybuilder-column field="City" label="City" type="string"></e-querybuilder-column>
	</e-querybuilder-columns>
 </ejs-querybuilder>
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();
    }