I want to display a razor page within a modal dialog:
Here is the code for the razor page:
<div class="container">
<div class="title modal " tabindex="-1" id="loginModal"
data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>@IdentityResources.ResendEmailConfirmation</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form method="post">
<div class="form-group">
<input class="form-control" type="text" placeholder="Email" id="inputUserName" />
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary col-md-2">@IdentityResources.Send</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#loginModal").modal('show');
});
$("#btnHideModal").click(function () {
$("#loginModal").modal('hide');
});
</script>
Then, in another razor page, I create a link to this page:
<a asp-page="/Identity/_ResendConfirmationEmail">@IdentityResources.ResendEmailConfirmation</a>
When the link is clicked, the razor page is displayed separately. How can I make it render within the current page instead of redirecting?