I am converting an existing ASP.NET application into Blazor app.
I have this form
<code><table width='400px' style="border-width:2" ><!-- Start Hub table -->
<tr>
<td>Role</td>
<td>Name</td>
<td>Phone</td>
<td>email / mobile</td>
</tr>
<tr>
<td style="width:140px;">Event Hub Manager</td>
<td><input id="block1_role1_names" @onchange=@(async(e) => await update_details("block1_role1_names", e)) value="@getContact("block1_role1_names")" class="NameColumn" /></td>
<td style="width:80px;">3664 8462</td>
<td><input id="block1_role1_phone" @onchange=@(async(e) => await update_details("block1_role1_phone", e)) value="@getContact("block1_role1_phone")" class="PhoneColumn" /></td>
</tr>
</table></code>
<code><table width='400px' style="border-width:2" ><!-- Start Hub table -->
<tr>
<td>Role</td>
<td>Name</td>
<td>Phone</td>
<td>email / mobile</td>
</tr>
<tr>
<td style="width:140px;">Event Hub Manager</td>
<td><input id="block1_role1_names" @onchange=@(async(e) => await update_details("block1_role1_names", e)) value="@getContact("block1_role1_names")" class="NameColumn" /></td>
<td style="width:80px;">3664 8462</td>
<td><input id="block1_role1_phone" @onchange=@(async(e) => await update_details("block1_role1_phone", e)) value="@getContact("block1_role1_phone")" class="PhoneColumn" /></td>
</tr>
</table></code>
<table width='400px' style="border-width:2" ><!-- Start Hub table -->
<tr>
<td>Role</td>
<td>Name</td>
<td>Phone</td>
<td>email / mobile</td>
</tr>
<tr>
<td style="width:140px;">Event Hub Manager</td>
<td><input id="block1_role1_names" @onchange=@(async(e) => await update_details("block1_role1_names", e)) value="@getContact("block1_role1_names")" class="NameColumn" /></td>
<td style="width:80px;">3664 8462</td>
<td><input id="block1_role1_phone" @onchange=@(async(e) => await update_details("block1_role1_phone", e)) value="@getContact("block1_role1_phone")" class="PhoneColumn" /></td>
</tr>
</table>When page loads, I call a function “getContact” and pass the id of the control and it loads value from a json file.
When I make any update in a text box, I call “update_details” and pass the id of the control and write into a json file.
<code>protected async Task update_details(string controlId, ChangeEventArgs controlEvent)
{
await netopsService.WriteContactDetails(controlId, controlEvent.Value?.ToString());
}</code>
<code>protected async Task update_details(string controlId, ChangeEventArgs controlEvent)
{
await netopsService.WriteContactDetails(controlId, controlEvent.Value?.ToString());
}</code>
protected async Task update_details(string controlId, ChangeEventArgs controlEvent)
{
await netopsService.WriteContactDetails(controlId, controlEvent.Value?.ToString());
}<code>private string getContact(string Id)
{
return "some value based on id";
}</code>
<code>private string getContact(string Id)
{
return "some value based on id";
}</code>
private string getContact(string Id)
{
return "some value based on id";
}It is all working fine.
I have more than 50 rows and for every row, I have 2 text boxes and to get values of those 2 boxes, I have to pass IDs.
I don’t want to manually pass IDs into functions, I want something dynamic, every textbox has its own Id, so onchange and value function should take that ID as a parameter, something like this
<code><input id="block1_role1_names" @onchange=@(async(e) => await update_details(ID_OF_THE_CONTROL, e)) value="@getContact(ID_OF_THE_CONTROL)" class="NameColumn" /></code>
<code><input id="block1_role1_names" @onchange=@(async(e) => await update_details(ID_OF_THE_CONTROL, e)) value="@getContact(ID_OF_THE_CONTROL)" class="NameColumn" /></code>
<input id="block1_role1_names" @onchange=@(async(e) => await update_details(ID_OF_THE_CONTROL, e)) value="@getContact(ID_OF_THE_CONTROL)" class="NameColumn" />How can I pass the ID of the textbox into those 2 functions?
When I tried passing “this”, this refers to the page and not the textbox.