Razor(非MVC)模式搜索表单

Question

我看到了一些例子，但没有一个符合我的要求。我有一个名为"；Empno"；在带有查找按钮的窗体上。我想显示一个模态对话框搜索表单来填充它。模态本身有搜索字段，如公司、员工姓名和成本中心。这些模态字段用于限制结果。为了获得结果，他们单击提交按钮，这会导致回发，数据从数据库返回，然后显示在表中。桌子上有一个"；选择"；按钮我希望模态在访问数据库时保持打开状态，只有在用户按下select或close时才关闭。我过去可以用脚本管理器来实现这一点，但现在还没有。我在AspNetCore 5.x.上的一个剃刀项目中使用bootstrap 5.1

模态需要返回行的公司和empno(员工编号(；选择"；按下。我有以下的工作，以显示模式的网页。

<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

我已经部分解决了这个问题。我更改了我的模态如下(添加Iframe(：员工搜索取消

我把剧本改成了这样：@节脚本{

<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>
}

现在我只需要弄清楚如何通过选定的员工编号和公司