title: How can I pass a data-id value to a ViewComponent
body: <p>I want to use a ViewComponent in a Modal dialog to edit some data, I can get the ViewComponent to show on screen, when I click the button and if I hard code a value it will retrieve the correct data.  </p>
  
  <pre><code>@await Component.InvokeAsync("Contact", 2);  
  </code></pre>
  
  <p>or<br>
      @await Component.InvokeAsync("Contact", new { id=2 });  </p>
  
  <p>But what I can't see how to do is make the Id dependent upon which button I click. Ideally I'd like to just use data-id.
  All the examples I've seen used fixed values.</p>
  
  <p>Edit:</p>
  
  <p>The ViewComponent is used in a ModalTagHelper, which is toggled on via an anchor tag, but I also have some jQuery that fires first.</p>
  
  <pre><code>$('.btnShow').on('click', function () {
      $('#hdnContactId').val($(this).data('id'));
      alert($('#hdnContactId').val());
  });
  
  &lt;a href="#" data-toggle="modal" data-id="@Model.StudentContactId" data-target="#EditContact" class="btnShow btn btn-default"&gt;Edit&lt;/a&gt;
  
  
  &lt;modal id="EditContact" title="Contact Details"&gt;
      &lt;modal-body&gt;
          @await Component.InvokeAsync("Contact", new { id=2 });
      &lt;/modal-body&gt;
      &lt;modal-footer&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
      &lt;/modal-footer&gt;
  &lt;/modal&gt;
  </code></pre>