How to load View with PartialView already loaded in it? - asp.net-mvc

Question

I am working on this ASP.NET MVC Core project where I want to a View to be rendered on the screen with the PartialView already rendered in the View. In other words,
I have the following View:
View: Index.cshtml
...
...
<div class="card">
<div id="divPageLoad"></div>
</div>
PartialView: Details.cshtml
...
...
// Some code
...
...
I want to render Details.cshtml in divPageLoad of Index.cshtml when Index.cshtml loads on the screen. In other words, it should seem as if the contents of Index.cshtml and Details.cshtml exist on one page, where in reality, they are two different Views.
I am presently making it work in the following way:
<div class="card">
<div>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" id="lnk_InventoryDetails" onClick="GetInventoryDetails()">Details</a></li>
<li><a data-toggle="tab" href="/Inventory/Locate">Locate</a></li>
</ul>
</div>
<div id="pageLoadId"></div>
JavaScript Code:
<script type="text/javascript">
function GetInventoryDetails() {
$('#divPageLoad').load("/Constructor/Action");
};
</script>
I have used onClick(). But I know that in this way, the page will load only after thatButton is clicked. Else it won't run. I basically want to replace onClick() with something else, or take a different approach.

Answer 1

Here is an answer as requested:
<div class="card">
<div id="divPageLoad"></div>
</div>
#Html.Partial("PartialViewName")
OR
#Html.Partial("PartialViewName", Model) //If you need to pass a model object to partial