f383cf8 — alphons/WebFormBuilder

alphons / WebFormBuilder

Code Commits Branches Issues Collaborators Settings

Nieuwe vorm

alphons <alphons@heijden.com> 15 Sep 2025, 21:29

f383cf868d57dff4735340bb60b448eb61ae63a6

12 files changed

WebFormBuilder/Controllers/FormConfigController.cs
WebFormBuilder/Examples/exampleform.json
WebFormBuilder/Examples/form.json
WebFormBuilder/Examples/formConfigData.json
WebFormBuilder/Examples/password.json
WebFormBuilder/Examples/text.json
WebFormBuilder/Models/Form.cs
WebFormBuilder/Models/FormField.cs
WebFormBuilder/Models/HtmlInputType.cs
WebFormBuilder/wwwroot/WebForm.css
WebFormBuilder/wwwroot/WebForm.js
WebFormBuilder/wwwroot/htmlpage.html

diff --git a/WebFormBuilder/Controllers/FormConfigController.cs b/WebFormBuilder/Controllers/FormConfigController.cs
index 65f4f77..2724ab1 100644
--- a/WebFormBuilder/Controllers/FormConfigController.cs
+++ b/WebFormBuilder/Controllers/FormConfigController.cs
@@ -17,8 +17,10 @@ public class FormConfigController : ControllerBase
 
 			foreach (HtmlInputType type in Enum.GetValues(typeof(HtmlInputType)))
 			{
-				if (type == HtmlInputType.Unknown || type == HtmlInputType.Form)
+				if (type == HtmlInputType.Unknown)
 					continue;
+
+				// for every type, make a button
 				formFields.Add(new FormField
 				{
 					Type = HtmlInputType.Button,
@@ -28,6 +30,15 @@ public class FormConfigController : ControllerBase
 				});
 			}
 
+			formFields.Add(new FormField
+			{
+				Type = HtmlInputType.Button,
+				Name = "exampleform",
+				Label = string.Empty,
+				Value = "Form Example"
+			});
+
+			// button to select formConfigData example
 			formFields.Add(new FormField
 			{
 				Type = HtmlInputType.Button,
@@ -36,6 +47,7 @@ public class FormConfigController : ControllerBase
 				Value = "All of the above"
 			});
 
+			// example the navigation on the left
 			formFields.Add(new FormField
 			{
 				Type = HtmlInputType.Button,
@@ -44,8 +56,10 @@ public class FormConfigController : ControllerBase
 				Value = "This Navigation"
 			});
 
+			// make a form with these buttons
 			var form1 = new Form()
 			{
+				Name = "Form1",
 				HtmlHeader = "<h3>Example</h3>",
 				Action = "/api/SubmitData",
 				Change = "/api/SubmitValue",
@@ -60,7 +74,6 @@ public class FormConfigController : ControllerBase
 			return Ok(form1);
 		}
 
-
 		var jsonFilePath = Path.Combine(AppContext.BaseDirectory, "Examples", name + ".json");
 
 		FileStream stream;
@@ -80,27 +93,14 @@ public class FormConfigController : ControllerBase
 
 		stream = new FileStream(jsonFilePath, FileMode.Open, FileAccess.Read, FileShare.Read, bufferSize: 4096, useAsync: true);
 
-		var list = await JsonSerializer.DeserializeAsync<List<FormField>>(stream) ?? [];
+		var form2 = await JsonSerializer.DeserializeAsync<Form>(stream) ?? new();
 
 		stream.Dispose();
 
 		if (!Enum.TryParse(name, ignoreCase: true, out HtmlInputType typeEnum))
 			return NotFound();
 
-		list.RemoveAll(x => x.Type != typeEnum);
-
-		var form2 = new Form()
-		{
-			HtmlHeader = "<h3>Example</h3>",
-			Action = "/api/SubmitData",
-			Change = "/api/SubmitValue",
-			FieldSets = [new FieldSet()
-				{
-					Id = 0,
-					Legend = "Of the fall",
-					FormFields = list
-				}]
-		};
+		form2.FieldSets[0].FormFields.RemoveAll(x => x.Type != typeEnum);
 
 		return Ok(form2);
 
