@page "/"
<style>
th, td {
vertical-align: middle;
}
</style>
<h3>@metadatas["Title"]</h3>
<br/>
@if (metadatas != null)
{
<table class="table table-bordered" style="background-color: @metadatas["Background-color"];">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col" style="width: 150px;">Action</th>
<th scope="col" style="width: 150px;">Key</th>
<th scope="col">Value</th>
</tr>
</thead>
<tbody>
@foreach (var metadata in metadatas)
{
var keys = metadatas.Keys.ToList();
var index = keys.IndexOf(metadata.Key);
<tr>
<th scope="row">@(index + 1)</th>
<td style="text-align: center;">
<button type="button"
class="btn @(Edits[index] ? "btn-secondary" : "btn-primary")"
@onclick="@(() => { Edits[index] = !Edits[index]; })">
@(Edits[index] ? "Disable Edit" : "Enable Value")
</button>
</td>
<td>@metadata.Key</td>
@if (Edits[index])
{
<td><input @bind-value="metadatas[metadata.Key]"
type="text"
class="form-control"
style="background-color: antiquewhite;"/></td>
}
else
{
<td>@metadata.Value</td>
}
</tr>
}
</tbody>
</table>
}
@code
{
private Dictionary<string, string> metadatas { get; set; }
private bool[] Edits;
protected override void OnInitialized()
{
metadatas = new Dictionary<string, string>();
metadatas.Add("Title", "Make only the selected row editable");
metadatas.Add("Background-color", "white");
// for storing edit status of each dictionary value
// this array has to be same length as the dictionary
Edits = new bool[metadatas.Count()];
base.OnInitialized();
}
}