More sample of dynamic form builder in Blazor

[Dodi]

Could you give more example on how to create a dynamic form builder in blazor using syncfusion,

I found based on below article : 

https://www.syncfusion.com/blogs/post/how-to-create-a-dynamic-form-builder-in-blazor.aspx

The sample code is not quite complete yet as on button save event there is no code there, I would like to learn by example on how to save the data based on dynamic form builder component , I want to know how we can read the value from each of the dynamic component ( like from textbox, dropdownlist, calendar, etc ) before we put those values as parameter to the back-end API.

Thank you. 

[UdhayaKumar Duraisamy]

Hi Dodi,

We are validating the requirement. We will update the details in two business days (4^th August 2022).

Regards,

Udhaya Kumar D

[UdhayaKumar Duraisamy]

Hi Dodi,

Due to complexity, we are validating the requirement. We will update the details in two business days (8^th August 2022).

Regards,

Udhaya Kumar D

[UdhayaKumar Duraisamy]

Hi Dodi,

We have prepared a simple sample for the requested requirement. We can get the selected item value in the model object of EditForm. Please refer to the below code snippet and sample for more reference.

<EditForm Model="@model" OnValidSubmit="@OnValidSubmit" OnInvalidSubmit="@OnInvalidSubmit">

                <DataAnnotationsValidator/>

                <div>

                    <label class="example-label">Select an employee</label>

                    <SfDropDownList Placeholder="e.g. Andrew Fuller" @bind-Value="@model.FirstName" DataSource="@Data">

                        <DropDownListFieldSettings Value="FirstName"Text="FirstName"/>

                    </SfDropDownList>

                    <ValidationMessage For="()=>model.FirstName"/>

                </div>           

                <div class="submit-btn">

                    <SfButton type="submit"IsPrimary="true">Submit</SfButton>

                </div>

            </EditForm>

async void OnValidSubmit()

    {

        var BackEnd = model.FirstName;

        Message = "Form Submitted Successfully!";

        await Task.Delay(2000);

        Message = string.Empty;

        model.FirstName = null;

        StateHasChanged();

    }

    private void OnInvalidSubmit()

    {

        Message = string.Empty;

    }

    private EmployeeData model = new EmployeeData();

    public class EmployeeData

    {

        [Required(ErrorMessage = "The Employee field is required.")]

        public string FirstName { get; set; }

        public string Designation { get; set; }

        public string Eimg { get; set; }

    }

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorFileValidation-931704378

Kindly try the above suggestion and let us know if this meets your requirement.

Regards,

Udhaya Kumar D

[Dodi]

Thank you for the update,  this is really for helpful and i have build similar function based on the sample.

[UdhayaKumar Duraisamy]

Hi Dodi,

Thanks for the update. Please get back to us if you need any further assistance.

Regards,

Udhaya Kumar D