'Debug CSHTML Page .Net Core 2.1

I come from a .net Websites world but now I'm using .Net Core. I'm trying to find debug this code in a CSHTML file but you can't add a breakpoint? I'm using VS 2019 and trying to see more about this button which is here:

<div class="shiptype-ship" style="display: none;">
    <button id="btnNext_Ship" class="btn btn-primary" disabled="disabled">Ready for Accounting Approval</button>
</div>

and it works down on this JS code in the CSHTML page:

   btnNext_Ship.on('click', async function () {
        divLoadingOverlay.show();
        PopulateMessage(divMessage, null, null);

        const uploadedPhotoCount = divImages.find('img').length;
        const isUseCustomerAccount = chkUseCustomerAccount.prop('checked');
        const customerAccountInfo = txtCustomerAccountInfo.val().trim();
        let shippingCost_Total = 0;
        let isValidInputs = true;

        if (isShipType_Partial) {
            const minImageCount = tblSalesOrderItems.find(`tbody tr td[name="tdSerialNos"] ul li[data-salesordershipmentdeliveryid="${salesOrderShipmentDelivery.Id}"]`).closest('tr').length;

            if (minImageCount === 0) {
                PopulateMessage(divMessage, 'Items must be verified first.', 'error');
                isValidInputs = false;
            }
            else if (isRequirePhotos && uploadedPhotoCount < minImageCount) {
                PopulateMessage(divMessage, 'Verified item must have at least 1 photo.', 'error');
                isValidInputs = false;
            }
            else if (isShipType_Ship && tblSalesOrderPallets.find('tr[data-isverifyitemsincomplete="true"]').length > 0) {
                PopulateMessage(divMessage, 'To deliver a pallet, all items in it must be verified.', 'error');
                isValidInputs = false;
            }
        }
        else {
            const minPhotoCount = tblSalesOrderItems.find('tbody tr').length;
            const salesOrderItemRows = tblSalesOrderItems.find('tbody tr');
            let allItemsVerified = true;

            for (let i = 0; i < salesOrderItemRows.length; i++) {
                const $row = $(salesOrderItemRows[i]);

                if (parseInt($row.attr('data-quantityverified')) < parseInt($row.find('td[name="tdQuantity_Picked"]').text())) {
                    allItemsVerified = false;
                    break;
                }
            }

            if (!allItemsVerified) {
                PopulateMessage(divMessage, 'Each item must be verified.', 'error');
                isValidInputs = false;
            }
            else if (isRequirePhotos && uploadedPhotoCount < minPhotoCount) {
                PopulateMessage(divMessage, 'Verified item must have at least 1 photo.', 'error');
                isValidInputs = false;
            }
        }

        if (isValidInputs) {
            if (isUseCustomerAccount) {
                if (customerAccountInfo.length === 0) {
                    PopulateMessage(divMessage, 'Customer Account Info is required.', 'error');
                    isValidInputs = false;
                }
            }
            else {
                shippingCost_Total = parseFloat(tblSalesOrderPallets.find('tfoot tr td input[name="txtShippingCost_Total"]').val()) || 0;

                if (shippingCost_Total <= 0) {
                    PopulateMessage(divMessage, 'Cost per pallet or Total Cost is required.', 'error');
                    isValidInputs = false;
                }
            }
        }

        if (isValidInputs) {
            const params = new URLSearchParams({
                salesOrderShipmentId: salesOrderShipment.Id
            });

            const result = await fetch(`${api}LastWriteBackOn&${params}`, { credentials: 'same-origin' })
                .then(response => {
                    if (response.ok === false) {
                        throw response;
                    }

                    return response.json();
                })
                .catch(response => {
                    PopulateMessage(divMessage, response.statusText || response.message, 'error');
                });

            if (result) {
                if (result.MessageType === 'success') {
                    if (result.LastWriteBackOn === null) {
                        divStarShipNotification.attr('data-customeraccountinfo', customerAccountInfo);
                        divStarShipNotification.attr('data-shippingcosttotal', shippingCost_Total);
                        divStarShipNotification.modal('show');
                    }
                    else {
                        await SendToAccounting_ShipType_Ship(customerAccountInfo, shippingCost_Total);
                    }
                }
                else {
                    PopulateMessage(divMessage, result.Message, result.MessageType);
                }
            }
        }

        divLoadingOverlay.hide();
    });

Thing is, I don't see "btnNext_Ship" in the code behind page and can't debug the cshtml page to test the JS code or how it connects to the code behind? Trying to locate a select for billing routine that's tied to this or see how it connects to this but just unable to connect the dots. Is there a way to do it? I'm looking on the web or in here and not seeing anything in relation to this? In a new job and the previous guy left before I was even hired so I'm flying solo.

Thanks!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source