When changing a row's dropdown, other row's dropdowns are changing too. How to solve this? is it possible to create dynamic methods in each td?
<EditForm Model="@model2">
<table class="table mt-4">
<thead>
<tr>
<th>Heading</th>
<th>Jump Page</th>
<th>Jump Heading</th>
<th>Link</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in HeadingList)
{
<tr>
<td>@item.Text</td>
<td>
<InputSelect ValueExpression="@(() => model2.CountryID)"
ValueChanged="@((int? args) =>
{
model2.CountryID = args;
OnPageChangedModel2(args);
})"
class="form-select">
<option value="">Select Page...</option>
@foreach (var item in PageModel)
{
<option value="@item.PageNo">@item.PageNo</option>
}
</InputSelect>
</td>
<td>
<InputSelect ValueExpression="@(() => model2.CityID)"
class="form-select">
<option value="">Select Page...</option>
@foreach (var item in HeadingList2)
{
<option value="@item.Text">@item.Text</option>
}
</InputSelect>
</td>
<td>
<a href="#" class="view-icon">
<img src="/img/magnifying-glass-svgrepo-com.svg" alt="view" />
</a>
</td>
</tr>
}
</tbody>
</table>
@*<button class="btn btn-dark mb-4 float-end" @onclick="@(e => UpdateButtonClick())">Update</button>*@
</EditForm>
I tried to load data in HeadingList2 whenever the list is refreshing, dropdowns texts are changing too.
It's beacause you've binded controls of every row to the same object (model2).
You probably need to create list of model2 type objects and assign them to elements of HeadingList.