title: Is there any good reason NOT to use a ViewComponent instead of a Partial View in core MVC?
body: <p>I'm new to MVC and decided to start with .net-core, so I don't have much understanding of the differences in core vs. older versions. I did find the below question which offers some insight but hasn't helped me to decide whether I can basically ignore partial views.</p>
  
  <p><a href="https://stackoverflow.com/questions/29823507/why-should-we-use-mvc-6-feature-view-components-over-partial-view-what-is-the-d">Why should we use MVC 6 Feature View Components over Partial View: What is the difference?</a></p>
  
  <p>My question is simply - if I can do something with a ViewComponent, is there any good reason not to?</p>
  
  <p>Many Thanks!</p>
  
  <p>Example provided below for context.</p>
  
  <p>Main view calls:</p>
  
  <p>ViewComponent:</p>
  
  <pre><code>&lt;div class="modal-body" ID="modalPersonInner"&gt;
         @await Component.InvokeAsync("CreatePerson", new Person())
  &lt;/div&gt;
  </code></pre>
  
  <p>Versus Partial View:</p>
  
  <pre><code>&lt;div class="modal-body" ID="modalPersonInner"&gt;
      @{ await Html.RenderPartialAsync("People/CreatePartialView", new Person());}
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript (personCreateForm is a form within the partial view/view component):</p>
  
  <pre><code> var submitPersonCreate = function(evt) {
  
          evt.preventDefault();
          if ($(this).valid())
          {
              $.ajax({
                  type: "POST",
                  url: '@Url.Action("CreatePartial", "People")',
                  data: $('#personCreateForm').serialize(),
                  success(data) {
                      if (data === true)
                          window.location.reload();
                      else
                          $('#modalPersonInner').html(data);
                  }
              });
          }
  
          return false;
      }
  $('#personCreateForm').submit(submitPersonCreate);
  </code></pre>
  
  <p>Controller code:</p>
  
  <pre><code>  public async Task&lt;IActionResult&gt; CreatePartial(
          [Bind("AddressLine1,AddressLine2,AddressLine3,AddressLine4,City,Country,Email,Forename,MobileNumber,Postcode,Region,Surname,TelephoneNumber")] Person person)
      {
          if (ModelState.IsValid)
          {
              _context.Add(person);
              await _context.SaveChangesAsync();
              return Json(true);
          }
          //PARTIAL VIEW VERSION
          //return PartialView("People/CreatePartialView",person);
  
          //VIEWCOMPONENT VERSION
          return ViewComponent("CreatePerson", person);
      }
  </code></pre>
  
  <p>ViewComponent code:</p>
  
  <pre><code> public class CreatePersonViewComponent : ViewComponent
      {
          private readonly AppDbContext db;
  
          public CreatePersonViewComponent(AppDbContext context)
          {
              db = context;
          }
  
          public async Task&lt;IViewComponentResult&gt; InvokeAsync(Person person )
          {
  
              return View(person ?? new Person());
          }
  
      }
  </code></pre>
  
  <p>And finally the Razor page which is the same for both:</p>
  
  <pre><code>@model Person
  
  &lt;form ID="personCreateForm"&gt;
      &lt;div class="form-horizontal"&gt;
          &lt;h4&gt;Customer&lt;/h4&gt;
          &lt;hr /&gt;
          &lt;div asp-validation-summary="ModelOnly" class="text-danger"&gt;&lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label asp-for="Forename" class="col-md-2 control-label"&gt;&lt;/label&gt;
              &lt;div class="col-md-10"&gt;
                  &lt;input asp-for="Forename" class="form-control" /&gt;
                  &lt;span asp-validation-for="Forename" class="text-danger" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label asp-for="Surname" class="col-md-2 control-label"&gt;&lt;/label&gt;
              &lt;div class="col-md-10"&gt;
                  &lt;input asp-for="Surname" class="form-control" /&gt;
                  &lt;span asp-validation-for="Surname" class="text-danger" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label asp-for="Country" class="col-md-2 control-label"&gt;&lt;/label&gt;
              &lt;div class="col-md-10"&gt;
                  &lt;input asp-for="Country" class="form-control" Value="UK" /&gt;
                  &lt;span asp-validation-for="Country" class="text-danger" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label asp-for="Region" class="col-md-2 control-label"&gt;&lt;/label&gt;
              &lt;div class="col-md-10"&gt;
                  &lt;input asp-for="Region" class="form-control" /&gt;
                  &lt;span asp-validation-for="Region" class="text-danger" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label asp-for="City" class="col-md-2 control-label"&gt;&lt;/label&gt;
              &lt;div class="col-md-10"&gt;
                  &lt;input asp-for="City" class="form-control" /&gt;
                  &lt;span asp-validation-for="City" class="text-danger" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label asp-for="AddressLine1" class="col-md-2 control-label"&gt;&lt;/label&gt;
              &lt;div class="col-md-10"&gt;
                  &lt;input asp-for="AddressLine1" class="form-control" /&gt;
                  &lt;span asp-validation-for="AddressLine1" class="text-danger" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label asp-for="AddressLine2" class="col-md-2 control-label"&gt;&lt;/label&gt;
              &lt;div class="col-md-10"&gt;
                  &lt;input asp-for="AddressLine2" class="form-control" /&gt;
                  &lt;span asp-validation-for="AddressLine2" class="text-danger" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label asp-for="Postcode" class="col-md-2 control-label"&gt;&lt;/label&gt;
              &lt;div class="col-md-10"&gt;
                  &lt;input asp-for="Postcode" class="form-control" /&gt;
                  &lt;span asp-validation-for="Postcode" class="text-danger" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;label asp-for="Email" class="col-md-2 control-label"&gt;&lt;/label&gt;
              &lt;div class="col-md-10"&gt;
                  &lt;input asp-for="Email" class="form-control" /&gt;
                  &lt;span asp-validation-for="Email" class="text-danger" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;label asp-for="MobileNumber" class="col-md-2 control-label"&gt;&lt;/label&gt;
              &lt;div class="col-md-10"&gt;
                  &lt;input asp-for="MobileNumber" class="form-control" /&gt;
                  &lt;span asp-validation-for="MobileNumber" class="text-danger" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
  
          &lt;div class="form-group"&gt;
              &lt;label asp-for="TelephoneNumber" class="col-md-2 control-label"&gt;&lt;/label&gt;
              &lt;div class="col-md-10"&gt;
                  &lt;input asp-for="TelephoneNumber" class="form-control" /&gt;
                  &lt;span asp-validation-for="TelephoneNumber" class="text-danger" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;div class="col-md-offset-2 col-md-10"&gt;
                  &lt;input type="submit" value="Create" class="btn btn-default" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>