title: How to load another view as PartialView when the current View loads?
body: <p>I am relatively new to this. I am working on this <code>ASP.NET Core MVC</code> project where I want to load a <code>PartialView</code>, <code>HistoryTable.cshtml</code> in a <code>&lt;div&gt;</code> in the current <code>Main View</code> when the <code>Main View</code>, <code>Locate.cshtml</code> loads. In other words, I want the <code>PartialView</code> to be there whenever the <code>MainView</code> loads/reloads. </p>
  
  <p>I am implementing it in the following way: </p>
  
  <p><strong>Locate.cshtml</strong></p>
  
  <pre><code>@model Project.Models.CustomModels.LocationsHistoryViewModel
  &lt;div class="container"&gt;
  ...
      &lt;div id="divLocationsHistoryTable"&gt;&lt;/div&gt;
  ...
  &lt;/div&gt;
  
  @section Scripts {
  &lt;script type="text/javascript"&gt;
  
      $(document).ready(function () {
          $(".disabledropdowncntrl").prop('disabled', false).trigger("chosen:updated");
          $("#divLocationsHistoryTable").load("/Project/HistoryTable");
      });
  </code></pre>
  
  <p><strong>HistoryTable.cshtml</strong></p>
  
  <pre><code>@model IEnumerable&lt;Project.Models.CustomModels.LocationsHistoryViewModel&gt;
  &lt;div class="card"&gt;
  ...
  @if(Model.Count() != 0)
  {
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th data-column-id="UserId" data-type="string" data-identifier="true" hidden&gt;User ID&lt;/th&gt;
              &lt;th data-column-id="Name"&gt;Name&lt;/th&gt;
              ...
          &lt;/tr&gt;
      &lt;/thead&gt;
  
  }
  else
  {
      ...
  }
  &lt;tbody&gt;
      @foreach(var item in Model)
      {
          &lt;tr&gt;
              &lt;td&gt;
                  @item.User.FirstName @item.User.LastName
              &lt;/td&gt;
              ...
          &lt;/tr&gt;
      }
  &lt;/tbody&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Controller: Locate ActionMethod</strong></p>
  
  <pre><code>[HttpPost]
  [ValidateAntiForgeryToken]
  public IActionResult Locate(int Id, InventoryLocationsHistoryViewModel locationsHistoryVM)
  {
      ...
      var HistoryObject = _context.History
          .Include(...
          .Where(...
          .Select(...
      {
          ...
      }).ToList();
  
      return PartialView("/Project/HistoryTable", HistoryObject);
  }
  </code></pre>
  
  <p>What to do?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>The issue that I am facing is similar to <a href="https://stackoverflow.com/questions/19392212/how-to-use-jquery-or-ajax-to-update-razor-partial-view-in-c-asp-net-for-a-mvc-p">this question</a>, however, the difference is that I HAVE to use <code>Submit</code> button here as I am submitting <code>form</code> here. The <code>Submit</code> button has to do two things when clicked: </p>
  
  <ol>
  <li>Save the <code>form</code> details into the database. </li>
  <li>Update the <code>HistoryTable</code> that has to be displayed below the <code>Submit</code> button always. This <code>HistoryTable</code> has to be shown at all times (even before clicking <code>Submit</code>). Thus, I cannot use <code>Button</code>. </li>
  </ol>