title: Load specific portion of the view on click using ViewComponent
body: <p>In my cshtml file</p>
  
  <pre><code>@foreach (var item in ViewBag.allFontCategory)
      {
          &lt;a asp-controller="Fonts" asp-action="GetFonts" asp-route-id="@item.Item1" class="font-category-name"&gt;@item.Item2&lt;/a&gt;&lt;br /&gt;
      }
  &lt;div class="col-lg-8" id="font-viewcomponent"&gt;
      @* Display fonts*@
  &lt;/div&gt;
  </code></pre>
  
  <p>In my js file </p>
  
  <pre><code>var url = '/Fonts/GetFonts/';
  $('.font-category-name').click(function () {
      $('#font-viewcomponent').load(url);
  });
  </code></pre>
  
  <p>In my controller</p>
  
  <pre><code>public IActionResult Index()
      {
          ViewBag.allFontCategory = dataService.getAllFontCategory();
          return View();
      }
  public IActionResult GetFonts(int id)
      {
          return ViewComponent("FontAdmin");
      }
  </code></pre>
  
  <p>I am trying to update the content of <code>#font-viewcomponent</code> div element when clicking on the anchor tag helper using ASP.NET Core MVC's <code>ViewComponent</code>. </p>
  
  <p>When I implement same thing  with partial view in MVC5, it works good. But with ASP.NET Core MVC's <code>ViewComponent</code> it would not work and return the <code>Defalut.cshtml</code> file as separate view not load as specific portion of the view.</p>