Creating Dynamic Forms from a JSON File
Environment
Product | Telerik UI for ASP.NET Core Form |
Progress Telerik UI for ASP.NET Core version | Created with the 2023.3.1114 version |
Description
How can I generate dynamic Telerik UI for ASP.NET Core Forms through a JSON file?
Solution
-
Create the JSON file with the following structure and save it into the application.
[{ "Id": 16014, "Properties": [ { "Property": "Name", "EditorType": "TextBox" }, { "Property": "StartDate", "EditorType": "DatePicker" }, { "Property": "IsActive", "EditorType": "CheckBox" }, { "Property": "Country", "EditorType": "DropDownList" } ] }, { "Id": 18231, "Properties": [ { "Property": "Name", "EditorType": "TextBox" }, { "Property": "IsActive", "EditorType": "CheckBox" } ] }]
-
Create the following Models:
-
FormViewModel—The Model that defines the properties and structure of the JSON data.
public class FormViewModel { public int Id { get; set; } // The unique Form Id. public List<FormItems> Properties { get; set; } // The properties that will be used to populate the Form items. }
-
FormItems—The Model that represents the Form item.
public class FormItems { public string Property { get; set; } // The name of the property that will bind to each Form item. public string EditorType { get; set; } // The name of the editor. }
-
UserViewModel—The Model to which each Form will bind.
public class UserViewModel { public string Name { get; set; } public DateTime StartDate { get; set; } public bool IsActive { get; set; } public int Country { get; set; } }
-
-
Use the
JsonConvert.DeserializeObject<T>()
method to convert the JSON content from the file into aList<FormViewModel>
objects.using Newtonsoft.Json; public ActionResult Index() { var formDataitems = PopulateFormItems(); return View(formDataitems); } private List<FormViewModel> PopulateFormItems() { var path = Path.Combine("wwwroot/formData.json"); var items = new List<FormViewModel>(); items = JsonConvert.DeserializeObject<List<FormViewModel>>(System.IO.File.ReadAllText(path)); return items; }
-
Access the Model collection in the View and loop through each FormViewModel record to generate the respective Forms. Within the Form
Items()
configuration, loop through the nested Properties collection and define the editor of each item based on the value of the EditorType property.@model List<FormViewModel> @foreach (var item in Model) { @(Html.Kendo().Form<UserViewModel>() .Name("form_" + item.Id) .HtmlAttributes(new { action = "/Home/SaveForm", method = "POST" }) .FormData(new UserViewModel()) .Orientation("horizontal") .Validatable(v => { v.ValidateOnBlur(true); v.ValidationSummary(vs => vs.Enable(false)); }) .Items(i => { foreach (var prop in item.Properties) { if (prop.EditorType == "DatePicker") { i.Add() .Field(prop.Property) .Label(l => l.Text(prop.Property)) .Editor(e => e.DatePicker()); } else if (prop.EditorType == "DropDownList") { i.Add() .Field(prop.Property) .Label(l => l.Text(prop.Property)) .Editor(e => { e.DropDownList() .DataTextField("Text") .DataValueField("Value") .BindTo(new List<SelectListItem>() { new SelectListItem() { Text = "Country 1", Value = "1" }, new SelectListItem() { Text = "Country 2", Value = "2" }, new SelectListItem() { Text = "Country 3", Value = "3" } }); }); } else if (prop.EditorType == "CheckBox") { i.Add() .Field(prop.Property) .Label(l => l.Text(prop.Property)) .Editor(e => e.CheckBox()); } else { i.Add() .Field(prop.Property) .Label(l => l.Text(prop.Property)) .Editor(e => e.TextBox()); } } }) ) }
@addTagHelper *, Kendo.Mvc @{ var countries = new List<SelectListItem>() { new SelectListItem() { Text = "Country 1", Value = "1" }, new SelectListItem() { Text = "Country 2", Value = "2" }, new SelectListItem() { Text = "Country 3", Value = "3" } }; } @model List<FormViewModel> @foreach (var item in Model) { <kendo-form name="form_@item.Id" form-data="new UserViewModel()" orientation="horizontal" action="SaveForm" method="POST"> <form-items> @foreach (var prop in item.Properties) { if (prop.EditorType == "DatePicker") { <form-item field=@prop.Property> <item-label text=@prop.Property /> <datepicker-editor /> </form-item> } else if (prop.EditorType == "DropDownList") { <form-item field=@prop.Property> <item-label text=@prop.Property /> <dropdownlist-editor datatextfield="Text" datavaluefield="Value" bind-to="countries" /> </form-item> } else if (prop.EditorType == "CheckBox") { <form-item field=@prop.Property > <switch-editor> <messages checked="Active" unchecked="Inactive" /> </switch-editor> </form-item> } else { <form-item field=@prop.Property> <item-label text=@prop.Property /> <textbox-editor /> </form-item> } } </form-items> <validatable validate-on-blur="true" /> </kendo-form> }