Quickstart

Quick start on Dynamic Form Builder

Lets build a simple contact from using the Dynamic Form Builder, which will demonstrate how to use this tool.

Step 1 : Create a Web Assembly Template from Visual Studio.

The package works both in Blazor Server & WASM as well.

I named the pacage as "DynamicMudBlazor"

Install the Nuget packge Blazor.UI.FormGenerator

NuGet\Install-Package Blazor.UI.FormGenerator -Version 0.0.1.3

Create Contact Form

1. Create a ContactForm.razor page

2. Create a ContactForm.razor.cs file

3. Under "wwwroot\json-form" -> "contact-form.json"

Contact Form Code

contact-form.json

contact-form.json

[
  {
    "Card": "Contact-Form",
    "Elevation": 4,
    "Spacing": 2,
    "Outlined": false,
    "Class": "ma-4",
    "GridPosition": {
      "xs": 12,
      "sm": 12,
      "md": 12,
      "lg": 12
    },
    "Header": {
      "Enable": true,
      "Divider": false,
      "Avatar": {
        "Enable": true,
        "Color": "Primary",
        "Icon": "Material.Filled.PersonPin",
        "Variant": "Outlined"
      },
      "Content": {
        "Enable": true,
        "Title": "Contact Form",
        "SubTitle": "Sales Contact Form"
      },
      "CardAction": {
        "Enable": true,
        "Color": "Primary",
        "Icon": "Material.Filled.Email"
      }
    },
    "Footer": {
      "Enable": true,
      "CustomClass": "d-flex justify-end flex-grow-1 gap-2",
      "EnableCancel": false,
      "CancelText": "Cancel",
      "CancelColor": "Secondary",
      "CancelVariant": "Text",
      "EnableSubmit": true,
      "SubmitText": "Contact Sales",
      "SubmitColor": "Primary",
      "SubmitVariant": "Filled"
    },
    "Fields": [
      {
        "FieldName": "FirstName",
        "Label": "First Name",
        "InputType": "Text",
        "IsReadOnly": false,
        "IsRequired": true,
        "DefaultValue": "",
        "Variant": "Text",
        "GridPosition": {
          "xs": 12,
          "sm": 6,
          "md": 6,
          "lg": 6
        }
      },
      {
        "FieldName": "LastName",
        "Label": "Last Name",
        "InputType": "Text",
        "IsReadOnly": false,
        "IsRequired": true,
        "DefaultValue": "",
        "Variant": "Text",
        "GridPosition": {
          "xs": 12,
          "sm": 6,
          "md": 6,
          "lg": 6
        }
      },
      {
        "FieldName": "Email",
        "Label": "Email",
        "InputType": "Email",
        "IsReadOnly": false,
        "IsRequired": true,
        "DefaultValue": "",
        "Variant": "Text",
        "GridPosition": {
          "xs": 12,
          "sm": 12,
          "md": 12,
          "lg": 12
        }
      },
      {
        "FieldName": "Message",
        "Label": "Message",
        "InputType": "MultiLine",
        "Line": 5,
        "IsReadOnly": false,
        "IsRequired": false,
        "DefaultValue": "",
        "Variant": "Text",
        "GridPosition": {
          "xs": 12,
          "sm": 12,
          "md": 12,
          "lg": 12
        }
      }
    ]
  }
]

ContactForm.razor

@page "/contact-form"
@inject HttpClient Http
@inject ILogger<ContactForm> Logger
@using Blazor.UI.FormGenerator

<PageTitle>Contact Form</PageTitle>


@if (_formContactFormBuilders is not null)
{
    <DynamicMudForm @ref="_dynamicMudFrom" FormBuilders="_formContactFormBuilders"/>
    <MudPaper Class="ma-4 pa-4" Elevation="4">
        <MudTextField Label="JSON Control data" ReadOnly="true"
                      Variant="Variant.Filled" Lines="80"
                      @bind-Value="@jsonText"  />
    </MudPaper>
    
}

ContactForm.razor.cs

using Blazor.Shared.FormGenerator.Models;
using Blazor.UI.FormGenerator;
using System.Net.Http.Json;
using static System.Net.WebRequestMethods;

namespace DynamicMudBlazor.Client.Pages;

public partial class ContactForm
{
    private DynamicMudForm _dynamicMudFrom;

    #region Initialization
    protected override async Task OnInitializedAsync()
    {
        await LoadContactForm();
    }

    #endregion

    #region Contact Details 
    FormBuilder[] _formContactFormBuilders;
    private string jsonText = string.Empty;

    private string cardTitle = "Contact-Form";
    private async Task LoadContactForm()
    {
        #region All Controls
        _formContactFormBuilders = await Http.GetFromJsonAsync<FormBuilder[]>($"json-form/{cardTitle}.json?v={DateTime.Now.Ticks}");
        jsonText = await Http.GetStringAsync($"json-form/{cardTitle}.json?v={DateTime.Now.Ticks}");

        if (_formContactFormBuilders is not null)
        {
            DynamicMudForm.AttachCard_EventAction(_formContactFormBuilders, cardTitle, CardActionClick);
            DynamicMudForm.AttachSubmitButton_EventAction(_formContactFormBuilders, cardTitle, SubmitButton_Click);
        }

        #endregion
    }

    #endregion

    #region Event Mapper
    public async Task CardActionClick()
    {
        Console.WriteLine("Triggered the TextBox Card Action Clicked.");
    }

    public async Task SubmitButton_Click(EventArgs args)
    {
        Console.WriteLine("Submit Button Click");
        _dynamicMudFrom.GetMudFrom().Validate();
        if (_dynamicMudFrom.GetMudFrom().IsValid)
        {
            //Logger.LogWarning(_dynamicMudFrom.GetFormData());
            Console.WriteLine(_dynamicMudFrom.GetFormData());
        }
    }
    #endregion
}

Contact Form Output

Dark Mode

Light Mode

How to get Contact Form Data?

To get the data from the Dynamic Form, we can use GetMudFrom method from the DynamicMudForm Cotrol.

When "Contact Sales" Button clicked the data is returned as JSNON

Also, If we need to attach some action on the card action, we can also do the same, example in the above method "CardActionClick()" method has been attached to the DynamicForm to perform card actions.

The complete code been attached below.

149KB

DynamicMudBlazor.zip

archive

Dynamic Blazor Form Builder using MudBlazor.