diff --git a/WebFormBuilder/Examples/exampleform.json b/WebFormBuilder/Examples/exampleform.json
new file mode 100644
index 0000000..ffc3159
--- /dev/null
+++ b/WebFormBuilder/Examples/exampleform.json
@@ -0,0 +1,37 @@
+{
+	"HtmlHeader": "<h1>Dit is een example form</h1>",
+	"Name": "ExampleForm",
+	"Action": "/api/SubmitForm",
+	"Change": "/api/SubmitValue",
+	"FieldSets": [
+		{
+			"Id": 1,
+			"Legend": "Naw gegevens",
+			"FormFields": [
+				{
+					"Name": "Naam"
+				},
+				{
+					"Name": "Adres"
+				},
+				{
+					"Name": "Woonplaats"
+				},
+				{
+					"Type": "Radio",
+					"Name": "Partner",
+					"Options": [ "Ja", "Nee", "Weet niet" ]
+				}
+			]
+		},
+		{
+			"Id": 3,
+			"Legend": "Partner gegevens",
+			"FormFields": [
+				{
+					"Name": "PartnerNaam"
+				}
+			]
+		}
+	]
+}
\ No newline at end of file
diff --git a/WebFormBuilder/Examples/form.json b/WebFormBuilder/Examples/form.json
deleted file mode 100644
index 57e4b32..0000000
--- a/WebFormBuilder/Examples/form.json
+++ /dev/null
@@ -1,41 +0,0 @@
-{
-    "HtmlHeader": "<h1>Dit is een goede header</h1>",
-    "Action": "/api/SubmitForm",
-    "Change": "/api/SubmitValue",
-    "FieldSets": [
-        {
-            "Id": 1,
-            "Legend": "Naw gegevens",
-            "FormFields": [
-                {
-                    "Name": "Naam"
-                },
-                {
-                    "Name": "Adres"
-                },
-                {
-                    "Name": "Woonplaats"
-                }
-            ]
-        },
-        {
-            "Id": 2,
-            "Legend": "Partner keuze",
-            "FormFields": [
-                {
-                    "Type": "Radio",
-                    "Name": "Partner"
-                }
-            ]
-        },
-        {
-            "Id": 3,
-            "Legend": "Partner gegevens",
-            "FormFields": [
-                {
-                    "Name": "PartnerNaam"
-                }
-            ]
-        }
-    ]
-}
\ No newline at end of file
diff --git a/WebFormBuilder/Examples/formConfigData.json b/WebFormBuilder/Examples/formConfigData.json
index 58e25c1..8d817db 100644
--- a/WebFormBuilder/Examples/formConfigData.json
+++ b/WebFormBuilder/Examples/formConfigData.json
@@ -1,5 +1,6 @@
 {
 	"HtmlHeader": "<h1>Dit is een goede header</h1>",
+	"Name": "BigListExample",
 	"Action": "/api/SubmitForm",
 	"Change": "/api/SubmitValue",
 	"FieldSets": [
@@ -7,11 +8,6 @@
 			"Id": 1,
 			"Legend": "Examples",
 			"FormFields": [
-				{
-					"Type": "Form",
-					"Name": "FormName1",
-					"Properties": [ "action=/api/SubmitData", "method=post", "change=/api/SubmitValue" ]
-				},
 				{
 					"Type": "Text",
 					"Name": "username",
@@ -27,7 +23,7 @@
 					"Label": "Email Address",
 					"Placeholder": "Enter your email address",
 					"Tooltip": "We will send important updates to this email.",
-					"Properties": [ "autocomplete=email", "hidden=hidden" ],
+					"Properties": [ "autocomplete=email" ],
 					"Value": "example@example.com"
 				},
 				{
@@ -213,4 +209,3 @@
 		}
 	]
 }
-
diff --git a/WebFormBuilder/Examples/password.json b/WebFormBuilder/Examples/password.json
index 057c56b..bf804d5 100644
--- a/WebFormBuilder/Examples/password.json
+++ b/WebFormBuilder/Examples/password.json
@@ -1,5 +1,6 @@
 {
-	"HtmlHeader": "<h1>Dit is een goede header</h1>",
+	"HtmlHeader": "<h1>Password Example</h1>",
+	"Name": "PasswordExample",
 	"Action": "/api/SubmitForm",
 	"Change": "/api/SubmitValue",
 	"FieldSets": [
@@ -7,11 +8,6 @@
 			"Id": 1,
 			"Legend": "Examples",
 			"FormFields": [
-				{
-					"Type": "Form",
-					"Name": "FormName2",
-					"Properties": [ "action=/api/SubmitData", "method=post", "change=/api/SubmitValue" ]
-				},
 				{
 					"Type": "password",
 					"Name": "password1"
diff --git a/WebFormBuilder/Examples/text.json b/WebFormBuilder/Examples/text.json
index ca7192f..53a7f4e 100644
--- a/WebFormBuilder/Examples/text.json
+++ b/WebFormBuilder/Examples/text.json
@@ -1,5 +1,6 @@
 {
-	"HtmlHeader": "<h1>Dit is een goede header</h1>",
+	"HtmlHeader": "<h1>Textbox example</h1><p>Textboxen zijn cool</p><br/>",
+	"Name": "TextBoxExample",
 	"Action": "/api/SubmitForm",
 	"Change": "/api/SubmitValue",
 	"FieldSets": [
@@ -7,11 +8,6 @@
 			"Id": 1,
 			"Legend": "Naw gegevens",
 			"FormFields": [
-				{
-					"Type": "Form",
-					"Name": "FormName3",
-					"Properties": [ "action=/api/SubmitData", "method=post", "change=/api/SubmitValue" ]
-				},
 				{
 					"Type": "text",
 					"Name": "text1"
@@ -39,5 +35,5 @@
 				}
 			]
 		}
-	]	
+	]
 }
\ No newline at end of file
diff --git a/WebFormBuilder/Models/FormField.cs b/WebFormBuilder/Models/Form.cs
similarity index 64%
rename from WebFormBuilder/Models/FormField.cs
rename to WebFormBuilder/Models/Form.cs
index 27656a6..8ef6d91 100644
--- a/WebFormBuilder/Models/FormField.cs
+++ b/WebFormBuilder/Models/Form.cs
@@ -1,10 +1,13 @@
-﻿namespace WebFormBuilder.Models;
+﻿using System.Text.Json.Serialization;
+
+namespace WebFormBuilder.Models;
 
 public class Form
 {
 	public string HtmlHeader { get; set; } = string.Empty;
 	public string Action { get; set; } = string.Empty;
 	public string Change { get; set; } = string.Empty;
+	public string Name { get; set; } = string.Empty;
 	public List<FieldSet> FieldSets { get; set; } = [];
 }
 
@@ -27,3 +30,37 @@ public class FormField
 	public List<string>? Options { get; set; }
 	public List<string>? Properties { get; set; }
 }
+
+[JsonConverter(typeof(JsonStringEnumConverter))]
+public enum HtmlInputType
+{
+	Unknown,
+	Text,
+	Email,
+	Password,
+	Combobox,
+	Tel,
+	Url,
+	Link,
+	Number,
+	Range,
+	Euro,
+	Date,
+	Time,
+	DateTimeLocal,
+	Month,
+	Week,
+	Color,
+	Textarea,
+	Radio,
+	Checkbox,
+	Select,
+	File,
+	Image,
+	Button,
+	Reset,
+	Hidden,
+	Submit,
+}
+
+
diff --git a/WebFormBuilder/Models/HtmlInputType.cs b/WebFormBuilder/Models/HtmlInputType.cs
deleted file mode 100644
index 480ff4c..0000000
--- a/WebFormBuilder/Models/HtmlInputType.cs
+++ /dev/null
@@ -1,36 +0,0 @@
-﻿using System.Text.Json.Serialization;
-
-namespace WebFormBuilder.Models;
-
-[JsonConverter(typeof(JsonStringEnumConverter))]
-public enum HtmlInputType
-{
-	Unknown,
-	Form, // pseudo element
-	Text,
-	Email,
-	Password,
-	Combobox,
-	Tel,
-	Url,
-	Link,
-	Number,
-	Range,
-	Euro,
-	Date,
-	Time,
-	DateTimeLocal,
-	Month,
-	Week,
-	Color,
-	Textarea,
-	Radio,
-	Checkbox,
-	Select,
-	File,
-	Image,
-	Button,
-	Reset,
-	Hidden,
-	Submit,
-}
diff --git a/WebFormBuilder/wwwroot/WebForm.css b/WebFormBuilder/wwwroot/WebForm.css
index 914e161..817787b 100644
--- a/WebFormBuilder/wwwroot/WebForm.css
+++ b/WebFormBuilder/wwwroot/WebForm.css
@@ -18,7 +18,7 @@ body
 	display: flex;
 	min-height: 100vh;
 	background: #f4f4f9;
-	padding:20px;
+	padding: 20px;
 }
 
 .form-container
@@ -31,8 +31,9 @@ body
 	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
-	.form-container form
+	.form-container form fieldset:not([hidden])
 	{
+		border: none;
 		display: flex;
 		flex-direction: column;
 		gap: 1.5rem;
@@ -96,6 +97,7 @@ body
 		cursor: pointer;
 		transition: all 0.3s ease;
 	}
+
 		.form-container
 		button:disabled:hover,
 		button[disabled]:hover,
@@ -150,13 +152,6 @@ body
 		flex-direction: column;
 	}
 
