在按钮 ASP.NET mvc 中使用 onClick 使用模态调用部分视图

Question

我想从一个按钮调用一个部分视图，使用它有一个使用 onClick 的模态，出于某种原因，它不工作 function。

让我知道我可以改变什么来让它工作..

按钮

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

Controller

 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">&times;</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 -->

Answer 1

例子：

<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">&times;</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

function showModal() {

    $.ajax({
        url: "/PurchaseOrder/Barcode",
        dataType: 'html',
        beforeSend: function () {

        },
        success: function (data) {

            $('#modal-body').html(data);
            $('#livestream_scanner').modal('show');
        }
    });
}