Razor (not MVC) Modal search form - razor

Question

Ive seen a few examples but none that meet my requirements. I have a field called "Empno" on a form with a lookup button. I want to show a modal dialog search form to populate it. The modal itself has search fields such as company, employee name, and cost center. These modal fields are used to limit results. to get the result they click a submit button which causes a postback where the data is returned from a DB and then displayed in a table. The table has a "Select" button. I want the modal to remain open on its trip to the database and only close then the user presses select or close. I used to be able to achieve this with scriptmanager which is not available. I am using bootstrap 5.1 in a razor project on AspNetCore 5.x.
The modal needs return the company and empno(employee number) of the row which "Select" is pressed. I have the following which does work to display the webpage in a modal.
<button id="btnEmpSearch" class="btn btn-dark" data-toggle="ajax-modal" data-bs-target="#modalEmployeeSearchForm" title="Search" data-url="#Url.Page("ModalContent")"><i class="fas fa-search"></i>Search</button>
<input type="hidden" id="hfDisplayModal" asp-for="DisplayModal" />
#*Modal search forms*#
<!-- Modal -->
<div class="modal fade" id="modalEmployeeSearchForm" tabindex="-1" aria-labelledby="modalTitle" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modelTitle">Employee Search</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- pagfe will be placed here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
#section scripts {
<partial name="_ValidationScriptsPartial" />
<script type="text/javascript">
$(function () {
$('button[data-toggle="ajax-modal"]').click(function (event) {
/*alert('button clicked');*/
event.preventDefault();//dont close when clicking search button
// url to Razor Pages handler which returns modal HTML(data-url)
var url = $(this).data('url');
$.get(url).done(function (data) {
// append HTML to document, find modal and show it
$("#modalEmployeeSearchForm").find(".modal-body").append(data);
$("#modalEmployeeSearchForm").modal({ "backdrop": "static", keyboard: false });
$("#modalEmployeeSearchForm").modal('show');
});
});
});
</script>
}

Answer 1

I have this partially figured out. I changed my modal as follows (Added Iframe):
Employee Search
Cancel
And I changed my script as follows:
#section scripts {
<script type="text/javascript">
$(document).ready(function () {
/*Prevent postback on btnEmpSearch button click*/
$("#btnEmpSearch").click(function (event) {
event.preventDefault();
});
/*Show modal Dialog and load URL in it*/
$('button[data-toggle="ajax-modal"]').click(function (event) {
/*url to Razor Pages handler which returns modal HTML(data-url)*/
var url = $(this).data('url');
$.get(url).done(function (data) {
// append HTML to document, find modal and show it
/* $("#modalEmployeeSearchForm").find(".modal-body").append(data);*/
$("#RemoteContentFrame").attr("src", url);
$("#modalEmployeeSearchForm").modal({ "backdrop": "static", keyboard: false });
$("#modalEmployeeSearchForm").modal('show');
/*$("#modalEmployeeSearchForm").find("#searchEmployee").preventDefault();*/
});
});
});
</script>
}
Now I just need to figure out how to pass the selected employee number and company