Opening a Modal from any page, triggered from the navbar - asp.net

Question

I am wanting to put the Modal trigger button into the navbar of the _Layout.cshtml, and be able to open the modal regardless of what url I am currently on.
My modal is housed inside a folder structure of abc/forms/create
I am only able to fire the modal up when on that page, im not quite sure how to get around the issue. for example if i was on the page of abc/forms/record the modal wouldnt fire
Below is my code for the modal (I have removed all inputs and labels etc... to save space
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
nav bar below
<nav class="navbar navbar-expand-lg navbar-light bg-dark py-3 mb-4 " style=" border-bottom: 3px solid #5bc0de;">
<div class="col-md-2">
<a asp-page="/Index">
<img src="~/assets/logo-bg.png" class="img-responsive" asp-area="" asp-page="/Index" />
</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active ">
<a class="navbar-brand text-info mr-auto m-3 mr-2 " asp-area="" asp-page="/Index"><i class="fas fa-home text-success m-1"></i>Home</a>
</li>
<li class="nav-item">
<a class="navbar-brand text-info mr-auto m-3 mr-2" asp-area="" asp-page="/Forms/Index"><i class="far fa-calendar-alt text-warning m-1"></i>Resolution</a>
</li>
<li>
<a class="navbar-brand text-info mr-auto m-3 mr-2" asp-area="" asp-page="/Forms/Records"><i class="far fa-folder-open text-danger m-1"></i>Records</a>
</li>
<li>
<a class="navbar-brand text-info mr-auto m-3 mr-2" asp-area="" asp-page="/Forms/Create"><i class="far fa-folder-open text-danger m-1"></i>Create</a>
</li>
</ul>
<form class="form-inline">
#*<a class="btn btn-info form-control text-white d-inline-block m-3" style="width: 150px; ">Create Record</a>-->*#
<a asp-page="/Forms/Create" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Create
</a>
</form>
#*<Partial name="_PartialButton" />*#
</div>
</nav>

Answer 1

Refer to Partial View in Asp.net core. Below is a simple demo.
Model:
public class User
{
public string Forename { get; set; }
}
_Layout.cshtml:
<button class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Create
</button>
<partial name="_ModalPartial.cshtml" model="new User()" />
__ModalPartial.cshtml:
#model User
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<label asp-for="Forename"></label>
<input asp-for="Forename" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Result: