@page "/counter"
 
@using System.Dynamic

<h1>Counter</h1> 
<button class="btn btn-primary" @onclick="CheckValue">Check ExpandoObject Value</button>

<div class="mb-3">
   <label class="form-label">Date</label>
   <input type="date" class="form-control" value=@(product["date"]) />
   <input type="text" class="form-control" value=@(product["date"]) />
</div>

@foreach (var option in (IDictionary<string, object>)selectedProduct.Properties)
{
    <div class="col-sm">
        <input type="text" placeholder="@option.Key" value="@option.Value"
        @onchange="@((ChangeEventArgs __e) => ((IDictionary<string, object>)selectedProduct.Properties)[option.Key] = (object)__e.Value.ToString())"/>
    </div>
}

@code { 

    private dynamic selectedProduct = new ExpandoObject();
    
    private IDictionary<string, object> product;
    private dynamic expnProduct = new ExpandoObject();
    
    protected override async Task OnInitializedAsync()
    {
        Dictionary<string, object> properties = new Dictionary<string, object>();
        properties.Add("color", "red");
        properties.Add("size", "100*100");
        properties.Add("weight", "10kg");

        selectedProduct.Properties = properties; 

        product = (IDictionary <String, Object>) expnProduct;
        product["color"] = "red";
        product["size"] = 100;
        product["weight"] = 10.50D;
        expnProduct.name = "Product One"; // product["name"] = "Product one"
        expnProduct.date = DateTime.Today;
    }

    private void CheckValue()
    {
        var data = selectedProduct;
    } 
}