-	.form-container fieldset
-	{
-		display: flex;
-		flex-direction: column;
-		border:none;
-	}
-
 	.form-container .radio-group,
 	.form-container .checkbox-group
 	{
@@ -297,4 +292,3 @@ body
 		{
 			text-align: right;
 		}
-
diff --git a/WebFormBuilder/wwwroot/WebForm.js b/WebFormBuilder/wwwroot/WebForm.js
index 85d7688..98145bc 100644
--- a/WebFormBuilder/wwwroot/WebForm.js
+++ b/WebFormBuilder/wwwroot/WebForm.js
@@ -51,23 +51,43 @@
 	window.generateForm = function generateForm(formContainerId, formConfig, submitFormUrl, submitValueUrl)
 	{
 		const formContainer = document.getElementById(formContainerId)
-
 		const form = document.createElement("form");
+		const header = document.createElement("div");
+		form.appendChild(header);
+		header.outerHTML = formConfig.HtmlHeader ?? "";
+
+		form.id = formConfig.Name;
+		if (submitFormUrl)
+			FormUrl = submitFormUrl;
+		if (submitValueUrl)
+			ValueUrl = submitValueUrl;
 
-		form.id = "formDynamic"; // TODO
-		FormUrl = formConfig.Action;
-		ValueUrl = formConfig.Change;
+		form["action"] = formConfig.Action;
+		form["change"] = formConfig.Change;
 
 		var index = 0;
-		formConfig.FieldSets[0].FormFields.forEach((field) =>
+		for (let i = 0; i < formConfig.FieldSets.length; i++)
 		{
-			field.Name ??= `text${index}`, index++;
-			field.Type = (field.Type ?? "text").toLowerCase();
-			field.Label ??= toPascalCase(field.Name);
-			const wrapper = document.createElement("div");
-			generateField(field, wrapper);
-			form.appendChild(wrapper);
-		});
+			const fieldsetConfig = formConfig.FieldSets[i];
+			const legend = document.createElement("legend");
+			const fieldset = document.createElement("fieldset");
+			if (i > 0)
+				fieldset.setAttribute("hidden", "hidden");
+			legend.textContent = fieldsetConfig.Legend ?? `Fieldset ${i + 1}`;
+			legend.setAttribute("hidden", "hidden");
+			fieldset.appendChild(legend);
+			form.appendChild(fieldset);
+
+			fieldsetConfig.FormFields.forEach((field) =>
+			{
+				field.Name ??= `text${index}`, index++;
+				field.Type = (field.Type ?? "text").toLowerCase();
+				field.Label ??= toPascalCase(field.Name);
+				const wrapper = document.createElement("div");
+				generateField(field, wrapper);
+				fieldset.appendChild(wrapper);
+			});
+		}
 
 		formContainer.replaceChildren();
 		formContainer.appendChild(form);
diff --git a/WebFormBuilder/wwwroot/htmlpage.html b/WebFormBuilder/wwwroot/htmlpage.html
new file mode 100644
index 0000000..01109f3
--- /dev/null
+++ b/WebFormBuilder/wwwroot/htmlpage.html
@@ -0,0 +1,45 @@
+﻿<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8" />
+	<title></title>
+	<link rel="stylesheet" href="WebForm.css">
+</head>
+<body>
+
+<div id="formcontainer" class="form-container">
+	<form id="ExampleForm"action="/api/SubmitForm">
+		<h1>Dit is een example form</h1>
+		<div>
+			<div>
+				<label for="Naam">Naam</label>
+				<input name="Naam" id="Naam" type="text">
+			</div><div>
+				<label for="Adres">Adres</label>
+				<input name="Adres" id="Adres" type="text">
+			</div>
+			<div>
+				<label for="Woonplaats">Woonplaats</label><input name="Woonplaats" id="Woonplaats" type="text">
+			</div>
+			<div>
+				<label for="Partner_0">Partner</label><div class="radio-group">
+					<div>
+						<input type="radio" name="Partner" value="Ja" id="Partner_0"><label for="Partner_0">Ja</label>
+					</div>
+					<div><input type="radio" name="Partner" value="Nee" id="Partner_1"><label for="Partner_1">Nee</label></div>
+					<div>
+						<input type="radio" name="Partner" value="Weet niet" id="Partner_2"><label for="Partner_2">Weet niet</label>
+					</div>
+				</div>
+			</div>
+		</div>
+		<fieldset hidden="">
+			<div>
+				<label for="PartnerNaam">PartnerNaam</label>
+				<input name="PartnerNaam" id="PartnerNaam" type="text">
+			</div>
+		</fieldset>
+	</form>
+</div>
+</body>
+</html>
\ No newline at end of file