Bind ExpandoObject to MudBlazor Form Controls

Question

I am trying to accomplish Functionality similar to Angular FormBuilder, where we dynamically add Controls and Validations.

In MudBlazor or Blazor in general, we have to use C# Model to bind with Controls.

So I decided to use ExpandoObject with dynamically added Properties to bind with MudBlazor controls with OnInitialized Method as below

    dynamic FormModel = new ExpandoObject();
    protected override void OnInitialized()
    {
        FormModel.FirstName = null;
        FormModel.LastName = null;
        FormModel.Age = 0;

        //Or with Dictionary

       ((IDictionary<string, object>)FormModel).Add("FirstName", "");
        ((IDictionary<string, object>)FormModel).Add("LastName", "");
        ((IDictionary<string, object>)FormModel).Add("Age", 0);
    }

and in HTML using MudBlazor Textbox

<MudTextField Label="First name" @bind-Value=FormModel.FirstName />

While compiling with first approach it gives the following error

Cannot use a lambda expression as an argument to a dynamically dispatched operation without first casting it to a delegate or expression tree type.

While running with second "object" approach it gives error at runtime, when value is changed/entered.

Conversion to type System.Object not implemented

this is not even possible in the standard mvc. you should use concrete types instead — spzvtbg, Feb 27 '22 at 08:35
@spzvtbg that doesn't solve my problem of dynamic form, I am currently following https://medium.com/@aaltuj/built-a-form-generator-with-blazor-7862c7a3cc69 which seems promising. Will come back if succeeded to post an answer. — Mohiyo Deen, Feb 27 '22 at 08:51
that is not solveable problem, in the article is explaned how to use the dynamic form generation not using of dynamic objects — spzvtbg, Feb 27 '22 at 09:09

Surinder Singh · Answer 1 · 2022-02-27T12:57:56.353

Last month I was working on a project where I was given a dataset with unknown number of tables and each table as having unknown number of columns and types, my goal was to make each table and its column editable and I implemented this in this way

This is html part

<div>
    <div>@($"{Fields["FirstName"]} {Fields["LastName"]}")</div>

    @foreach (var field in Fields)
    {
        <div>
            <input type="text" @bind=@Fields[field.Key] @bind:event="oninput"/>
        </div>
    }
</div>

And here is code behind

@code {
    private Dictionary<string, string> Fields;

    protected override void OnInitialized()
    {
        //  Intialize dictionary
        Fields = new();

        //  Initialize input fields with some default value
        Fields.Add("FirstName", "first"); 
        Fields.Add("LastName", "last");
    }
}

Just throwing an idea if this can be helpful to you, I created a single custom input control which was handling string, numeric and bool input values according to data type

Have no experience with MudBlazor, but I think custom binding converter can be used for string and numeric datatypes

<MudTextField Converter="@StringConverter" Label="First name" @bind-Value=@Fields["FirstName"] />
<MudTextField Converter="@StringConverter" Label="Last name" @bind-Value=@Fields["LastName"] />

<div>@($"{Fields["FirstName"]} {Fields["LastName"]}")</div>

@code {

     private Dictionary<string, object> Fields;

     protected override void OnInitialized()
    {
        //  Intialize dictionary
        Fields = new();

        //  Initialize input fields with some default value
        Fields.Add("FirstName", "first"); 
        Fields.Add("LastName", "last");
    }

    Converter<object> StringConverter = new Converter<object>
    {
        SetFunc = value => value.ToString(),
        GetFunc = text => text.ToString(),
    };
    
}

Yes, I already have tried with this but it doesn't work with string, object or string, dynamic it only works with string, string or string, int — Mohiyo Deen, Feb 27 '22 at 11:37
Could you please share context where you are facing challenges in implementing this method — Surinder Singh, Feb 27 '22 at 12:00
I need to generate a DynamicForm with MudBlazor Controls with TwoWay Binding. An example scenario will be where a User is selecting controls to show in a Form that will render in another component. This issue can be resolved if MudBlazor Binding allows Dictionary or Dictionary with above-given approach. — Mohiyo Deen, Feb 27 '22 at 12:13

Bind ExpandoObject to MudBlazor Form Controls

1 Answers1

Linked