title: Invoking a ViewComponent within another ViewComponent
body: <p>I am currently coding within a <code>ViewComponent</code> (ViewComponent1) view. Within this View, I have listed a few items: <a href="https://i.stack.imgur.com/r4VFD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/r4VFD.png" alt="Listed items to be clicked"></a></p>
  
  <p>As you can see, the channels 11, 12, 13 and 14 are clickable. Each channel has some additional information (OBIS, avtalsid.. etc). What I´m trying to do is to invoke ViewComponent2, within ViewComponent1, and pass along some of the data, based on the clicked item. </p>
  
  <p>What I tried to do is to create another <code>View</code> called "Test" and within that <code>View</code> invoke ViewComponent2 along with its parameters, like this:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-2 canalstyle"&gt;
          &lt;a asp-controller="Customer" asp-action="Test" asp-route-pod="@item.STATION" 
           asp-route-idnr="@item.IDNR" asp-route-kanal="@item.KANAL" asp-route-start="@Model.start"
           asp-route-end="@Model.end"&gt; @Html.DisplayFor(modelItem =&gt; item.KANAL)&lt;/a&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This works, but this method redirects me away from my current <code>View</code> (ViewComponent 1). I don't want that. I want the current view to load the additional information from ViewComponent2. </p>
  
  <p>My function that runs the ajax:</p>
  
  <pre><code>function myFunction() {
  
   var data = JSON.stringify({
           'idnr': id,
           'start': this.start,
           'end': this.end
  });
  
   $.ajax({
       url: '@Url.Action("Test2","Customer")',
       type: 'GET',
       data: { idnr: id, start: this.start, end: this.end },
       contentType: 'application/json',
       success: handleData(data)
   })
  };
  
  function handleData(data) {
      alert(data);
      var url = $(this).attr("href");
      var $target = $(this).closest("div").find(".details");
      $.get(url, function (res) {
          $target.html(res);
      });
      //do some stuff
  }
  </code></pre>
  
  <p>And my Test2 Action:</p>
  
  <pre><code>public async Task&lt;IActionResult&gt; Test2(string idnr, string start, string end)
  {
      ServiceClient r2s = new R2S.ServiceClient();
      R2S.Konstant[] kData = r2s.GetKonstantListAsync(new string[] { "IDNR" }, new string[] { idnr}).Result; // mätarnummer in... --&gt; alla konstanter kopplade till denna.
  
      return ViewComponent("MeterReader2", new { k = kData[0], start = start, end = end });
  }
  </code></pre>
  
  <p>I am trying to target the same DOM.. Any ideas?</p>