How to load another view as PartialView when the current View loads?

Question

I am relatively new to this. I am working on this ASP.NET Core MVC project where I want to load a PartialView, HistoryTable.cshtml in a <div> in the current Main View when the Main View, Locate.cshtml loads. In other words, I want the PartialView to be there whenever the MainView loads/reloads.

I am implementing it in the following way:

Locate.cshtml

@model Project.Models.CustomModels.LocationsHistoryViewModel
<div class="container">
...
    <div id="divLocationsHistoryTable"></div>
...
</div>

@section Scripts {
<script type="text/javascript">

    $(document).ready(function () {
        $(".disabledropdowncntrl").prop('disabled', false).trigger("chosen:updated");
        $("#divLocationsHistoryTable").load("/Project/HistoryTable");
    });

HistoryTable.cshtml

@model IEnumerable<Project.Models.CustomModels.LocationsHistoryViewModel>
<div class="card">
...
@if(Model.Count() != 0)
{
    <thead>
        <tr>
            <th data-column-id="UserId" data-type="string" data-identifier="true" hidden>User ID</th>
            <th data-column-id="Name">Name</th>
            ...
        </tr>
    </thead>

}
else
{
    ...
}
<tbody>
    @foreach(var item in Model)
    {
        <tr>
            <td>
                @item.User.FirstName @item.User.LastName
            </td>
            ...
        </tr>
    }
</tbody>
</div>

Controller: Locate ActionMethod

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Locate(int Id, InventoryLocationsHistoryViewModel locationsHistoryVM)
{
    ...
    var HistoryObject = _context.History
        .Include(...
        .Where(...
        .Select(...
    {
        ...
    }).ToList();

    return PartialView("/Project/HistoryTable", HistoryObject);
}

What to do?

EDIT

The issue that I am facing is similar to this question, however, the difference is that I HAVE to use Submit button here as I am submitting form here. The Submit button has to do two things when clicked:

1. Save the form details into the database.
2. Update the HistoryTable that has to be displayed below the Submit button always. This HistoryTable has to be shown at all times (even before clicking Submit). Thus, I cannot use Button.

Answer 1

There's a number of issues here, making it a little difficult to figure out what it is you're actually trying to achieve.

First and foremost, your Locate action should return your Locate.cshtml view, on both GET and POST. The fact that that view includes your HistoryTable.cshtml partial view is an implementation detail. If you only return the partial on POST, you'll only have the partial HTML in the browser, not the full Locate view.

Then, it appears that you're attempting to use jQuery's load method to load your actual partial, not an action that returns that partial. You can't get the view directly; you need to submit an AJAX request (what load is doing) to a route tied to an action that returns that partial.

Next, it looks like your partial needs a payload, i.e. some object needs to be "posted" for it to work with. If that's the case, you need to pass a JavaScript object representation of what you need to post to the load method as its second parameter. As it is, it's simply going to issue a GET request directly, passing no data.

However, since you're only doing this on page load, it calls into question why you're using AJAX at all. AJAX only makes sense if you need to change something later, after page load. If you're doing an AJAX request on load, it should simply be built into the page from the start, negating the need for a separate request.

Lastly, while you can pass a model to a partial view when you include it in a page, more likely than not what you're actually looking for here is a view component, i.e. something capable of actually doing logic like querying from a database, separate from the main request in play.