0

I have a button that calls a modal that opens a Barcode Scanner. I would like to know if there is a way to add this code below that is a HTML file view and point to this view when click the button? I have tried to do it like this but it doesn't work for me.

What I did in the button I added the reference of the folder where is located with the data target but it does not call the modal it only works if I add on the same view .

File

    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5-qrcode/2.1.6/html5-qrcode.min.js"></script>
    <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">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><!-- /.modal-body -->
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->


        <script>
        function docReady(fn) {
            // see if DOM is already available
            if (document.readyState === "complete"
                || document.readyState === "interactive") {
                // call on next available tick
                setTimeout(fn, 1);
            } else {
                document.addEventListener("DOMContentLoaded", fn);
            }
        }

        docReady(function () {
            var resultContainer = document.getElementById('qr-reader-results');
            var lastResult, countResults = 0;
            function onScanSuccess(decodedText, decodedResult) {
                if (decodedText !== lastResult) {
                    ++countResults;
                    lastResult = decodedText;
                    window.location.href = "@Url.Action("Run", "Search")?criteria=" + lastResult;
                }
            }

            var html5QrcodeScanner = new Html5QrcodeScanner(
                "qr-reader", { fps: 10, qrbox: 250 });
            html5QrcodeScanner.render(onScanSuccess);
        });
        </script>


        <style>
            @@media screen and (max-width: 660px) {
                #qr-reader {
                    max-width: 300px; /* New width for default modal */
                }
            }
        </style>


    </div><!-- /.modal -->

Button when the modal is being called

<li class="nav-item">
        <a class="btn btn-outline-info mx-2 mx-sm-1" data-toggle="modal" data-target="#livestream_scanner" href="~/Orders/BarcodeScanner" title="Scan Barcode"><i class="bi bi-upc-scan"></i></a>
    </li>
Michaelweston
  • 149
  • 1
  • 11
  • 2
    What do you mean by 'so as not to have all this code in it. file?' – Nick Bailey Feb 11 '22 at 19:08
  • I wanted to know if there is any way to render this code so I don't have all this long code in the view.chshtml – Michaelweston Feb 11 '22 at 19:11
  • 1
    Take a look at the following post which uses `@Url.Action()` and `PartialView()` to allow a bootstrap MODAL to be segregated into its own partial view file in ASP.NET MVC / Razor. This is not identical to your use case but it is VERY similar. https://stackoverflow.com/questions/11231862/using-bootstrap-modal-window-as-partialview – David Tansey Feb 11 '22 at 21:08

0 Answers0