ASP.NET bootstrap modal display - asp.net

Question

There is a representation in the form of a table. If I click on the row name in the table, a modal window is displayed. Modal window with a form that is quite complex.
To display the modal window I use the following code:
$('#modal-container').on('shown.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var url = button.attr("href");
var modal = $(this);
modal.find('.modal-content').load(url);
});
$.ajaxSetup({ cache: false });
$('#modal-container').on('hidden.bs.modal', function () {
$(this).removeData('modal');
});
There are the following problems:
when repeated calls for some very short time, the contents of the last call are displayed - it is not so important
sometimes new content is not displayed at all, and the modal window contains information from the last call - it's very important
tell me, please, what could be the problem. I do not know much about JS
code where content is downloaded:
<div id="modal-container" class="modal fade hidden-print" #*tabindex="-1" *# role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
call from the action method
return PartialView("Details", projectECVM);
I suspect that the js runs faster than the razor generates the page.
Here I am forming a call for the action method:
#foreach (var item in Model.ProjectVM)
{
<tr class="clickableProject" id="#item.Id" title="View BugReports for #item.ProjectName">
<td id="Name">
<a id="details-link" asp-action="Details" asp-controller="Project" asp-route-id="#item.Id" title="View details project #item.ProjectName" data-toggle="modal" data-target="#modal-container">#Html.DisplayFor(it => item.ProjectName)</a>
</td>
<td id="Owner">
<label class="clickableProject">#item.Owner</label>
</td>
<td id="TrelloBoardURL">
<a id="trelloboard-link" href="#item.TrelloBoardURL" title="Go to TrelloBoard" target="_blank"><img src="~/images/trello-logo-blue.png" height="20" /></a>
</td>
<td id="Modification">
<label class="clickableProject">#item.Modification</label>
</td>
<td id="By">
<label class="clickableProject">#item.By</label>
</td>
<td id="DateTime">
<label class="clickableProject">#item.EntryDateTime</label>
</td>
</tr>
}

Answer 1

Clear the content of the dialog box before loading new content:
$(document).ready(function () {
$(function () {
$('#modal-container').on('shown.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var url = button.attr("href");
var modal = $(this);
$(this).empty(); //adding this part before reloading it.
modal.find('.modal-content').load(url);
});
$.ajaxSetup({ cache: false });
$('#modal-container').on('hidden.bs.modal', function () {
//$(this).empty(); //moved from shown
$(this).removeData('modal');
});
if ($('#modal-container').text().trim().length > 0) {
$('#modal-container').dialog('open');
}
else {
}
});
});