{"id":32743206,"url":"https://github.com/aaltuj/vxformgenerator","last_synced_at":"2026-03-27T02:42:45.003Z","repository":{"id":38424122,"uuid":"277460550","full_name":"Aaltuj/VxFormGenerator","owner":"Aaltuj","description":"The library contains a component, that nests itself into the Blazor EditForm instead of a wrapper around the EditForm. The component is able to generate a form based on a POCO or a ExpandoObject. Because of this architecture the library provides the developer flexibility and direct usage of the EditForm.","archived":false,"fork":false,"pushed_at":"2022-04-29T13:48:02.000Z","size":1833,"stargazers_count":126,"open_issues_count":6,"forks_count":36,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-11-03T14:01:22.320Z","etag":null,"topics":["blazor","blazor-editform","editform","form-generator","poco","wasm","webassembly"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Aaltuj.png","metadata":{"files":{"readme":"README.md","changelog":"changelogs/refs/tags/v.0.4.1.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-06T06:28:34.000Z","updated_at":"2025-10-23T10:07:24.000Z","dependencies_parsed_at":"2022-08-10T06:47:50.244Z","dependency_job_id":null,"html_url":"https://github.com/Aaltuj/VxFormGenerator","commit_stats":null,"previous_names":["aaltuj/blazorformgeneratordemo"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/Aaltuj/VxFormGenerator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aaltuj%2FVxFormGenerator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aaltuj%2FVxFormGenerator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aaltuj%2FVxFormGenerator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aaltuj%2FVxFormGenerator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Aaltuj","download_url":"https://codeload.github.com/Aaltuj/VxFormGenerator/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aaltuj%2FVxFormGenerator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":282468895,"owners_count":26674240,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-11-03T02:00:05.676Z","response_time":108,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","blazor-editform","editform","form-generator","poco","wasm","webassembly"],"created_at":"2025-11-03T14:01:12.339Z","updated_at":"2025-11-03T14:02:53.342Z","avatar_url":"https://github.com/Aaltuj.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# VxFormGenerator\n\nThe library contains a component, that nests itself into the Blazor EditForm instead of a wrapper around the EditForm. The component is able to generate a form based on a POCO or a ExpandoObject. Because of this architecture the library provides the developer flexibility and direct usage of the EditForm. \n\n# TLDR\n\nTurns an annotated object....\n\n```csharp\npublic class FeedingSession\n{\n    [Display(Name = \"Kind of food\")]\n    public FoodKind KindOfFood { get; set; }\n\n    [Display(Name = \"Note\")]\n    [MinLength(5)]\n    public string Note { get; set; }\n    \n    [Display(Name = \"Amount\")]\n    public decimal Amount { get; set; }\n    \n    [Display(Name = \"Start\")]\n    public DateTime Start { get; set; }\n    \n    [Display(Name = \"End\")]\n    public DateTime End { get; set; }\n    \n    [Display(Name = \"Throwing up\")]\n    public bool ThrowingUp { get; set; }\n\n    [Display(Name = \"Throwing up dict\")]\n    public ValueReferences\u003cFoodKind\u003e ThrowingUpDict { get; set; } = new ValueReferences\u003cFoodKind\u003e();\n    \n    [Display(Name = \"Color\")]\n    public VxColor Color { get; set; }\n}\n```\n\n... into a nice Blazor form:\n\n![A nice form!](https://github.com/Aaltuj/VxFormGenerator/blob/master/Docs/images/sample_form.png)\n\n### Setup\n\nAdd the NuGet package.\n\nOpen a terminal in the project folder where you want to add the **VxFormGenerator**. Pick one of the options below:\n\n###### Plain components\n\nThe unstyled version of the input components for the **VxFormGenerator**\n\n`dotnet add package VxFormGenerator.Components.Plain`\n\n###### Bootstrap components\n\n\u003e The assumption made by the library is that you already added  Bootstrap (4.5.0 and up) setup in your Blazor app\n\nThe Bootstrap styled form components for the **VxFormGenerator**\n\n`dotnet add package VxFormGenerator.Components.Bootstrap`\n\n### Initialize\n\nOpen the `Startup.cs` and add one of the following usage statements:\n\n###### Plain components\n\n`using VxFormGenerator.Settings.Plain;`\n\n###### Bootstrap components\n\n`using VxFormGenerator.Settings.Bootstrap;`\n\nAfter adding one of the usage statements add the line `services.AddVxFormGenerator();` like shown here below.\n\n````C#\npublic IConfiguration Configuration { get; }\n\n// This method gets called by the runtime. \n// Use this method to add services to the container.\n// For more information on how to configure your application, \n// visit https://go.microsoft.com/fwlink/?LinkID=398940\npublic void ConfigureServices(IServiceCollection services)\n{\n\tservices.AddRazorPages();\n\tservices.AddServerSideBlazor();\n\tservices.AddVxFormGenerator();\n}\n````\n\n\n\n### Model based\n\nYou can have a model that renders inputs for the properties. All that's required is adding a `RenderFormElements` component to the `EditForm`. The inputs can be validated by the attached Data Annotations on the property. Just add the built-in `DataAnnotationsValidator` component.\n\n````html\n@page \"/\"\n\n@using VxFormGenerator.Core\n@using FormGeneratorDemo.Data\n@using System.Dynamic\n\n\u003cEditForm Model=\"Model\" \n\t\t  OnValidSubmit=\"HandleValidSubmit\"\n\t\t  OnInvalidSubmit=\"HandleInValidSubmit\"\u003e\n    \u003cDataAnnotationsValidator\u003e\u003c/DataAnnotationsValidator\u003e\n    \u003cRenderFormElements\u003e\u003c/RenderFormElements\u003e\t\t\n    \u003cbutton class=\"btn btn-primary\" type=\"submit\"\u003eSubmit\u003c/button\u003e\n\u003c/EditForm\u003e\n\n@code{\n\n    /// \u003csummary\u003e\n    /// Model that is used for the form\n    /// \u003c/summary\u003e\n    private FeedingSession Model = new FeedingSession();\n\n    /// \u003csummary\u003e\n    /// Will handle the submit action of the form\n    /// \u003c/summary\u003e\n    /// \u003cparam name=\"context\"\u003eThe model with values as entered in the form\u003c/param\u003e\n    private void HandleValidSubmit(EditContext context)\n    {\n        // save your changes\n    }\n\n    private void HandleInValidSubmit(VEditContext context)\n    {\n        // Do something\n    }\n\n}\n\n````\n\n\n\n### Dynamic based\n\nYou can render a form that is based on a dynamic `ExpandoObject`. The developer is that able to create a model based at runtime. All that's required is adding a `RenderFormElements` component to the `EditForm`. The inputs can **NOT** **YET** be validated by Data Annotations. This is a feature yet to be completed.\n\n````html\n@page \"/\"\n\n@using VxFormGenerator.Core\n@using FormGeneratorDemo.Data\n@using System.Dynamic\n\n\u003cEditForm Model=\"Model\" \n\t\t  OnValidSubmit=\"HandleValidSubmit\"\n\t\t  OnInvalidSubmit=\"HandleInValidSubmit\"\u003e\n    \u003cDataAnnotationsValidator\u003e\u003c/DataAnnotationsValidator\u003e\n    \u003cRenderFormElements\u003e\u003c/RenderFormElements\u003e\t\t\n    \u003cbutton class=\"btn btn-primary\" type=\"submit\"\u003eSubmit\u003c/button\u003e\n\u003c/EditForm\u003e\n\n@code{\n\n    /// \u003csummary\u003e\n    /// Model that is used for the form\n    /// \u003c/summary\u003e\n    private dynamic Model = new ExpandoObject();\n\n\t/// \u003csummary\u003e\n\t/// Create a dynamic object \n\t/// \u003c/summary\u003e\n    protected override void OnInitialized()\n    {\n        var dict = (IDictionary\u003cString, Object\u003e) Model;\n        dict.Add(\"Name\", \"add\");\n        dict.Add(\"Note\", \"This is a note\");\n        dict.Add(\"Date\", DateTime.Now);\n        dict.Add(\"Amount\", 1);\n    }\n\n    /// \u003csummary\u003e\n    /// Will handle the submit action of the form\n    /// \u003c/summary\u003e\n    /// \u003cparam name=\"context\"\u003eThe model with values as entered in the form\u003c/param\u003e\n    private void HandleValidSubmit(EditContext context)\n    {\n        // save your changes\n    }\n\n    private void HandleInValidSubmit(VEditContext context)\n    {\n        // Do something\n    }\n\n}\n\n````\n\n\n\n### Layout \n\nThe form generator supports layout structuring based on meta-data defined at model level.\n\n````C#\n        // Add label to row 2\n    [VxFormRowLayout(Id = 2, Label = \"Adress\")]\n    public class AddressViewModel\n    {\n        [Display(Name = \"Firstname\")]\n        // Add element to row 1 with automatic width based on number of items in a row\n        [VxFormElementLayout(RowId = 1)]\n        public string SurName { get; set; }\n        // Add element to row 1 with automatic width based on number of items in a row and define a placeholder\n        [VxFormElementLayout(RowId = 1, Placeholder = \"Your Lastname\")]\n        [Display(Name = \"Lastname\")]\n        public string LastName { get; set; }\n\n        [Display(Name = \"Street\")]\n        // Add element to row 2 and set the width to 9 of 12 columns\n        [VxFormElementLayout(RowId = 2, ColSpan = 9)]\n        [MinLength(5)]\n        public string Street { get; set; }\n\n        [Display(Name = \"Number\")]\n        // Add element to row 2 and set the width to 3 of 12 columns\n        [VxFormElementLayout(RowId = 2, ColSpan = 3)]\n        public string Number { get; set; }\n\n        [Display(Name = \"Country\"),\n         // Show Placeholder\n         VxFormElementLayout(Placeholder = \"The country you live\")]\n        public string Country { get; set; }\n\n        [Display(Name = \"State\")]\n        [MinLength(5)]\n        public string State { get; set; }\n\n    }\n````\n![Another nice form!](https://github.com/Aaltuj/VxFormGenerator/blob/master/Docs/images/Advanced_sample_form.png)\n\nThere is also support for nested models. \n\n```C#\n  public class OrderViewModel\n    {\n         // Indicate that this property type should be rendered as a separate elements in the form and give it a label\n        [VxFormGroup(Label = \"Delivery\")]\n        // Use this to valdidate a complex object\n        [ValidateComplexType]\n        public AddressViewModel Address { get; set; } = new AddressViewModel();\n\n        // Indicate that this property type should be rendered as a separate elements in the form and give it a label\n        [VxFormGroup(Label = \"Invoice\")]\n        // Use this to valdidate a complex object\n        [ValidateComplexType]\n        public AddressViewModel BillingAddress { get; set; } = new AddressViewModel();\n\n        [Display(Name = \"Send insured\")]\n        public bool Valid { get; set; } = true;\n\n        [Display(Name = \"What color box\")]\n        public VxColor Color { get; set; }\n    }\n    }\n```\n![Another Another nice form!](https://github.com/Aaltuj/VxFormGenerator/blob/master/Docs/images/complex_sample_form.png)\n\n\n#### Layout options\n\nThe form support multiple rendering options:\n\nSet options **Global**\n\n```\n  public void ConfigureServices(IServiceCollection services)\n        {\n            services.AddRazorPages();\n            services.AddServerSideBlazor();\n            services.AddVxFormGenerator(new VxFormLayoutOptions() { LabelOrientation = LabelOrientation.TOP });\n        }\n```\n\nSet options at **Component** level, these options override the global one.\n\n```html\n \u003cRenderFormElements FormLayoutOptions=\"@OptionsForForm\"\u003e\u003c/RenderFormElements\u003e\n\n@code{\n    private VxFormLayoutOptions OptionsForForm = new VxFormLayoutOptions();\n}\n```\n\n#### Possible options\n\n*Set the label position for the form*\n\n**Label position**:          Top | Left | None\n\n*Set the placeholder policy for the form*\n\n**Placeholder Policy**: Explicit | Implicit | None | ExplicitFallbackToLabels | ImplicitFallbackToLabels\n\n*Set the trigger for showing validation state*\n\n**Validation Policy**:     OnlyValid | OnlyInvalid | BothValidAndInvalid\n\n\n\n### Run demo\n\nRun the demo so you can see the options and effects interactively:\n\n1. `git clone https://github.com/Aaltuj/VxFormGenerator.git`\n2. `cd VxFormGenerator ` \n3. `run.cmd` on Windows or `bash run.sh` on Linux/Mac\n4. navigate to `http://localhost:5000/definition-form`\n\n\n\n### Apply your own styling\n\n\u003e This is a work in progress\n\n\n\n### Contact\n\n\u003cimg src=\"https://github.com/Aaltuj/VxFormGenerator/blob/master/Docs/images/discord-logo.png\" alt=\"Discord\" /\u003e [Server](https://discord.gg/pyCtvFdTdV)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaltuj%2Fvxformgenerator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faaltuj%2Fvxformgenerator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaltuj%2Fvxformgenerator/lists"}