在按钮中使用 onClick 使用 Modal 调用局部视图 ASP.NET mvc
Call Partial View with Modal using onClick in a button ASP.NET mvc
我想从一个按钮调用部分视图,使用它有一个使用 onClick 的模态,但由于某种原因它无法使用该功能。
让我知道我可以做些什么来让它发挥作用!
按钮
<a class="btn btn-outline-info mx-2 mx-sm-1" onclick="showModal()" id="nav-btn" ><i class="bi bi-upc-scan"></i></a>
脚本
<script>
function showModal() {
$("#div1").load("/PurchaseOrder/Barcode",
function () { $("#livestream_scanner").modal('toggle'); });
}
</script>
控制器
public ActionResult Barcode()
{
return PartialView("~/Views/Barcode/SearchScanner.cshtml");
}
使用模式查看
<div class="modal" id="livestream_scanner" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Search Barcode Scanner</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="qr-reader" style="width:450px"></div>
<div id="qr-reader-results" style="margin-bottom: 25px;"></div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
示例:
<div class="modal" id="livestream_scanner" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Search Barcode Scanner</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="modal-body">
<div id="qr-reader" style="width:450px"></div>
<div id="qr-reader-results" style="margin-bottom: 25px;"></div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
然后函数
function showModal() {
$.ajax({
url: "/PurchaseOrder/Barcode",
dataType: 'html',
beforeSend: function () {
},
success: function (data) {
$('#modal-body').html(data);
$('#livestream_scanner').modal('show');
}
});
}
我想从一个按钮调用部分视图,使用它有一个使用 onClick 的模态,但由于某种原因它无法使用该功能。
让我知道我可以做些什么来让它发挥作用!
按钮
<a class="btn btn-outline-info mx-2 mx-sm-1" onclick="showModal()" id="nav-btn" ><i class="bi bi-upc-scan"></i></a>
脚本
<script>
function showModal() {
$("#div1").load("/PurchaseOrder/Barcode",
function () { $("#livestream_scanner").modal('toggle'); });
}
</script>
控制器
public ActionResult Barcode()
{
return PartialView("~/Views/Barcode/SearchScanner.cshtml");
}
使用模式查看
<div class="modal" id="livestream_scanner" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Search Barcode Scanner</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="qr-reader" style="width:450px"></div>
<div id="qr-reader-results" style="margin-bottom: 25px;"></div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
示例:
<div class="modal" id="livestream_scanner" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Search Barcode Scanner</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="modal-body">
<div id="qr-reader" style="width:450px"></div>
<div id="qr-reader-results" style="margin-bottom: 25px;"></div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
然后函数
function showModal() {
$.ajax({
url: "/PurchaseOrder/Barcode",
dataType: 'html',
beforeSend: function () {
},
success: function (data) {
$('#modal-body').html(data);
$('#livestream_scanner').modal('show');
}
});
}