如何以动态形式使用@bind-Value？

Question

I am using Blazor to create a dynamic form from the properties of my model.

I am using a for each loop to loop through the properties of the model.

public class SensorType
{
    public int Id { get; set; }
    [Required]
    [MaxLength(30)]
    [Display(Name = "Sensor Type Name")]
    public string Name { get; set; }
    [Required]
    [MaxLength(500)]
    public string Description { get; set; }
    [Required]
    [MaxLength(2048)]
    [Display(Name = "Datasheet URL")]
    public string DatasheetUrl { get; set; }
}

I implemented this razor view, where I try to bind to public SensorType sensortype { get; set; } public SensorType sensortype { get; set; } public SensorType sensortype { get; set; } . But I need to bind to sensortype.property where property is whatever property the model has that is in the for each loop. But I cannot simply just call say @bind-Value="sensortype.property" . Any ideas on how to do this? I don't want to have to manually type every field. Thanks!

<EditForm Model="@sensortype" OnValidSubmit="@SaveSensorType">

@foreach(var property in typeof(SensorType).GetProperties())
{
    if(property.Name == "Id")
    {
        continue;
    }
    <div class="form-group row">
        <label class="col-sm-2 col-form-label">@(GetAttribute(property, false)) </label> //This function get the name of the property in a human-readable way.
        <div class="col-sm-10">//I would like to bind here to sensortype's property in the for each loop but sensortype.property gives me an error.
            <InputTextArea class="form-control" @bind-Value="sensortype.property" value="sensortype.property.Name" placeholder="Description of the Type of Sensor" /> 
        </div>
    </div>
}

Answer 1

I am playing this days with blazor and I made a kind of DynamicForm, is not perfect but is working. I just want to show you my dynamic form as proof of concept, not at something which I wold use in production.

Basicly we want to write something like this:

<DynamicForm @bind-Model="MySensorType" /> 

//this will generate a form with fields for all properties of the model

So, on Index view let's create a property for MySensorType and some markup to see if the model is changing when the form fields are edited.

@page "/"

    <div style="display:flex">
        <div> 
            <DynamicForm @bind-Model="MySensorType" />
        </div>

        <div style="background:yellow;flex:1;margin:20px;">
            <p>Id: @MySensorType.Id</p>
            <p>Name: @MySensorType.Name</p>
            <p>Description: @MySensorType.Description</p>
            <p>Url: @MySensorType.DatasheetUrl</p>
        </div>
    </div>

@code {
    public SensorType MySensorType { get; set; } = new SensorType();


    public class SensorType
    {
        public int Id { get; set; } = 1;
        public string Name { get; set; } = "Some Name";
        public string Description { get; set; } = "Some Description";
        public string DatasheetUrl { get; set; } = "This is a URL";
    }
} 

In order to generate automatically the fields, we need some kind of DynamicField. Below component is for named "DynamicField"

    <div>
        <label>@Caption</label>
        @if (Value is String sValue)
        {
            <input type="text" value="@sValue" @onchange="OnChange"/>
        }
        @if (Value is int iValue)
        {
            <input type="number" value="@iValue" @onchange="OnChange" />
        }

    </div>

@code {
    [Parameter] public string Caption { get; set; }
    [Parameter] public object Value { get; set; }
    [Parameter] public EventCallback<object> ValueChanged { get; set; }

   async void OnChange(ChangeEventArgs e)
    {
       await ValueChanged.InvokeAsync(e.Value);
    }
}

Now, we can create the wrapper so called DynamicForm:

@typeparam T


    @foreach (var p in Properties)
    {
        <DynamicField Value="@p.Value" Caption="@p.Key" ValueChanged="@((e)=>OnValueChanged(e,p.Key))"/>
    }


@code{
    [Parameter] public T Model { get; set; }
    [Parameter] public EventCallback<T> ModelChanged { get; set; }
    public Dictionary<string, object> Properties { get; set; } = new Dictionary<string, object>();

    protected override void OnInitialized()
    {
        var props = Model.GetType().GetProperties();
        foreach (var p in props)
        {
            Properties.Add(p.Name, p.GetValue(Model));
        }
    }

    void OnValueChanged(object e, string prop)
    {
        var p = Model.GetType().GetProperty(prop);
        if (p.PropertyType == typeof(int))
        {
            var intValue = Convert.ToInt32(e);
            p.SetValue(Model, intValue);
        }
        if (p.PropertyType == typeof(string))
        {
            p.SetValue(Model, e.ToString());
        }

        ModelChanged.InvokeAsync(Model);
    }
}

What actually is happening here, we are using Reflection to get all properties of the model, send them to DynamicFields, and when those values are changed we set the new value to the model and call ModelChanged to send new values.

On my computer this works, and every time when I change a value, MySensorType is showing the new value on Index component.

You can see that I created dynamic fields only for Number and String, if you have DateTime or Select, you need to extend this DynamicField, for select will be more difficult.

By the way, on Index view you can put a button and call SaveChanges with your logic and use MySensorType.