title: Blazor inline editing table and getting all component values on event
body: <p>On a Blazor component, I have this table in which I'm trying to implement inline editing functionality. I've managed the visual bits, but when it comes to grabbing the new values from the changed row on button click, I have no clue how to proceed.</p>
  
  <p>Each row on the table is based on this object:</p>
  
  <pre><code>public class InstanceData 
  {
      public Guid Id { get; set; }
      public string DisplayName { get; set; }
      public string BaseAddress { get; set; }
      public int Port { get; set; }
      public string Version { get; set; }
      public string AdditionalInformation { get; set; }
  
      [JsonIgnore]
      public bool IsEditing { get; set; }
  }
  </code></pre>
  
  <p>On my razor page, table is populated like following:</p>
  
  <pre><code>&lt;table&gt;
      @*&lt;thead tbody blah blah&gt;*@
  
      @foreach (var instance in serverInstances)
      {
          if (instance.IsEditing)
          {
              &lt;tr&gt;
                  &lt;th scope="row"&gt;@instance.GetShortenedIdentifier()&lt;/th&gt;
                  &lt;td&gt;
                      &lt;input type="text" class="form-control" placeholder="Give the instance a name" value="@instance.DisplayName" /&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="text" class="form-control" placeholder="e.g. http://localhost (without port)" value="@instance.BaseAddress" /&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="number" class="form-control" placeholder="The port number server is running on" value="@instance.Port"
                              min="0" max="65535" /&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="text" class="form-control" placeholder="For information purposes and not required" value="@instance.Version" /&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="text" class="form-control" placeholder="Any other details to add (e.g. Feature environment mocks instance)" value="@instance.AdditionalInformation" /&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;button type="button" class="btn btn-link" @onclick="() =&gt; EnableEditing(false, instance)"&gt;
                          &lt;i class="fas fa-window-close" /&gt;
                      &lt;/button&gt;
                      &lt;button type="button" class="btn btn-link" @onclick="() =&gt; UpdateInstance(instance)"&gt;
                          &lt;i class="fas fa-check-square" /&gt;
                      &lt;/button&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          }
          else
          {
              &lt;tr&gt;
                  &lt;th scope="row"&gt;@instance.GetShortenedIdentifier()&lt;/th&gt;
                  &lt;td&gt;@instance.DisplayName&lt;/td&gt;
                  &lt;td&gt;@instance.BaseAddress&lt;/td&gt;
                  &lt;td&gt;@instance.Port&lt;/td&gt;
                  &lt;td&gt;@instance.Version&lt;/td&gt;
                  &lt;td&gt;@instance.AdditionalInformation&lt;/td&gt;
                  &lt;td&gt;
                      &lt;button type="button" class="btn btn-link" @onclick="() =&gt; EnableEditing(true, instance)"&gt;
                          &lt;i class="fas fa-pen" /&gt;
                      &lt;/button&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          }
  &lt;/table&gt;
  
  
  
  @code {
      private void EnableEditing(bool flag, InstanceData instanceData)
      {
          instanceData.IsEditing = flag;
      }
  
      private void UpdateInstance(InstanceData instanceData)
      {
          EnableEditing(false, instanceData);
  
          //call the repository to update the instance here.
          //show toast after done.
      }
  }
  </code></pre>
  
  <p>So, what I am trying to do is to get all those <code>input</code> element values to be passed into my method on <code>@onclick="() =&gt; UpdateInstance(instance)"</code> action. I've thought of assigning Id or fiddle with <code>@ref</code> but failed. What's the correct way to do this, or am I approaching this in a wrong way?</p>
  
  <p>To visualise it, here's a little something with my awesome ms paint skills.
  <a href="https://i.stack.imgur.com/PcR6n.png" rel="noreferrer"><img src="https://i.stack.imgur.com/PcR6n.png" alt="blazor thingy"></a></p>